<input id="4cgqc"></input>
  • <input id="4cgqc"></input>
  • <menu id="4cgqc"></menu>
  • <menu id="4cgqc"></menu>
  • BootStrap_03之組件(手風琴、導航)

    2016/11/18 8:37:42   閱讀:805    發布者:805

    1、BootStrap組件——按鈕組:
     .btn-group>.btn*5;
     .btn-group-justified;
     .btn-group-lg/sm/xs;
     .btn-group-vertical——豎直按鈕組;
    2、BootStrap組件——下拉菜單:
     下拉菜單必須三級結構:
      <div class="dropdown">
       <a data-toggle="dropdown">觸發元素</a>
       <ul class="dropdown-menu">
        ...
       </ul>
      </div>
    3、BootStrap組件——導航:
     ①標簽頁式導航:
      <ul class="nav nav-tabs">
       <li calss="active">
        <a data-toggle="tab"></a>
       </li>
      </ul>
     ②膠囊式導航:
      <ul class="nav nav-pills [nav-justified nav-stacked]">
       <li class="active">
        <a data-toggle="tab"></a>
       </li>
      </ul>
     ③導航條中的導航:
      <ul class="nav navbar-nav">
       <li class="active">
        <a data-toggle="tab"></a>
       </li>
      </ul>
    4、BootStrap組件——警告框:
     <div class="alert alert-danger/warning/... alert-dismissible">
      <span class="close" data-dismiss="alert">&times;</span>
      <p>...</p>
     </div>
    5、BootStrap組件——進度條:
     <div class="progress">
      <div class="progress-bar" style="width:30%"></div>
     </div>
     * 可以使用定時器修改進度條寬度,讓它動起來;
    6、BootStrap組件——列表組:
     ①使用ul>li實現:
      <ul class="list-group">
       <li class="list-group-item"></li>
      </ul>
     ②使用div>a實現:
      <div class="list-group">
       <a class="list-group-item"></a>
      </div>
    7、BootStrap組件——縮略圖:
     * 配合柵格系統使用,實現批量展示;
     <a class="thumbnail">
      <img src="">
     </a>
     <div class="thumbnail">
      <img>
      <div class="caption"></div>
     </div>
    8、BootStrap組件——面板和面板組:
     * 多個面板組實現"手風琴"組件:
      <div class="panel panel-danger/warning/.../default">
       <div class="panel-heading"></div>
       <div class="panel-body"></div>
       <div class="panel-footer"></div>
      </div>
    9、BootStrap中JS插件——折疊效果:
     <button data-toggle="collapse" data-target="#b"></buttn>
     <a data-toggle="collapse" href="#b"></a>
     ...
     <div id="b" class="collapse in"></div>
    10、BootStrap組件——響應式導航條:
     * 響應式導航條必須配合折疊效果插件使用;
     導航條分類:
      ①按顏色分:
       白底黑字——.navbar-default;
       黑底白字——.navbar-inverse;
      ②按定位方式分:
       相對定位——默認;
       固定定位——.navbar-fixed;
      ③按所在位置分:
       固定在頂部——.navbar-fixed-top;
       固定在底部——.navbar-fixed-bottom;
     實現:
      <div class="navbar navbar-default">
       <div class="container">
        <!--導航條頭部=brand+toggle-->
        <div class="navbar-header">
        ...
        </div>
        <!--導航條折疊部分=導航+鏈接+表單+按鈕...-->
        <div id="my-menu" class="collpase navbar-collpase">
        ...
        </div>
       </div>
      </div>

    欧美性开放BBW