bootstrap小结（一）

一、响应式工具：针对不同的工具显示和隐藏内容。

        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”//指定当前标签为下拉菜单