t3n News Entwicklung

Bootstrap und Material Design: Mit diesem Theme erstellt ihr besonders schicke Webseiten

Bootstrap und Material Design: Mit diesem Theme erstellt ihr besonders schicke Webseiten

Das beliebte Framework Bootstrap ist den meisten Frontend-Developern ein Begriff. Schnell und einfach können hübsche und funktionale Webseiten erzeugt werden. Damit nicht jede Bootstrap-Seite gleich aussieht, können natürlich auch die verschiedensten Themes installiert werden. Wir zeigen euch, wie ihr mit ausrüstet und eure Webseite fit für Paper-Elements und Co. macht.

Bootstrap und Material Design: Mit diesem Theme erstellt ihr besonders schicke Webseiten

Material Design mit Bootstrap umsetzen. (Screenshot: Google)

Das Material Design hat schon vor einiger Zeit Einzug ins Web gehalten, ist aber trotzdem noch lange nicht so erfolgreich wie das Flat Design. Ob das eine Geschmacksfrage ist oder doch eher an den verfügbaren Ressourcen liegt, kann nicht genau bestimmt werden. Damit aber zumindest Letzteres kein Problem darstellt, entwickeln sich stetig neue Ressourcen und Quellen, um Material-Design-Webseiten einfacher und schneller zu realisieren.

Bootstrap lässt sich nicht lumpen!

Material Design für Bootstrap. (Screenshot: Material-Design-Theme)
Material Design für Bootstrap. (Screenshot: Material-Design-Theme)

Damit auch das populäre Bootstrap einfach und schnell mit Material Design versorgt werden kann, hat der Entwickler FezVrasta ein Bootstrap-Theme entwickelt. Es beinhaltet alle wichtigen Elemente und Funktionen, um eine hübsche Material-Design-Webseite zu erstellen. Auf der Demo-Seite können alle Elemente betrachtet werden, die das Theme zur Verfügung stellt.

Um das nutzen zu können, müssen folgende Styles und Scripte eingebunden werden:

<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css">

Sie sorgen zum einem für die Einbindung des Fonts Roboto und der Material-Design-Icons. Außerdem wird die Basis-CSS-Datei von Bootstrap eingebunden und zum Schluss alle CSS-Dateien, die für das Material-Design-Theme notwendig sind.

Wer seiner Webseite noch ein wenig mehr Material-Design-Magic verleihen möchte, kann dem Theme noch weitere Plugins hinzufügen.

Bootstrap-Navigation mit dem Material Design Theme. (Screenshot: Material-Design-Theme)

Um eine Navigation zu erstellen, können wir uns an die normale Bootstrap-Syntax halten und folgende Struktur mit den dazugehörigen Klassen benutzen:

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>

Bootstrap + Material Design = <3

Das Material-Design-Theme ermöglicht Entwicklern, die vorgegebenen Richtlinien einfach umzusetzen und sich primär um die Technik kümmern zu können. Jetzt ist auch Bootstrap fähig, Material Design geschickt einzusetzen.

Aktuell wird Bootstrap 3 vom Material-Design-Theme unterstützt – die Kompatibilität zu Bootstrap 4 ist schon in Entwicklung. Insgesamt kann das Theme sauber und ohne Probleme eingebunden werden und erfüllt seinen Zweck. Wer mehr über das Projekt herausfinden möchte, kann sich auf GitHub oder der offiziellen Webseite zum Bootstrap-Theme mehr Informationen holen.

Du bist Bootstrap-Fan? Hier findest du weitere nützliche Bootstrap-Tools und -Erweiterungen!

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Günther am 06.03.2016 (03:50 Uhr)

    Die bessere und umfangreichere Alternative wäre da wohl Materialize. http://materializecss.com

    Antworten Teilen
    • von JK am 07.03.2016 (08:45 Uhr)

      Auf Bootstrap-Basis ist allerdings einfacher als wieder ein neues Framework.
      So muss man bei einem bestehenden Projekt nur die CSS umbiegen und kann das HTML weiterverwenden.

      Antworten Teilen
    • von monika.ts am 23.03.2016 (08:21 Uhr)

      das sieht vorerst nicht ganz schlecht aus. CSS Klassen so zu benennen ist allerdings mehr als schlechter Stil: a class="white-text"
      habe ich mal white-text im html muss ich jedes Mal das html ändern, wenn ich statt white-text, orange-text haben mag:-)
      das ist umständlich und nicht zukunftsträchtig.

      Antworten Teilen
  2. von Ben am 08.03.2016 (09:16 Uhr)

    Die Button-Beschriftungen und Elemente-Schatten sehen teilweise unscharf und unsauber aus. Für mich hat das nicht durchgängig eine gute Qualität.

    Antworten Teilen
  3. von lampone am 16.03.2016 (15:26 Uhr)

    Hallo! Vielen Dank für Informationen!!! Ich interessiere mich für alles, was das Erstellen einer Webseite betrifft. Für meine Seite habe ich Vorlagen http://www.templatemonster.com/de/ benutzt. Mit dem Design bin ich sehr zufrieden.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Twitter Bootstrap
Spectre.css: Macht das neue Framework Bootstrap und Co. Konkurrenz?
Spectre.css: Macht das neue Framework Bootstrap und Co. Konkurrenz?

Das neue Framework Spectre.css soll eine Menge cooler Möglichkeiten mitbringen. Wir stellen es euch vor und verraten, was hinter dem neuen Framework steckt. » weiterlesen

Bootstrap-Alternativen: 6 Lightweight-Frameworks für kleine Web-Projekte
Bootstrap-Alternativen: 6 Lightweight-Frameworks für kleine Web-Projekte

Bootstrap ist umfangreich und bietet viele Funktionen und Lösungen, um eine Webseite gut umzusetzen. Doch nicht immer ist „mehr“ auch „besser“. Wir stellen euch deshalb unsere liebsten … » weiterlesen

Bootstrap: Mit diesen 15 Tools und Erweiterungen holst du mehr aus Twitters Framework raus
Bootstrap: Mit diesen 15 Tools und Erweiterungen holst du mehr aus Twitters Framework raus

Bootstrap 3 von Twitter bietet eine ausgezeichnete Grundlage für die Webentwicklung. Wir stellen euch zehn Tools und Erweiterungen vor, mit denen ihr noch mehr aus der aktuellen Version rausholt. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?