Hộp chứa Bootstrap

Twitter Bootstrap Scaffolding phần trên Bố cục chất lỏng hiển thị mã mẫu hiển thị dưới dạng hai hộp màu xanh lam. Sử dụng ví dụ đó, mã bên dưới, hiển thị "Nội dung thanh bên Nội dung cơ thể" nhưng không có hộp. Điều gì khác là cần thiết?Hộp chứa Bootstrap

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

Nguồn

2013-07-20 C.W.Holeman II

Nếu bạn đang cố gắng xem các ô màu xanh chỉ được hiển thị ở đó để tham khảo và chỉ ra cách chia lưới. Họ không thực sự có nghĩa là để được bao gồm trong mã. Các từ Sidebar Content và Body Content là các điểm tham chiếu của bạn về nơi nội dung sẽ được hiển thị. Để có được một số shading, bạn sẽ cần phải thêm một lớp CSS bên cạnh span2 và span10 divs của bạn. Dưới đây là một ví dụ:

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

Nguồn

2013-07-20 22:57:24

Các Bootstrap tài liệu có một đặc tính phong cách thêm show-grid được sử dụng để hiển thị một nền (ô trống) trên span* (cột) bên trong của hàng. CSS trông như thế này:

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

và được áp dụng cho các hàng trong các tài liệu như thế này ..

<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

Nguồn

2013-07-21 10:35:19 ZimSystem

Hộp chứa Bootstrap

Trả lời

Các vấn đề liên quan