小编给大家分享一下引导中的网格系统有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
引导框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译少/SASS源码来修改这12个数值。
引导框架的网格系统工作原理:
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