bootstrap实践笔记

soul

2016年4月25日 • 2 min read

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

如何部署container与container-fluid

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

<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来实现

<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列下移解决方案如下

<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仅仅用来处理颜色等内容而不应该设置positioncol上的class也仅起定位作用

给图片包裹一层

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

col的class

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

设计稿宽度

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