简介

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

基本的网格结构

下面是 Bootstrap 网格的基本结构：

<div class="container">     
<div class="row">        
<div class="col-*-*"></div>        
<div class="col-*-*"></div>           
</div>     
<div class="row">...</div>  
</div>  
<div class="container">....

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。

<!DOCTYPE html>  
<html>  
<head>     
<title>Bootstrap 实例 - 偏移列</title>     
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">     
<script src="/scripts/jquery.min.js"></script>     
<script src="/bootstrap/js/bootstrap.min.js"></script>  
</head>  
<body>    
<div class="container">       
<h1>Hello, world!</h1>       
<div class="row" >        
<div class="col-xs-6 col-md-offset-3"            
style="background-color: #dedef8;box-shadow:            
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">           
<p>Lorem ipsum dolor sit amet, consectetur adipisicing               
elit.           
</p>        
</div>       
</div>  
</div>    
</body>  
</html>

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

<!DOCTYPE html>  
<html>  
<head>     
<title>Bootstrap 实例 - 嵌套列</title>     
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">     
<script src="/scripts/jquery.min.js"></script>     
<script src="/bootstrap/js/bootstrap.min.js"></script>  
</head>  
<body>    
<div class="container">       
<h1>Hello, world!</h1>       
<div class="row">          
<div class="col-md-3" style="background-color: #dedef8;box-shadow:            
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">           
<h4>第一列</h4>           
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>        
</div>          
<div class="col-md-9" style="background-color: #dedef8;box-shadow:            
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">           
<h4>第二列 - 分为四个盒子</h4>           
<div class="row">              
<div class="col-md-6" style="background-color: #B18904;                 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">                 
<p>Consectetur art party Tonx culpa semiotics. Pinterest                     
assumenda minim organic quis.                 
</p>              
</div>              
<div class="col-md-6" style="background-color: #B18904;                 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">                 
<p> sed do eiusmod tempor incididunt ut labore et dolore magna                     
aliqua. Ut enim ad minim veniam, quis nostrud exercitation                     
ullamco laboris nisi ut aliquip ex ea commodo consequat.                 
</p>              
</div>           
</div>             
<div class="row">              
<div class="col-md-6" style="background-color: #B18904;                 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">                 
<p>quis nostrud exercitation ullamco laboris nisi ut                     
aliquip ex ea commodo consequat.                 
</p>              
</div>                 
<div class="col-md-6" style="background-color: #B18904;                 
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">                 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                     
sed do eiusmod tempor incididunt ut labore et dolore magna                     
aliqua. Ut enim ad minim.</p>              
</div>           
</div>          
</div>       
</div>    
</div>    
</body>  
</html>

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载