bootstrap实践笔记

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

如何部署container与container-fluid

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div class="container-fluid">
<div class="limiter">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
</div>
<style>
.limiter{
max-width:1170px;
margin:0 auto;
}
</style>
</body>

row与col之间的布局

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row .no-gutters">
<div class="col-sm-8"></div>
<div class="col-sm-8"></div>
<div class="col-sm-8"></div>
<div class="col-sm-8"></div>
</div>
<style>
.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;
}
</style>

设置h1-h6之间margin为0

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

col与col之间的border

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="row">
<div class="col-sm-4">
<div class="box">
<img src="">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<img src="">
</div>
</div>
</div>
<style>
.box{
max-width: 96%;
}
</style>

应该用一个额外的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,尤其是单页全屏网页