一、响应式工具:针对不同的工具显示和隐藏内容。
1、visible-*-*(显示)
<div class=”col-lg-4 visible-lg-block”></div>//只有再当前分辨率以内才可以显示。
2、hidden-*(隐藏)
<div class=”hidden-sm></div>
二、左右浮动:pull-left/right(设置左右浮动)。
三、固定定位:affix(再class中加)
四、解决容器左右两侧有空隙:外层加一个div class=row
五、字体图标:
六、预定义样式-7:btn-primary(首选项),btn-success(成功)等等一共有5种预定义样式
七、按钮-8:基础类:btn 按钮选中状态:class=”action”
八、标准按钮:<button type="button" class="btn btn-default">默认</button>
九、按钮组-9:
btn-group:按钮和按钮之间没有空隙,两头的有圆角中间没有。
Btn-justified:按钮组自动与父容器对其,想要实现按钮组,必须要是<a></a>否则要再每一个按钮外加一个父标签加父 类class=group
十、下拉菜单-10:
设置向下箭头:class=”caret”
自定义属性:data-*(用来操作JS中交互)
data-toggle=”dropdown”//toggle表示切换,dropdown只能这么写不能改
aria-*(针对特殊人群,利用屏幕阅读器)一般不用
aria-haspopup=”true/false”//是否弹出下拉菜单
aria-expanded=”true/false”//初始状态,菜单是否隐藏
aria-labelledby=”和按钮中对应的id名”//写在下拉菜单当中,用来绑定aria,对特殊人群的辅助
role(指定当前标签的状态)一般不用
role=”menu”//指定当前标签为下拉菜单