你的位置:首页 > 网页设计

[网页设计]BootStrap_03之组件(手风琴、导航)


1、BootStrap组件——按钮组:
 .btn-group>.btn*5;
 .btn-group-justified;
 .btn-group-lg/sm/xs;
 .btn-group-vertical——竖直按钮组;
2、BootStrap组件——下拉菜单:
 下拉菜单必须三级结构:
  <div >
   <a data-toggle="dropdown">触发元素</a>
   <ul >
    ...
   </ul>
  </div>
3、BootStrap组件——导航:
 ①标签页式导航:
  <ul >
   <li calss="active">
    <a data-toggle="tab"></a>
   </li>
  </ul>
 ②胶囊式导航:
  <ul >
   <li >
    <a data-toggle="tab"></a>
   </li>
  </ul>
 ③导航条中的导航:
  <ul >
   <li >
    <a data-toggle="tab"></a>
   </li>
  </ul>
4、BootStrap组件——警告框:
 <div >
  <span data-dismiss="alert">&times;</span>
  <p>...</p>
 </div>
5、BootStrap组件——进度条:
 <div >
  <div ></div>
 </div>
 * 可以使用定时器修改进度条宽度,让它动起来;
6、BootStrap组件——列表组:
 ①使用ul>li实现:
  <ul >
   <li ></li>
  </ul>
 ②使用div>a实现:
  <div >
   <a ></a>
  </div>
7、BootStrap组件——缩略图:
 * 配合栅格系统使用,实现批量展示;
 <a >
  <img src="">
 </a>
 <div >
  <img>
  <div ></div>
 </div>
8、BootStrap组件——面板和面板组:
 * 多个面板组实现“手风琴”组件:
  <div >
   <div ></div>
   <div ></div>
   <div ></div>
  </div>
9、BootStrap中JS插件——折叠效果:
 <button data-toggle="collapse" data-target="#b"></buttn>
 <a data-toggle="collapse" href="#b"></a>
 ...
 <div id="b" ></div>
10、BootStrap组件——响应式导航条:
 * 响应式导航条必须配合折叠效果插件使用;
 导航条分类:
  ①按颜色分:
   白底黑字——.navbar-default;
   黑底白字——.navbar-inverse;
  ②按定位方式分:
   相对定位——默认;
   固定定位——.navbar-fixed;
  ③按所在位置分:
   固定在顶部——.navbar-fixed-top;
   固定在底部——.navbar-fixed-bottom;
 实现:
  <div >
   <div >
    <!--导航条头部=brand+toggle-->
    <div >
    ...
    </div>
    <!--导航条折叠部分=导航+链接+表单+按钮...-->
    <div id="my-menu" >
    ...
    </div>
   </div>
  </div>