Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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

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

Material Design mit Bootstrap umsetzen. (Screenshot: Google)

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 Bootstrap mit Material Design ausrüstet und eure Webseite fit für Paper-Elements und Co. macht.

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 Framework 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 Theme 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!

Finde einen Job, den du liebst

5 Reaktionen
lampone
lampone

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
Ben
Ben

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
Günther
Günther

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

Antworten
JK
JK

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
monika.ts
monika.ts

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen