title: bootstrap实践笔记 date: 2016-04-25 23:59:02

tags:

长期更新,前辈总结的bootstrap经验

如何部署container与container-fluid

为了方便更改,在body标签下部署container-fluid,因为container不能嵌套container原则,如果想内容居中则可以使用.limiter这个class.具体参考如下 ```

.limiter{ max-width:1170px; margin:0 auto; }

```

row与col之间的布局

原则上一个section应该只有一个row.一个row下面可以有多个(总数超过12列)的col,那么要实现col与col之间padding为0 应该用一个额外的class如.no-gutters来实现 ```

.row.no-gutters { margin-right: 0; margin-left: 0; } .row.no-gutters [class^="col-"], .row.no-gutters [class*=" col-"] { padding-right: 0; padding-left: 0; }

```

设置h1-h6之间margin为0

为了美观与方便设计.应该设置h1-h6之间margin为0,需要的时候再额外设置

col与col之间的border

因为col与col width都是设置好的 如果多出1px的border那么会导致其他的col列下移 解决方案如下 ```

.box{ max-width: 96%; }

``` 应该用一个额外的div来包裹整个内容 同时给这个div设置最大宽度

如有需要应该在col/row中加上一个class

请小心在row上加class,row上的class仅仅用来处理颜色等内容而不应该设置position col上的class也仅起定位作用

给图片包裹一层

如需要设置图片则给图片加上响应式class(.img-responsive) 或者给图片包裹一层div 并且设置 overflow:hidden

col的class

不直接给col加class是因为col本身就带了padding和margin 怕改错 如果要内部要增加的话

设计稿宽度

设计稿规定常见的高宽度比如768px,尤其是单页全屏网页