2.组件和插件

需知：

aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。

aria-hidden字符串。可选值为true和false,true表示元素隐藏(不可见)，false表示元素可见。

Bootstrap为这些a之类元素都绑定上了事件，而终止了链接默认行为。

toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示

1. 下拉菜单

<div class="dropdown">
     <!-- -->
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
      http://192.168.1.189
      <span class="caret"></span>         
    </button>
    
     <!--aria-labelledby用来指向哪个菜单，role="menu"告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个菜单 -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <!--头标题，不可点击 -->
          <li class="dropdown-header">
             静态页面
          </li>
 
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
            <!-- 分割线-->
          <li role="presentation" class="divider"></li>
 
          <li class="dropdown-header">
              动态页面
          </li>
 
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
             <!--不可用 -->
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>
 
    </ul>
</div>   

2.按钮式下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle " data-toggle="dropdown" >
      info
      <span class="caret"></span>         
    </button>
      
    <ul class="dropdown-menu" role="menu">
      <li>
         <a href="#">HTML</a>            
      </li>
      <li role="presentation">
         <a href="#">CSS</a>             
      </li>
  
      <li role="presentation">
         <a href="#">Javascript</a>          
      </li>
      <li role="presentation">
         <a href="#">AJAX</a>            
      </li>
    </ul>
</div> 

3.输入框组

 <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">搜索<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Google</a></li>
          <li><a href="#">百度</a></li>
          <li><a href="#">搜狗</a></li>
          <li class="divider"></li>
          <li><a href="#">人民搜索</a></li>
        </ul>
      </div>
      <input type="text" class="form-control" aria-label="...">
    </div>

4.面包式导航栏

<ol class="breadcrumb">
  <li><a href="#">前端技术</a></li>
  <li><a href="#">BootStrap </a></li>
  <li class="active">BootStrap 面包屑导航 </li>
</ol>

5.分页

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="disabled">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="pager">
    <li class="disabled"><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
  </ul>
</nav>

6.进度条

<div class="progress">
  <div class="progress-bar progress-bar-striped active" style="width: 45%">
    45%
  </div>
</div>

7.列表组

<div class="list-group">
  <a href="#" class="list-group-item active">
    回锅肉
  </a>
  <a href="#" class="list-group-item">烧烤</a>
  <a href="#" class="list-group-item">鱼香肉丝</a>
  <a href="#" class="list-group-item">麻婆豆腐</a>
  <a href="#" class="list-group-item">夫妻肺片</a>
</div>

2.插件

1.模态窗体

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 提问（点击弹出模态窗口）
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
        <div class="modal-content">
        
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">提问</h4>
          </div>
          
          <div class="modal-body">
            <p>问题描述</p>
            <textarea class="form-control"></textarea>
          </div>
          
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary" type="button">提交</button>
          </div>
          
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div>

2.鼠标悬停提示信息

<button style="margin-bottom:50px" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="提示信息">鼠标悬停</button>
 
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

3.轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2hvdzJqLmNuL2ltZy9zaXRlL3N0ZXAvMzQ5MS5wbmc)
    </div>
    <div class="item">
            ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2hvdzJqLmNuL2ltZy9zaXRlL3N0ZXAvMzQ5Mi5wbmc)
    </div>
    <div class="item">
            ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2hvdzJqLmNuL2ltZy9zaXRlL3N0ZXAvMzQ5My5wbmc)
    </div>
 
    <div class="item">
            ![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2hvdzJqLmNuL2ltZy9zaXRlL3N0ZXAvMzQ5NC5wbmc)
    </div>
 
  </div>
</div>