引导中的网格系统有什么用

  介绍

小编给大家分享一下引导中的网格系统有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

引导框架中的网格系统就是将容器平分成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
  ,,,,,,,,,,,,,,& lt; div 类=癱ol-md-8"祝辞col-md-8
  ,,,,,,,,,,& lt;/div>   ,,,,,,,,,,& lt; div 类=皉ow"比;   ,,,,,,,,,,,,,,& lt; div 类=癱ol-md-4"祝辞col-md-4