运用Bootstrap框架时常用的样式

表示添加一条横线

3. 有反色的导航条 .navbar-inverse

4. 使字体能够自适应大小： .lead

5. 使图片能够自适应大小： .img-responsive

6. 左浮动： .pull-left
   右浮动： .pull-right

7. 回到顶部：href="#" target = "_top"

8. 使文本颜色为灰色：.text-muted

9. 字体对齐 http://v3.bootcss.com/css/#type-alignment

    
   Left aligned text.
    
   Center aligned text.
    
   Right aligned text.
    
   Justified text.
    
   No wrap text.
   

10. 字体颜色 http://v3.bootcss.com/css/#helper-classes

    ...
    ...
    ...
    ...
    ...
    ...
    

    注意：字体颜色a标签不能继承父类的中的text-xxx

11. 按钮样式是可以自动生成的：http://blog.koalite.com//bbg//
    按钮也有尺寸：可变大可变小 btn-lg btn-md btn-sm btn-xs

12. 可实现某种屏幕尺寸隐藏（可通过媒体查询实现）

    hidden-xx : 在某种屏幕下隐藏( display : ‘none’ )
    visible-xx-xxx : 在某种屏幕尺寸下显示
    visible-md-xx：指的是中等屏幕可见，不是中等屏幕以上不可见
    visible-md-block visible-lg-block == hidden-sm hidden-xs
    

13. 使用boostrap的组件，第一件事要修改id ，id是唯一的。因为该组件可能会被多次使用，所以一定要改id。

14. 
    效果是一条小横线（小小的分界线）

15. 注意可以用媒体对象设置左右结构和上下结构。（案例在组件中）

16. 使用面板时的注意点

    • 当面板是左右结构。要先确定哪部分是标题哪个是主体，并使得靠右的面板右浮动。
    • 注意版心居中。若观察后发现是有版心的，且属于响应式的，则要嵌套容器.container 或者 .container-fluid（宽度为父元素的100%）
    • 要使得左右结构好看，就要为其设置高度，宽度作为其响应式处理
    • 注意：如果有标题有内容的可以使用 dt 和 dd 标签

• 16. 灵活运用栅格系统、弹性布局、伪元素（半圆的实现效果）
• 17. 注意使用框架中的提示信息的时候要加上 js 代码才有效果
• 18. 灵活使用标签页的内容。垂直的胶囊式标签页的选项卡属于标签页的选项卡。若使用栅格系统，即可使其垂直
• 19. 平均分成9份:
      width: calc(100%/9)
• 20. 吸顶效果
      data-say="affix" （固定定位）
      navbar-static top 静态固定在顶部
      data-offset-top = "40" 距离顶部40的时候吸顶