1. #1
    Avatar von Comu
    Registriert seit
    18.11.2011
    Beiträge
    772
    Thanked 753 Times in 363 Posts

    Standard [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>
    Nun haben wir unser HTML Grundgerüst was mit der eingebundenen CSS Datei. Wir nehmen hierbei die min.css. Das ganze wurde von Javascript abgeguckt, wo quasi alles formatiert und aneinandergequetscht wird. Die Datei bootstrap.css ist noch für normale menschen gut lesbar.

    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>
    Damit würden wir uns nun aber das komplette eigentliche Layout von Bootstrap zerschießen, da wir nun einfach den Content in eine Row gepackt haben. Um nun die komplette Breite des Contents nutzen zu können, holen wir uns aus diesem Grund die Hilfsklasse "span12". Diese sagt, dass 12-Spalten des Layouts mit Content besetzt werden sollen. Es gibt dementsprechend die spans 1-12, wobei aber alle span Zahlen maximal 12 ergeben dürfen (span8 und span6 geht daher beispielsweise nicht!).

    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>
    Theoretisch haben wir unser 2-Spalten Layout nun schon fertig. Alles was wir gemacht haben, das ganze systematisch aufgeteilt damit wir damit weiterarbeiten können.

    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>
    Da wir das ganze nicht mit in den Content haben wollen sondern oben fixiert, können wir der Navigation noch die Klasse "navbar-fixed-top" mitgeben. Dann bleibt diese dauerhaft oben. Dann wollen wir noch anstatt einer weißen eine schwarze Navigation damit wir diese auch vom eigentlichen Content unterscheiden können, was wir mithilfe von "navbar-inverse" hinkriegen. Am Ende, ohne irgendwelche Menüpunkte hinzugefügt zu haben, sollte der Code dann so aussehen:

    HTML-Code:
    <div class="navbar navbar-fixed-top navbar-inverse">
    	<div class="navbar-inner">
    	</div>
    </div>
    .. und schon haben wir eine funktionsfähige schwarze Navigationsleiste am oberen Bildschirmrand. In dieses Konstrukt bauen wir nun einfach eine kleine <ul> mit der Klasse "nav" ein und <li>'s mit den Menüpunkt-Links. Bootstrap erstellt uns dann automatisch unsere Navigation. Beispiel:

    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>
    Nun wollen wir noch unseren Namen quasi als "Logo" reinpacken. Auch hierfür bietet Boostrap eine direkte Klasse: brand. Damit können wir einen etwas größeren, auffälligen Link in der Navigation anbringen. Zusätzlich verschieben wir das ganze wieder in die Mitte (976px zentriert), mithilfe der Container Klasse die wir in das navbar-inner stecken (denn wir wollen ja nur die <ul> Elemente verschieben, nicht die Navigation!).

    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 haben wir das durch. Wir haben nun aber ein Problem: Unser Content, den wir vorher gesetzt haben, ist verschwunden. Dazu setzen wir oben im <head> Teil einfach ein padding-top von 60px für den Body, damit der Content an sich nach unten verschoben wird. Die Navigation wird davon ja nicht beeinflusst, da sie fest positioniert ist.

    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>
    Dem Benutzer verpassen wir nun noch die Klasse "label label-inverse". Damit haben wir noch eine kleine Abhebung vom Text und das ganze sieht schon etwas besser aus, wie ein paar Kommentare

    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>
    Darin können wir nun die ganz normalen <tr>'s und <td>' verwenden und diese werden automatisch von Bootstrap konvertiert. Nun fügen wir noch Testweise ein paar Buttons in die Tabelle ein (die klasse hierfür lautet "btn") und verschieben die noch einmal mit der Hilfsklasse pull-right.

    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>
    Heißt, wir können quasi beliebig oft unser Grid aufteilen bis es im Endeffekt bei 1 angelangt ist. Wir müssen jedoch immer an das übergeordnete Row denken!

    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>
    Hier kommt nun das sogenannte Breadcrumb rein. Das ist quasi nichts anderes als eine erweiterte Navigation um dem Benutzer zu sagen du bist hier und hier auf der Webseite. Das ganze machen wir mithilfe einer <ul> mit der Klasse "breadcrumb". Dort kommen dann Links mit jeweils einem <li> rein. Am Ende von jedem li (außer vom letzten) setzen wir zusätzlich einen sogenannten divider, um die Menüpunkte unterscheiden zu können. Beispielsweise wäre das ein möglicher Breadcrumb:

    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>
    Das wars! Das ganze sollte nun am Ende so aussehen:



    ... und hier noch einmal die kompletten 107-Zeilen Code, die man für dieses Design braucht:

    Spoiler:

    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>U-Hacks Bootstrap Beispiel</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" href="bootstrap.min.css">
    	<style>
    	body { padding-top:60px; }
    	</style>
    </head>
    <body>
    
    	<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>
    	
    	<div class="container">
    		<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>
    		
    		<div class="row">
    			<div class="span4">
    				<h3> Kommentare </h3>
    				<div class="well">
    					<span class="label label-inverse">Benutzer am 17.03.2005</span> <br /><br />
    					<blockquote>Eine Beispielzitierung die gar nichts ausmacht aber trotzdem voll cool aussieht.</blockquote>
    								
    					<br />
    					
    					<span class="label label-inverse">Benutzer am 17.03.2005</span> <br /><br />
    					<blockquote>Eine Beispielzitierung die gar nichts ausmacht aber trotzdem voll cool aussieht.</blockquote>
    					
    					<br />
    					
    					<span class="label label-inverse">Benutzer am 17.03.2005</span> <br /><br />
    					<blockquote>Eine Beispielzitierung die gar nichts ausmacht aber trotzdem voll cool aussieht.</blockquote>
    				</div>
    			</div>
    
    			<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 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>
    			</div>
    		</div>
    	</div>
    </body>
    </html>


    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

  2. The Following 9 Users Say Thank You to Comu For This Useful Post:

    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)

  3. #2
    Avatar von Snees
    Registriert seit
    18.11.2011
    Beiträge
    1.001
    Thanked 590 Times in 319 Posts

    Standard 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

  4. The Following User Says Thank You to Snees For This Useful Post:

    Comu (13.09.2012)

  5. #3
    Avatar von Devon
    Registriert seit
    18.11.2011
    Beiträge
    2.188
    Thanked 1.574 Times in 1.023 Posts

    Standard 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.

  6. The Following User Says Thank You to Devon For This Useful Post:

    Comu (14.09.2012)

  7. #4
    Avatar von Comu
    Registriert seit
    18.11.2011
    Beiträge
    772
    Thanked 753 Times in 363 Posts

    Standard 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

  1. Bootstrap 3 RC1 ist da!
    Von Devon im Forum Webentwicklung
    Antworten: 5
    Letzter Beitrag: 03.08.2013, 17:48
  2. Antworten: 6
    Letzter Beitrag: 14.01.2013, 19:12
  3. Reg-Formular + Bootstrap Design
    Von Snees im Forum PHP
    Antworten: 7
    Letzter Beitrag: 15.09.2012, 15:17
  4. YouTube-Kanal - eigenes Design?
    Von Devon im Forum Digitale Bild- und Videobearbeitung
    Antworten: 1
    Letzter Beitrag: 23.05.2012, 18:22
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.