Bootstrap框架是如今最流行的前端框架之一,Bootstra功能强大,简单易学,很符合实际应用场景。但是其中包含的内容比较多,新手往往不能很快的熟练掌握。接下来,我们一起对Bootstra栅格系统做一下简单的总结:
Bootstrap栅格系统的定义是什么呢?
Bootstrap包含了一个响应式的、移动设备优先的、不固定网格系统,可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类
从上述话语中可以简单的整理出三个方面:
1、 Bootstrap3是移动设置优先
2、 Bootstrap的栅格系统最多12列
3、 Bootstrap中包含了许多预定义类
在通常我们写的页面里,浏览器缩小到一定程度,页面会错位、变形,这在Bootstrap中不会,因为它是自适应的。
Bootstrap栅格系统(Grid System)相关类
\1. container类表示栅格。使用container类能够获得Bootstrap默认设置的对齐(alignment)和内边距(padding)样式。
\2. 使用.row来创建一行,每行又分为多个列。
\3. 使用.col-[screen style]-[percent]预定列元素来快创建栅格。
\4. 内容应该放置在列内,且只有列可以是行的直接子元素。
Ps:row>col
\5. 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负值得到。就是说:你想减少列间距,用负的margin来写。
\6. 网格系统是通过指定你想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个.col-md-4。
Bootstrap网格的基本结构
< div class=”container”>//容器
< div class=”row”>//栅格中的行
< div class=”col--”>< /div>//行下的直接元素列
< div class=”col--”>< /div>
< /div>
< div class=”row”>…< /div>
< /div>
< div class=”container”>
栅格选项
Bootstrap栅格把设备分为了四种:
超小设备(手机)、小型设备(平板)、中型设备(笔记本电脑)、大型设备(大尺寸显示器)这四种设备它们各自的列数量和都不可以超过12.
它们的列有不同class前缀做标识。
超小设备用.col-xs
小型设备用.col-sm
中型设备用.col-md
大型设备用.col-lg-
不论哪种设备,它们的间隙都是30px(指列的padding-left;15px和padding-right:15px;)
使用栅格布局的步骤
\1. 引入bootstrap所需要的库
就好比引入一个外部样式表,只不过这个是bootstrap的样式表,它包含css和js两部分
\2. 添加bootstrap容器
在body中写一个div,并为这个div添加一个container类,这个类是非常有用的,它能在页面中创建一个居中的区域,然后我们把其它的元素放在里面。它等于是创建了一个具有静态宽度,并且margin值为auto的一个居中的div框,container的优先在于它是响应式的,它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。
\3. 在container中添加row
我们用row来横向布局
\4. 在row中添加列
就好比表格中添加了tr.之后在tr中添加td一样。
Row中的列就是我们之前的.col-xs-6,加起来正好12列
栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。