Bootstrap Container-Boxen

Twitter Bootstrap Scaffolding Abschnitt auf Fluid-Layout zeigt Beispielcode, der als zwei blaue Kästchen angezeigt wird. In diesem Beispiel zeigt der folgende Code "Inhalt des Seitenleisten-Inhalts", aber keine Felder an. Was braucht es noch?Bootstrap Container-Boxen

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iconhttp://twitter.github.io/bootstrap/scaffolding.htmls.min.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span2"> 
     Sidebar content 
    </div> 
    <div class="span10"> 
     Body content 
    </div> 
    </div> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
</body> 
</html>

Quelle

2013-07-20 C.W.Holeman II

Wenn Sie versuchen, die blauen Boxen jene zu sehen, dass es nur angezeigt werden als Referenz und darauf zu hinweisen, wie das Raster unterteilt. Sie sind eigentlich nicht dazu gedacht, in den Code aufgenommen zu werden. Die Wörter Sidebar Content und Body Content sind Ihre Referenzpunkte für die Anzeige von Inhalten. Um eine Schattierung zu erhalten, müssen Sie eine CSS-Klasse neben Ihren span2- und span10-Divs hinzufügen. Hier ein Beispiel:

<div class="span2 well"> 
    Sidebar content 
</div>

Quelle

2013-07-20 22:57:24

Die Bootstrap docs hat eine zusätzliche Stil Eigenschaft show-grid die verwendet wird, einen Hintergrund anzuzeigen (Boxen) auf den span* (Spalten) innerhalb der Zeilen. Die CSS sieht wie folgt aus:

.show-grid [class*="span"] { 
    background-color: #ddd; 
}

und wird in der Dokumentation wie folgt auf die Zeilen angewendet ..

<div class="row-fluid show-grid"> 
    <div class="span2"> 
     Sidebar content 
    </div> 
    <div class="span10"> 
     Body content 
    </div> 
</div>

Demo: http://www.bootply.com/68856

Quelle

2013-07-21 10:35:19 ZimSystem

Bootstrap Container-Boxen

Antwort

Verwandte Themen