HTML/CSS. Bootstrap 3网格系统

本教程提供有关的信息 Bootstrap 3 Grid System.

Twitter Bootstrap 网格系统提供了一种快速简便的创建网页布局的方法. Twitter Bootstrap 3引入了响应式移动优先流体网格系统，随着设备或视口大小的增加，该系统可以适当地扩展到12列. 让我们看看它是如何工作的.

1. 行应该放置在 .容器(固定宽度)或 .用于正确对齐和填充的容器流体(全宽).

2. 应该使用行来创建水平的列组.

3. 内容应该放在列中，并且只有列可以是行的直接子行.

4. 预定义的网格类，如 .row and .Col-xs-4可用于快速制作网格布局. Less Mixins还可以用于更多的语义布局.

5. 列通过填充创建槽(列内容之间的间隙). 该填充在第一列和最后一列的行中通过负边距进行偏移 .rows.

6. 通过指定希望跨越的12个可用列的数目来创建网格列. 例如，三个相等的列将使用3 .col-xs-4.

7. 网格类应用于屏幕宽度大于或等于断点大小的设备, 并覆盖针对较小设备的网格类. 因此，应用任何 .元素的Col-md类不仅会影响其在中型设备上的样式，而且会影响其在大型设备上的样式 .coll - class不存在.

Layouts

Twitter Bootstrap 3包含预定义的网格类，用于快速为不同类型的设备(如手机)制作网格布局, tablets, desktops, etc. 例如，您可以使用 .类创建网格列的特别小的设备，如手机类似 .coll -sm-用于像平板电脑这样的小屏幕设备 .cold - class适用于中等大小的设备，如台式机和笔记本电脑 .coll -lg-用于大型桌面屏幕. 中定义的布局 Bootstrap Grid System.

1. 超小型设备 like Phones (<768px)

2. 小型设备，如平板电脑(≥768px)

3. 中型设备，如台式机(≥992px)

4. 大型设备，如台式机(≥1200px)

Grid options

详情请参阅下表:

Applying any .元素的Col-sm类不仅会影响其在平板电脑等小型设备上的样式, 但也适用于屏幕尺寸大于或等于768px (i)的大中型设备.e. ≥768px) if .col-md- and .coll - class不存在. Similarly the .cold - class不仅会影响中型设备上元素的样式, 在大型设备上也一样 .coll - class不存在.

让我们来看看一些例子:

1. Stacked-to-horizontal. 使用一组 .-md-*网格类, 你可以创建一个基本的网格系统，在移动设备和平板设备(小到小的范围)上开始堆叠，然后在桌面(中等)设备上变为水平. 在任意位置放置网格列 .row.

   

   您可以检查下面的代码:

   
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   	
   .col-md-1
   
   
   	
   .col-md-8
   	
   .col-md-4
   
   
   	
   .col-md-4
   	
   .col-md-4
   	
   .col-md-4
   
   
   	
   .col-md-6
   	
   .col-md-6
      
   

2. Fluid container. 转动任意固定宽度 grid layout into a full-width layout 通过改变最外层 .container to .container-fluid.

   
   	
   
   	...
   	
   
   

3. 手机和桌面. 您可以添加额外的小型和中型设备网格类 .col-xs-* .在列中添加-md-*.

   

   您可以检查下面的代码:

   
   
   	
   .col-xs-12 .col-md-8
   	
   .col-xs-6 .col-md-4
   
       
   
   
     
   .col-xs-6 .col-md-4
     
   .col-xs-6 .col-md-4
     
   .col-xs-6 .col-md-4
   
     
   
   
     
   .col-xs-6
     
   .col-xs-6
   
     

4. 手机、平板电脑、台式电脑. 我们将在平板电脑上做更多的动态布局 .基于前面示例的Col-sm -*类.

   

   您可以检查下面的代码:

   
   	
   .col-xs-12 .col-sm-6 .col-md-8
   	
   .col-xs-6 .col-md-4
   
   
   	
   .col-xs-6 .col-sm-4
   	
   .col-xs-6 .col-sm-4
   	
   	
   
   	
   .col-xs-6 .col-sm-4
   
   

5. Column wrapping. 如果在单行中放置超过12列, 每组额外的列将, as one unit, 绕到一条新线上.

   

   您可以检查下面的代码:

   
       
   .col-xs-9
       
   .col-xs-4
   Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
       
   .col-xs-6
   Subsequent columns continue along the new line.
   
   

6. 响应式列复位. 有了可用的四层网格，您一定会遇到以下问题, 在某些断点处, 你的柱子不是很清晰，因为一根比另一根高. 要解决这个问题，可以使用a的组合 .Clearfix和我们的响应实用程序类.

   

   您可以检查下面的代码:

   
   	
   .col-xs-6 .col-sm-3
   	
   .col-xs-6 .col-sm-3
   
   
   	
   
   	
   .col-xs-6 .col-sm-3
   	
   .col-xs-6 .col-sm-3
   
   

7. 抵消列. 将列向右移动 .col-md-offset - *类. 这些类将列的左边距增加*列. For example, .col-md-offset-4移动 .Col-md-4超过四列.

   

   您可以检查下面的代码:

   
   	
   .col-md-4
   	
   .col-md-4 .col-md-offset-4
   
   
   	
   .col-md-3 .col-md-offset-3
   	
   .col-md-3 .col-md-offset-3
   
   
   	
   .col-md-6 .col-md-offset-3
   
   
   

8. Nesting columns. 要将内容嵌套到默认网格中，请添加一个新的 .row and set of .中的列 .col-sm-* column. 嵌套行应包括一组列，这些列加起来最多为12或12 less (不需要使用所有12个可用列).

   

   您可以检查下面的代码:

   
   	
   
   	Level 1: .col-sm-9
   		
   
   		
   
   		Level 2: .col-xs-8 .col-sm-6
   		
   			
   
   			Level 2: .col-xs-4 .col-sm-6
   		
   		
   	
   
   

9. Column ordering. 可以更改内置网格列的顺序 .col-md-push-* and .Col-md-pull -*修饰符类.

   

   您可以检查下面的代码:

   
   	
   .col-md-9 .col-md-push-3
   	
   .col-md-3 .col-md-pull-9
   
   

引导响应式实用程序类

1. 您可以使用以下响应类来启用屏幕尺寸在特定范围内的某些设备上的元素可见性. As of v3.2.0, the .每个断点的可见* *类有三种变体, 每个CSS显示属性值对应一个:inline, 块和内联块.

   Class	Description
   .visible-xs-*	使元素只在屏幕宽度特别小的设备上可见 less than 768px. Hidden on others.
   .visible-sm-*	使元素仅在屏幕宽度大于或等于768px(1)的小型设备上可见.e. ≥768px) but less than 992px. Hidden on others.
   .visible-md-*	使该元素仅在屏幕宽度大于或等于992px(1)的中型设备上可见.e. ≥992px) but less than 1200px. Hidden on others.
   .visible-lg-*	使元素仅在屏幕宽度大于或等于1200px(1)的大型设备上可见.e. ≥1200px). Hidden on others.

2. 类似地，你可以使用这些隐藏的实用工具类来隐藏某些设备上的元素:

   Class	Description
   .hidden-xs	只在屏幕宽度特别小的设备上隐藏元素 less than 768px. Visible on others.
   .hidden-sm	仅在屏幕宽度大于或等于768px (i)的小型设备上隐藏元素.e. ≥768px) but less than 992px. Visible on others.
   .hidden-md	仅在屏幕宽度大于或等于992px (i)的中型设备上隐藏元素.e. ≥992px) but less than 1200px. Visible on others.
   .hidden-lg	仅在屏幕宽度大于或等于1200px (i)的大型设备上隐藏元素.e. ≥1200px). Visible on others.

3. 可以使用以下实用程序类显示或隐藏用于打印目的或设备的某些元素.

   .visible-print-block	隐藏block元素 Browser 在打印时显示.
   .visible-print-inline	隐藏内联元素 Browser 在打印时显示.
   .visible-print-inline-block	为隐藏内联块元素 Browser 在打印时显示.
   .hidden-print	隐藏元素，以便在显示时打印 Browser.

此外，我们建议您查看我们的大规模响应 引导模板.