Devon (13.09.2012), DnL (13.09.2012), Gangstersheep (13.09.2012), KillaVanilla (12.05.2014), Pwned (13.09.2012), Roxithro (14.09.2012), Shane (13.09.2012), Snees (13.09.2012), xTracZ (13.09.2012)
-
13.09.2012, 18:54 #1
[CSS] Eigenes Design mit Bootstrap
Spoiler:Outcome
Moin!
Nun einmal ein Tutorial welches ich kurz geschrieben habe, um Einsteigern einen kleinen Einblick in Bootstrap zu geben. Bootstrap ist ein CSS Framework um CSS Designs zu erstellen. Es bietet mehrspaltige Contents, vordefinierte Buttons und vieles mehr - nützlich für Administrationspanels, eigene kleine Projekte oder sonst etwas.
Das Tutorial gibt euch einen kleinen Einstieg in das ganze und erklärt die Grundlagen und das Verständnis von Bootstrap an einem kleinen Beispiel. Für CSS Einsteiger ist das ganze nicht so ganz geeignet, man sollte schon mit den gängigen Techniken vertraut sein.
Die Webseite von Bootstrap findet ihr hier: Twitter Bootstrap.
Wie man sehen kann, taucht bereits der Name Twitter drinnen auf. Das hat den Grund das Bootstrap aus dem Designtechnischen Teil von Twitter stammt. Quasi genau dieses Framework (natürlich in etwas abgewandelter Form) nutzt Twitter ebenfalls, wodurch man mit der Zeit einige Ähnlichkeiten feststellen wird.
Fangen wir an:
Zuerst müssen wir uns das Bootstrap Framework herunterladen und in den Ordner verschieben, den Direktlink findet ihr hier: http://twitter.github.com/bootstrap/.../bootstrap.zip .
HTML-Code:<!DOCTYPE html> <html> <head> <title> U-Hacks Bootstrap Beispiel </title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <h1> Meine Beispielseite </h1> </body> </html>
Als nächstes eine kleine Erklärung zu dem sogenannten "Grid-Design". Bootstrap hat von sich aus ein 12-Spalten-Layout. Heißt, mehr als 12 Spalten gibts nicht. Dabei hat jede Spalte eine bestimmte Breite zugewiesen.
Dieses komplette "Grid-Layout" hat eine feste Breite. D.h. dies geht nie über den kompletten Bildschirm, glaube das waren 976px. Nun, den kompletten Content packen wir in die Klasse "container". In diese fügen wir eine neue Reihe von Content ein und packen dort unser Grid-Layout rein. Ein Beispiel:
HTML-Code:<!DOCTYPE html> <html> <head> <title>U-Hacks Bootstrap Beispiel</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <h1> Meine Beispielseite </h1> </div> </div> </body> </html>
Wir nehmen nun mal auf einer Seite eine Sidebar und auf der anderen Seite den Content an sich, wodurch wir einmal 8 nehmen und einmal 4.
HTML-Code:<!DOCTYPE html> <html> <head> <title>U-Hacks Bootstrap Beispiel</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="span4"> <h3>Sidebar</h3> </div> <div class="span8"> <h3>Content</h3> </div> </div> </div> </body> </html>
Dem ganzen wollen wir auch nun noch eine Navigation hinzufügen, damit wir die Möglichkeit haben, den Benutzer auf mehrere Seiten zu leiten. Das ganze machen wir mit den Klassen "navbar" und "navbar-inner".
HTML-Code:<div class="navbar"> <div class="navbar-inner"> </div> </div>
HTML-Code:<div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> </div> </div>
HTML-Code:<div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <ul class="nav"> <li><a href="#">Startseite</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Unterseiten</a></li> <li><a href="#">Kommentare</a></li> </ul> </div> </div>
Das ganze sieht dann so aus:
Als letztes kleines extra Packen wir dann noch eine Suchbox hinzu. Das ganze regeln wir über ein einfaches Formular welches die Klasse "navbar-search" zugewiesen kriegt. Optional packe ich nun noch die Hilfsklasse "pull-right" dazu, welches in etwa das gleiche wie float:right ist, um die Suchbox ganz rechts an den Rand von der Navigation zu verschieben.
Unsere Navigation sollte am Ende dann so aussehen:
HTML-Code:<div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">U-Hacks</a> <ul class="nav"> <li><a href="#">Startseite</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Unterseiten</a></li> <li><a href="#">Kommentare</a></li> </ul> <form class="navbar-search pull-right"> <input type="text" class="search-query" placeholder="Suchbegriff"> </form> </div> </div> </div>
Nun stellen wir uns vor das ganze sei unser Admin Panel und in unserer Linken Leiste werden die letzten 3 Kommentare von Usern angezeigt. Dafür benutzen wir einmal die Klasse "well" welches ein einfaches Feld erstellt welches sich vom weißen Hintergrund abhebt. Danach nutzen wir einmal <b> und ein paar blockquotes um die Kommentare zu formatieren. Das ganze packen wir dann in die Sidebar:
HTML-Code:<div class="span4"> <h3> Kommentare </h3> <div class="well"> <b>Benutzer am 17.03.2005:</b> <br /> <blockquote>Eine Beispielzitierung die gar nichts ausmacht aber trotzdem voll cool aussieht.</blockquote> <b>Benutzer am 17.03.2005:</b> <br /> <blockquote>Eine Beispielzitierung die gar nichts ausmacht aber trotzdem voll cool aussieht.</blockquote> <b>Benutzer am 17.03.2005:</b> <br /> <blockquote>Eine Beispielzitierung die gar nichts ausmacht aber trotzdem voll cool aussieht.</blockquote> </div> </div>
Beispiel:
Dann packen wir eine ganz normale Tabelle mit ein paar Daten dort rein. Die Klasse für tabellen ist table. Optional fügen wir noch "table-striped" mit hinzu, um jede 2. Zeile andersfarbig darstellen zu lassen.
Damit würde sich folgender Tag ergeben:
HTML-Code:<table class="table table-striped"> </table>
Das ganze könnte dann so aussehen:
HTML-Code:<div class="span8"> <h3>Content</h3> <table class="table table-striped"> <tr> <th>Artikel-ID</th> <th>Name des Artikels</th> <th>Author</th> <th>Aktionen</th> </tr> <tr> <td>#1</td> <td>Testartikel</td> <td>Benutzer</td> <td><button class="btn pull-right">Bearbeiten</button></td> </tr> <tr> <td>#2</td> <td>Testartikel</td> <td>Benutzer</td> <td><button class="btn pull-right">Bearbeiten</button></td> </tr> <tr> <td>#3</td> <td>Testartikel</td> <td>Benutzer</td> <td><button class="btn pull-right">Bearbeiten</button></td> </tr> <tr> <td>#4</td> <td>Testartikel</td> <td>Benutzer</td> <td><button class="btn pull-right">Bearbeiten</button></td> </tr> </table> </div>
Als letztes kleines Beispiel fügen wir dem ganzen noch ein paar Bilder hinzu. Dafür nutzen wir den Dienst von placehold.it. (Damit können wir automatisch Bilder erzeugen).
Was wir dazu machen: Wir gehen in unser span8. Erzeugen dort dann eine neue <div class="row"> (um uns quasi neuen Platz für ein neues aufgeteiltes Grid zu machen) und können dort nun die span8 aus dem Content-DIV raus entnehmen. Wir wollen nun Beispielsweise 2 Bilder, aus welchem Grund wir beidem span4 zuweisen um das auf der kompletten Breite zu haben. Beispiel:
HTML-Code:<div class="row"> <div class="span4"> <div class="thumbnail"> <img src="http://www.placehold.it/280x185"> </div> </div> <div class="span4"> <div class="thumbnail"> <img src="http://www.placehold.it/280x185"> </div> </div> </div>
Um mit dem Standarddesign nun abzuschließen gehen wir aus dem ersten "row" im Container raus und erstellen uns eine erneute row welche die komplette breite von 12 Spalten hat:
HTML-Code:<div class="row"> <div class="span12"> <!-- UNSER BREADCRUMB --> </div> </div>
HTML-Code:<div class="row"> <div class="span12"> <ul class="breadcrumb"> <li><a href="#">Startseite</a><span class="divider">/</span></li> <li><a href="#">Meine Artikel</a><span class="divider">/</span></li> <li class="active">Bearbeiten</li> </ul> </div> </div>
... und hier noch einmal die kompletten 107-Zeilen Code, die man für dieses Design braucht:
Spoiler:
Man sieht: Auch ohne genaue CSS Kentnisse ist ein schnelles und logisches erstellen von Designs mithilfe von Bootstrap möglich. Alles was man sich merken muss sind die dementsprechenden Klassen. Alles was ich nun nicht angesprochen habe, könnt ihr in der offiziellen Dokumentation (welche ziemlich gut ist!) auf Twitter Bootstrap nachlesen.
Bei Fragen steht der Topic euch jederzeit offen
-
The Following 9 Users Say Thank You to Comu For This Useful Post:
-
13.09.2012, 19:04 #2
AW: [CSS] Eigenes Design mit Bootstrap
Ein wirklich sehr schönes und gutes Tutorial, was dir, Fabi, übrigens dann auch die Einführung erspart, die du mir geben wolltest
Gut aufgebaut, viele Screenshots, sauberer Code, so muss das
-
The Following User Says Thank You to Snees For This Useful Post:
Comu (13.09.2012)
-
14.09.2012, 00:48 #3
AW: [CSS] Eigenes Design mit Bootstrap
Schönes Tutorial, habs mir angeguckt und direkt dran rumprobiert und die Resultate lassen sich sehen! Kann mich deswegen auch Nico vollkommen anschließen, mach weiter so Fabi.
-
The Following User Says Thank You to Devon For This Useful Post:
Comu (14.09.2012)
-
14.09.2012, 19:45 #4
AW: [CSS] Eigenes Design mit Bootstrap
Danke. Wenn ihr irgendwelche Fragen zu dem Teil habt oder was nicht klappt, könnt ihr jederzeit nachfragen
Ähnliche Themen
-
Bootstrap 3 RC1 ist da!
Von Devon im Forum WebentwicklungAntworten: 5Letzter Beitrag: 03.08.2013, 17:48 -
Twitter Bootstrap - Schwarzer Balken an der Navigation
Von BL4cK im Forum HTMLAntworten: 6Letzter Beitrag: 14.01.2013, 19:12 -
Reg-Formular + Bootstrap Design
Von Snees im Forum PHPAntworten: 7Letzter Beitrag: 15.09.2012, 15:17 -
YouTube-Kanal - eigenes Design?
Von Devon im Forum Digitale Bild- und VideobearbeitungAntworten: 1Letzter Beitrag: 23.05.2012, 18:22
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.