初学bootstrap，记栅格系统基础知识（一）

初学bootstrap，记栅格系统基础知识入门

栅格特点

在bootstrap栅格系统中，一行分为12列，用来进行布局。
要先定义一个布局容器， 在布局容器中，定义一行 在行内定义“列”
行——使用的样式“.row”。列使用样式“col-lg/mg/-" 元素内容应当写在列内。
行——必须包含在.container（固定宽度容器）或.container-fluid(100%宽度容器)
基本的书写顺序必须是：“容器—行—列”

而区别于HTML的是，HTML表格定义顺序为：先定义一个表格table，在定义一个行tr，在定义一个单元格td，内容写在单元格td中。

栅格的屏幕尺寸特点

屏幕尺寸简述：
large：lg ——大屏幕，一般PC尺寸。
medium: mg——中等屏幕，小PC尺寸。
small：sm——小屏幕，一般iPad尺寸。
x small: xs——超小屏幕，手机尺寸。

#多个屏幕尺寸共同设置：
在 col-X-X 后面空格继续加： col-X-X
例如：col-lg-4 col-md-4 col-sm-4 col-xs-4

第二种简单方法补充：
如果设置了一个屏幕尺寸，是比设备屏幕小的，默认继承。
如设置：col-xs-4 ,则在md的设备屏幕，仍然可以照常显示。

列表项部分知识

列偏移：
offset: col-lg-3 col-lg-offset-4
表示：向右偏移4个位置 ，这种设置代码设置更加简洁，更加易于阅读和维护。

列表：可去bootstrap中文官网，帮助手册位置：全局css样式——排版——列表

内联列表：

<ul class="list-inline">
<li>......</li>
</ul>

!按钮：帮助手册：全局css——按钮
注意事项：任何HTML元素加上以下样式都会变成对应的按钮！
class：btn btn-success
例：<a href="(此处为按钮的跳转功能）" class=“btn btn-default”>默认按钮</a>