引导框架的网格系统工作原理是什么 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了引导框架的网格系统工作原理是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

引导框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译少/SASS源码来修改这12个数值.bootstrap框架的网格系统工作原理:

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

& lt; div 类=癱ontainer"比; 　　& lt; div 类=皉ow"祝辞& lt;/div> 　　& lt;/div>

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

& lt; div 类=癱ontainer"比; 　　& lt; div 类=皉ow"祝辞　　& lt;才能div 类=癱ol-md-4"祝辞& lt;/div> 　　& lt;才能div 类=癱ol-md-8"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/div>

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

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

在引导网格系统中带有响应式效果,其带有四种类型的浏览器,(超小屏,小屏,中屏和大屏),其断点是768 px 992 px 1220 px

容器(.container),针对不同的浏览器分辨率,其宽度也不一样:自动,760 px 970 px 1170 px;

.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; 　　以前,,}

行容器(。行),将容器的行平分等了12份,也就是列。每个列都有个padding-left: 15 px和padding-right: 15 px;这样也导致了第一列的padding-left和最后一列的paading-right占据了中宽度的30 px

.col-xs-1,, .col-sm-1,, .col-md-1,, .col-lg-1,, .col-xs-2,, .col-sm-2,, .col-md-2,, .col-lg-2,, .col-xs-3,, .col-sm-3,, .col-md-3,, .col-lg-3,, .col-xs-4,, .col-sm-4,, .col-md-4,, .col-lg-4,, .col-xs-5,, .col-sm-5,, .col-md-5,, .col-lg-5,, .col-xs-6,, .col-sm-6,, .col-md-6,, .col-lg-6,, .col-xs-7,, .col-sm-7,, .col-md-7,, .col-lg-7,, .col-xs-8,, .col-sm-8,, .col-md-8,, .col-lg-8,, .col-xs-9,, .col-sm-9,, .col-md-9,, .col-lg-9,, .col-xs-10,, .col-sm-10,, .col-md-10,, .col-lg-10,, .col-xs-11,, .col-sm-11,, .col-md-11,, .col-lg-11,, .col-xs-12,, .col-sm-12,, .col-md-12, .col-lg-12 { 　　位置:,才能相对; 　　,,最低高度:1 px; 　　,,padding-right: 15 px; 　　,,padding-left: 15 px; 　　}

行容器(.row)定义了margin-left和margin-right值为-15 px,用来抵消第一列的左内距和最后一列的右内距,这样第一列和最后一列与容器(。容器)之间就没有间距了

.row { 　　,,margin-right: -15 px; 　　,,margin-left: -15 px; 　　}

<>强基本用法

由于引导框架在不同屏幕尺寸使用了不同的网格样式、下面就以中屏(970 px)为例。

1,列组合

列组合就是更改数字来合并列(列总数不能超过12),有点类似于表格的colspan属性;列组合方式只涉及两个特性:浮动于宽度百分比

& lt; div 类=癱ontainer"比; 　　,,,,,,,,,,& lt; div 类=皉ow"比; 　　,,,,,,,,,,,,,,& lt; div 类=癱ol-md-4"祝辞col-md-4

　　,,,,,,,,,,,,,,& lt; div 类=癱ol-md-8"祝辞col-md-8