引導程序容器盒

Twitter Bootstrap Scaffolding流體佈局部分顯示示例代碼，顯示爲兩個藍色框。使用該示例，下面的代碼顯示「側邊欄內容正文內容」，但沒有框。還需要什麼？引導程序容器盒

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

來源

2013-07-20 C.W.Holeman II

如果您試圖查看藍色框，那些僅顯示在那裏供參考，並指出網格是如何分割的。它們實際上並不包含在代碼中。「側欄內容」和「正文內容」這兩個字是您內容顯示位置的參考點。爲了得到一些陰影，你需要在你的span2和span10 div旁邊添加一個CSS類。下面是一個例子：

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

來源

2013-07-20 22:57:24

引導程序的文檔具有用於顯示的行內的span*（列）一個背景（框）的附加樣式屬性show-grid。該CSS是這樣的：

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

，並在這樣的文檔應用到行..

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

演示：http://www.bootply.com/68856

來源

2013-07-21 10:35:19 ZimSystem

引導程序容器盒

回答

相關問題