BootStrap学习笔记

1. 栅格系统

    1.1 container-fluid 自适应屏幕

          container  固定宽度(适应响应式)

          宽度>=1200  1170 px

          宽度  992 - 1200 970 px 

          宽度 768 - 992 750px

          宽度 <768   auto px 

    1.2 两个class 是兄弟关系，不能嵌套

    1.3 如果设了contailner ，而且想给一个固定宽度，则style width:1000px!impotant 提升优先级

 

2. 栅格布局

    col-lg-1    屏幕尺寸>1200px ，如果小于1200px,则一行显示一列

 

10. 表单1 

     form-control 表单宽度100%

　　form-group 表单之间增加一些距离

form-inline 表单在一行中显示
form-horizontal 表单在一行中显示，并且能够购表form-group样式
control-label 让label 的文字垂直居中对齐
checkbox 该checkbox 添加一个样式

 

 

14. 辅助类

 

　　14.1 字体前景色 text-muted 

     14.2 字体的背景色  bg-dangger

     14.3 三角号  caret 

     14.4 class = 'close'  &times 关闭符号

     14.5 row 类自带清除浮动功能，如果使用了pullleft 但是不在row里面，则上层类需要 clearfix 类

     14.6 center-block 是层居中

     14.7 show class

     14.8  hidden class 

     15.1 visilbe-print-block  打印的时候该div显示为块状

     15.2 visible-print-inline 打印的时候显示为航元素

 

15. 响应式工具

 　　15.1 visible-lg-block   -inline  -inline-block

      15.2 hidden-lg 

2.1

　　2.1.1 使用 font-awesome 使用 span 或者 <i 进行包裹

　　

2-7 选项卡

　　2-7-1 : 

2.3 下拉菜单

     1. 给父级增加一个dropdown 的class 

     2. 给button增加一个 data-toggle = "dropdown"  并且添加一个 drop own-toggle  的class 

     3. ul 增加一个 dropdown-menu 的class

 2.4 下拉菜单样式

       open 默认菜单是打开的，给dropdown 添加

dropup 让菜单在上边显示
dropdown-header 菜单有标题，给li添加
text-center 内容居中
divider 分割横线