BootStrap_03之组件（手风琴、导航）

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>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有