栅格布局系统的特点：
(1)所有的行必须放在容器中：.container或.container-fluid
(2)分为多行，每行平均分为12列
(3)网页内容只能放在列中，不能直接放在行中
(4)可以在列中再嵌套行
(5)col分为四大类：col-xs col-sm col-md col-lg
(6)col-md-*：*值可为（1~12），值就为某个列的宽度
(7)可以为一个列指定不同屏幕下的宽度
(8)col-lg(md,sm,xs)-*：只对大于等于自己相应宽度的屏幕有效，小于的都是铺满（100%）
(9)hidden-lg(md,sm,xs)：当前列只在对应屏幕下隐藏
栅格布局系统注意事项：
（1）注意每一列中的元素都是左对齐的。
当如下代码时的效果图如下：
<div class="container">
<div class="row">
<div class="col-md-1">首页</div>
<div class="col-md-1">影集</div>
<div class="col-md-1">活动</div>
<div class="col-md-4 col-md-offset-5"><input type="text" value="search..."></div>
</div>
</div>
由上图可以看出input输入框不能右对齐，是因为input只占两列，但却将其放在了4列中。要使input输入框右对齐，正确代码及效果如下所示：
<div class="container">
<div class="row">
<div class="col-md-1">首页</div>
<div class="col-md-1">影集</div>
<div class="col-md-1">活动</div>
<div class="col-md-2 col-md-offset-7"><input type="text" value="search..."></div>
</div>
</div>
1.盒子模型的计算方法——box-sizing（Bootstrap的重置）
div{
box-sizing: content-box; /*默认值*/
box-sizing: border-box; /*推荐使用*/
}content-box：一个盒子的总宽度=margin+border+padding+width；
border-box：一个盒子的总宽度=margin+width；（border与padding同样存在宽度，只不过是往div中的width里面挤）
2.面试题：Bootstrap布局系统中容器（container）的特点
Bootstrap布局系统中容器（container）的特点：
1)宽度作了媒体查询。
2)添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响。
(1).如何解决父元素的第一个子元素的margin-top越界问题
1)为父元素加border-top: 1px;——有副作用
2)为父元素指定padding-top: 1px;——有副作用
3)为父元素指定overflow:hidden;——有副作用
4)为父元素添加前置内容生成——推荐使用（代码如下）
div.parent:before {
content: ' ';
display: table;
/*table表格的显示模式就是table，table内容有多少table就占多少，所以将table作为前置内容放在第一个子
元素前面，并给予table一个空格内容，这样table即不占空间，又能将原本父元素的第一个子元素变为第二个子元
素，即解决第一个子元素margin-top越界的问题。但是其他元素比如span本身占有一定空间，所以不能使用。*/
}table表格显示方式table的特点：当内容为空时table的高为零，但又不允许其他元素与自己在同一行（即宽是铺满整个屏幕的）。所以当如下代码的情况时，a和b在不同的行，table在a和b两行的中间，但又不占有任何空间(即高为零)。
<body>
a<table></table>b
</body>(2).如何解决所有的子元素浮动后父元素高度变为零，且影响后续元素
1)为父元素指定overflow:hidden;——有副作用
2)为父元素指定高度：height: xxx;——有局限性（不好确定子元素的总高度）
3)为父元素添加后置内容生成——推荐使用（代码如下）
.parent:after {
content: ' ';
display: table;
clear: both; /*不允许有浮动对象 */
}
出现此种情况的原因是所有子元素都浮动了，只要在最后加一个非浮动元素即可实现父元素高度存在且不影响后续元素。
3.Collapse
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<!--这里为什么放两层div？？？-->
<div class="collapse" id="collapseExample">
<div class="alert alert-success">
...
</div>
</div>上面放两个div的原因：在编写代码时尽量不要让一个元素承担两类任务，比如上面的两个div，第一个承担折叠、展开的动作，第二个div承担内容的样式。
8133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
