首页 > > 网页制作 > css >

Bootstrap之样式风格与下拉菜单

2018-06-24 00:48:51来源：未知阅读 ()

背景颜色 bg-primary
字体颜色 text-primary

文字居中 text-center

按钮 btn btn-primary btn-default默认 btn-link链接
按钮大小默认md btn btn-lg/sm/xs
输入框大小 input-lg/sm/xs
状态 active/disabled
框 alert alert-primary

面板

面板框架 panel panel-primary
面板标题 panel-heading
面板主体 panel-body
面板脚步 panel-footer

<div class="panel panel-primary center">    
             <div class="panel-heading">
                 <h4 class="center">我是面板的标题</h4>
             </div>
             <div class="panel-body center">
                 <span class="text-primary center">我是面板的主体</span>
             </div>
             <!-- 
             按钮默认行内样式display:inline-block
            btn-block使其变为块级        
              -->
             <div class="btn btn-primary">我是面板的按钮</div>
             <div class="panel-footer center">我是面板的脚部</div>
         </div>

表单

form-group
form-control 使label与表单换行对齐

按钮 input button a

btn-group 按钮组将多个按钮变为一个整体

btn-group-justified 根据父容器的宽度自适应大小端点对齐(适用于a) 如果是input/button则须给各个元素加个class为btn-group的父级元素

btn-group-vertical 将横向的按钮组改为纵向

大小 btn-group-lg/sm/xs

下拉菜单

属性
data- 用于与js交互的触发器 data-toggle="dropdown"切换
aria- role- 对于特殊人群的应用
aria-haspopup 屏幕阅读器读到此处提示是否弹出下面菜单
aria-expanded是否展开状态
role 描述当前状态

<!-- 下拉菜单箭头图标caret(默认向下) 不适用于input -->
        <a class="btn btn-primary">a按钮<span class="caret"></span></a>

        <!-- 向上箭头 在父级上加上dropup -->
        <!-- 向下箭头 在父级上加上dropdown -->
        <div class="group dropup">
            <button>按钮<span class="caret"></span></button>
        </div>

在下拉菜单的列表类中添加类名dropdown-menu-right使其右浮动 -->
btn-block 与父级同宽
dropdown-header相当于label divider加上分割线

<!-- 在父级类中加上名open使下拉列表显示 -->
        <!-- class="dropdown"必须 使菜单列表向下显示 
            dropup使菜单列表向上显示
        -->

        <div class="dropdown">
        <!-- data-target=".dropdown"同时控制一个或多个的行为 -->
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
          <!-- data-toggle="dropdown"必须 -->
            Dropdown
            <span class="caret"></span>
          </button>
          <!-- 在下拉列表类中添加类名dropdown-menu-right使其右浮动 -->
          <!-- btn-block 与父级同宽 -->
          <!-- dropdown-header相当于label divider加上分割线  -->
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <!-- text-center使文字居中 -->
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="text-center">Separated link</a></li>
          </ul>
        </div>