Bootstrap学习笔记（四）插件

小知识点：

盲人、智力低下、行动障碍等H5标签中有两类属性与“无障碍阅读”相关：

 (1)<ANY  role="">       <b role="button"></b>       VDA

 (2)<ANY  aria-*="">

 

1、插件——概述

  Bootstrap基于jQuery提供了十几个插件函数（类似于jQueryUI插件库），每个插件对应一个.js文件，可以单独引用，也可以整体引用(bootstrap.js)。

  调用上述十几个插件可以用两种格式：

  (1)传统的JS方式调用：  $(...).dropdown();   $().tab(...);

  (2)使用data-*扩展属性方式调用：  <a  data-toggle="dropdown">   主

 

 

2、插件——下拉菜单

  (1)$().dropdown( );

  (2)<a data-toggle="dropdown">

 

<div style="position: relative">
<a data-toggle="dropdown" href="#">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a href="#">TV</a></li>
  <li><a href="#">Camera</a></li>
  <li><a href="#">Computer</a></li>
  <li class="divider"></li>
  <li><a href="#">MilkPowder</a></li>
  <li><a href="#">BabyClothes</a></li>
</ul>
</div>

 

 

3、插件——标签页(tab)

  (1) $().tab();

  (2) <a data-toggle="tab">

<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#p1">十元套餐</a></li>
  <li class="active"><a data-toggle="tab" href="#p2">二十元套餐</a></li>
  <li><a data-toggle="tab" href="#p3">三十元套餐</a></li>
</ul>

<div class="tab-content">
  <div id="p1" class="fade tab-pane">十元套餐详情：</div>
  <div id="p2" class="fade in tab-pane active">二十元套餐详情：</div>
  <div id="p3" class="fade tab-pane">三十元套餐详情：</div>
</div>

 

 

4、插件——Bootstrap提供的弹出框

  (1)工具提示框(tooltip)    data-toggle="tooltip"

  (2)弹出框(popover) data-toggle="popover"

  (3)警告框(alert) —— 小重点

<div class="alert  alert-四种颜色 alert-dismissible">

<span class="close" data-dismiss="alert">×</span>

xxxx

</div>

 

例：

<div class="alert alert-danger alert-dismissible fade in">   <!--alert-dismissible提示该警告框组件为可关闭的   fade in    透明-->

 

    <span class="close" data-dismiss="alert">×</span>

    <p>

      <span class="glyphicon glyphicon-