栅格系统：把网页分成大小相同的格子 方便快速布局
实现思路：
1 有一个盒子（容器）最外层 --container
2 有一行 row
3 再一行内写列 col
规定1：一行划分9-12个格子（列）
规定2：列必须在行里面
规定3：行必须在container 容器里面
参考手册
代码如下：
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9"></div>
</div>
</div>
</body>
盒子模式设置：
box-sizing：border-box 自动帮助改变父盒子尺寸（因padding值改变而自动改变父盒子大小）
box-sizing：content-box 默认盒子 不会自动帮我们减少盒子大小
bootstrap 列排序
引入bootstrap 后
用col-md-push-格子数实现往右边推
用col-md-pull-格子数实现往左边拉
具体图片如下：
bootstrap排序过程
bootstrap实现逻辑与代码
在col-md-1，col-md-2等情况下加入position：relative属性
然后再通过定义col-md-push-格子数与col-md-pull-格子数 来实现推拉功能
代码如下：
实现从左到右推
实现从右往左拉
Bootstrap 按钮类封装：
<a class="btn btn-default" href="http://www.baidu.com" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
list-style:square
把li属性前面的点变成方形
tr:nth-of-type(2n)
表示选择偶数列
网友评论