引导网格系统使用方法解析 - 行业资讯 - 肥雀云

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份。

<>强工作原理
　　

1,数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(填充)。如:

　　　　　　& lt; div类="容器"比; 　　& lt; div类="行"祝辞& lt;/div> 　　& lt;/div> 　　　　

2,在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:

　　　　　　& lt; div类="容器"比; 　　& lt; div类="行"比; 　　& lt; div类=" col-md-4 "祝辞& lt;/div> 　　& lt; div类=" col-md-8 "祝辞& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　　　之前　　　　

3,具体内容应当放置在列容器(列)之内,而且只有列(列)才可以作为行容器(.row)的直接子元素

4,通过设置内距(填充)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(保证金)来抵消内距(填充)的影响

能这媒体查询实现:
　　针对不同的浏览器分辨率,其宽度也不一样:自动,750 px, 970 px和1170 px
　　css源码:
　　

　　　　　　.container { 　　padding-right: 15 px; 　　padding-left: 15 px; 　　margin-right:汽车; 　　margin-left:汽车; 　　@media (min-width: 768 px) { 　　.container { 　　宽度:750 px; 　　} 　　@media (min-width: 992 px) { 　　.container { 　　宽度:970 px; 　　} 　　@media (min-width: 1200 px) { 　　.container { 　　宽度:1170 px; 　　} 　　之前　　　　

<>强基本用法
　　

网格系统用来布的局,其实就是列的组合,引导框架在不同屏幕尺寸使用了不同的网格样式
　　

<强> 1,列组合
　　

列组合简单理解就是更改数字来合并列(原则:列总和数不能超12)
　　实现列组合方式非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。

　　　　/*确保所有列左浮动*/.col-md-1、.col-md-2 .col-md-3、.col-md-4 .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 .col-md-12 { 　　浮:左; 　　} 　　　　---------------------------------------------------------------------------------/*定义每个列组合的宽度(使用的百分比)*/.col-md-12 { 　　宽度:100%; 　　} 　　.col-md-11 { 　　宽度:91.66666667%; 　　} 　　.col-md-10 { 　　宽度:83.33333333%; 　　} 　　.col-md-9 { 　　宽度:75%; 　　} 　　.col-md-8 { 　　宽度:66.66666667%; 　　} 　　.col-md-7 { 　　宽度:58.33333333%; 　　} 　　.col-md-6 { 　　宽度:50%; 　　} 　　.col-md-5 { 　　宽度:41.66666667%; 　　} 　　.col-md-4 { 　　宽度:33.33333333%; 　　} 　　.col-md-3 { 　　宽度:25%; 　　} 　　.col-md-2 { 　　宽度:16.66666667%; 　　} 　　.col-md-1 { 　　宽度:8.33333333%; 　　} 　　　　之前　　　　

列偏移
　　

我们不希望相邻的两个列紧靠在一起,但又不想使用保证金或者其他的技术手段来。这个时候就可以使用列偏移(抵消)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset - *”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移,例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

　　　　　　& lt; div类="容器"比; 　　& lt; div类="行"比; 　　& lt; div类=" col-md-4 "祝辞.col-md-4

　　& lt; div class=" col-md-2 col-md-offset-4”在列向右移动四列的间距& lt;/div> 　　& lt; div类=" col-md-2 "祝辞.col-md-3