什么是栅格系统？

 

　　Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

 

　　栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中

 

　　注意：

 

　　”行（row）“必须包含在.container(固定宽度)或.container-fluid(100%宽度)中。

 

　　<pclass="container">

 

　　<pclass="row">

 

　　<pclass="col-md-3">我是文本</p>

 

　　<pclass="col-md-3">我是文本</p>

 

　　<pclass="col-md-3">我是文本</p>

 

　　<pclass="col-md-3">我是文本</p>

 

　　</p>

 

　　</p>

 

　　表示一个p占3列。

 

　　栅格参数

 

　　超小屏幕手机(<768px) 小屏幕平板(≥768px) 中等屏幕桌面显示器(≥992px) 大屏幕大桌面显示器(≥1200px)

 

　　栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C

 

　　.container最大宽度 None（自动） 750px 970px 1170px

 

　　类前缀 .col-xs- .col-sm- .col-md- .col-lg-

 

　　列（column）数 12

 

　　最大列（column）宽 自动 ~62px ~81px ~97px

 

　　槽（gutter）宽 30px（每列左右均有15px）

 

　　可嵌套 是

 

　　偏移（Offsets） 是

 

　　列排序 是

 

　　现在有一个需求：

 

　　如果是大屏幕，一行显示6列

 

　　如果是中屏幕，一行显示4列

 

　　如果是小屏幕，一行显示3列

 

　　如果是超小屏幕，一行显2列

 

　　<pclass="container">

 

　　<pclass="row">

 

　　<pclass="col-lg-2col-md-3col-sm-4col-xs-6">我是文本</p>

 

　　<pclass="col-lg-2col-md-3col-sm-4col-xs-6">我是文本</p>

 

　　<pclass="col-lg-2col-md-3col-sm-4col-xs-6">我是文本</p>

 

　　<pclass="col-lg-2col-md-3col-sm-4col-xs-6">我是文本</p>

 

　　<pclass="col-lg-2col-md-3col-sm-4col-xs-6">我是文本</p>

 

　　<pclass="col-lg-2col-md-3col-sm-4col-xs-6">我是文本</p>

 

　　</p>

 

　　</p>

 

　　列偏移

 

　　.col-lg-offset-*

 

　　"*"偏移几个位置

 

　　<pclass="container">

 

　　<pclass="row">

 

　　<pclass="col-lg-2col-lg-2">我是文本</p>

 

　　</p>

 

　　</p>

 

　　在大屏幕的页面下偏移两个格子

 

　　列嵌套

 

　　<pclass="container">

 

　　<pclass="row">

 

　　<pclass="col-lg-5">

 

　　<pclass="row">

 

　　<pclass="col-lg-2">我是文本</p>

 

　　<pclass="col-lg-2">我是文本</p>

 

　　</p>

 

　　</p>

 

　　</p>

 

　　</p>

 

　　在列里面再进行一次嵌套，会把列的大小平均分成12份再计算。

 

　　总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。






本文转载自中文网