css部分笔记
栅格系统:把网页分成大小相同的格子 方便快速布局
实现思路:
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实现逻辑与代码
在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)
表示选择偶数列