Bootstrap之樣式風格與下拉菜單

背景顏色 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>