BootStrap栅格布局初探
说两句
小崔认为，在H5页面设计和制作中，布局是最重要，也是最难的部分。所谓布局就是让每个元素都在设计者希望它在的位置待着，别乱动。
BootStrap在开篇最重要的位置就是介绍其“栅格系统”，我认为确实是很重要的。
官方文档写的最详细，有能力的看那个，小崔写的这个业余了。https://v3.bootcss.com/css/#grid
当然，对于苦劝不听的，我更欢迎，这里简单聊聊BootStrap的栅格系统。
原理
别管啥布局，在Html+Css中，就两种。
1 表格布局。用table > tr > td标签，最简单，也最恶心，强烈不建议。个人只在偶尔才用这样的布局。比如你做一个表单页面，用表格布局就挺不错的选择。
2 Div+CSS布局。基本现在差不多的网页都是这样布局的。
在布局中，主要是基于块元素和内联元素的特性。
内联元素：这个简单，想复杂也复杂不起来，直接向右排，到了页面最右边就换行。比如文字、图片、超级链接等都是内联元素。这个听起来不错哦？但其实特别难控制。因为~~它很难控制高度和位置，你用如果打算将一个文字、一个图片、一个按钮放在一行，然后还希望它们几个上下位置看起来比较优美，那就费死劲了。所以，这个其实是无法布局的。
块元素之Position定位：position有4种类型，默认的，相对的，绝对的，超级绝对的。
默认(static) 按照本身的特性显示，该独占一行就独占一行，该向右排就向右排。
相对(relative) 这个就有点儿可控制了，可以在默认(static)的位置基础上，相对移动。请一定要注意这个相对是相对什么的 -- 是相对自己本身应该待的位置。
绝对(absolute) 基于上级容器的位置来绝对定位，注意：这个上级容器绝对不允许是默认(static)的
超级绝对(fixed) 这个名字是小崔给它起的，其实也是绝对，只是这个绝对的参照物是整个窗口。
好了，经过上面的描述读者应该有点儿想法了吧？好用啊，就用这个来定位和布局吧。不好，很不好用，因为这样定位后，你的元素的大小位置就要写死了，很难适应不同的终端设备。简单的说就是，你绝对定位在1024宽度的电脑上，在居于左侧500的位置，换成手机上，500的位置就看不到了，跑手机外面了。
浮动布局之float属性：这个好用，块元素采用左右浮动，就很容易布局了。唯一要注意的就是：浮动元素不能再撑开外部的容器了，因此在若干个浮动容器之后，再增加一行清除浮动的div。
如下：
|
1
|
<
div
style
=
"clear:both"
></
div
>
|
BootStrap栅格系统
好了，原理说完了，开始说BootStrap采用的栅格系统了。
万变不离其宗，肯定也是基于以上的若干方式实现的栅格布局。
BootStrap的基本思想就是将常用的页面效果都封装成标准的类名(class)，用户随时可以调用了。
在实现栅格布局的时候，BootStrap是这样考虑的 ：
1 页面布局容器采用浮动方式。这样元素就从左向右顺序排排队，你需要操心的只是宽度和高度了。
2 先说高度，高度的问题就是自己控制了。BootStrap的栅格布局不管你的高度。
3 再说宽度，BootStrap认为一个页面宽度分成12份就足够细了，你的每个容器在宽度上占用1份还是3份都行啊。
看看下图，总宽度是12份，第一个白色背景的，宽度为3份，第二个蓝色背景的宽度为4份，第三个黄色背景的宽度为3份。
这样，分别用百分比给他们设置宽度就行了。
所以，BootStrap在设置每个容器栅格布局的时候，是强烈推荐采用百分比来设置宽度的。
BootStrap的栅格化类名有如下几种，(说明:**代表1-12的数字，比如col-sm-4)：
col-lg-**：对超大屏幕采用的布局，如果你的显示器查过了1200px的宽度，就这个生效。
col-md-**：对中等屏幕的布局。显示器在992px-1200px之间的有效。
col-sm-**：对小屏幕的布局。譬如ipad
col-xs-**：超小屏幕的布局。譬如手机
如果你希望能自动适应多屏幕，那就要综合的使用这些类名。
|
1
2
3
4
5
6
7
8
9
10
11
|
<
link
rel
=
"stylesheet"
href
=
"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin
=
"anonymous"
>
<
div
class
=
"col-md-9 col-xs-12"
>
<
div
class
=
"input-group"
>
<
input
type
=
"text"
class
=
"form-control"
placeholder
=
"关键字..."
>
<
span
class
=
"input-group-btn"
>
<
button
class
=
"btn btn-default"
type
=
"button"
>搜索模板</
button
>
</
span
>
</
div
>
</
div
>
|
看看上面的例子，就是在普通电脑显示器上占9/12的宽度，如果在手机上，就占满屏了。