一. bootstrap-組件-響應(yīng)式導航條 - 最重點最難點

1. 特征

   1）在PC和平板中默認要顯示所有的內(nèi)容
   2）在手機中導航條默認只顯示logo膛壹，以及一個“菜單折疊展開按鈕”，只有點擊按鈕后才顯示所有的菜單項
   

2. bootstrap中導航條的基本結(jié)構(gòu)

   0) 基礎(chǔ)class-navbar
   
   1) 按位置區(qū)分
   
        頂部導航條和底部導航條
   
   2）按顏色區(qū)分
   
        淺色底深色的字 - navbar-default
        深色底淺色的字 - navbar-inverse
   
   3）按定位方式分
   
        靜態(tài)定位 - 默認值
        固態(tài)定位 - nav-fixed-top/bottom
   

3. html結(jié)構(gòu)

   <div class="navbar 顏色 定位">
   
      <div class="container">
          
          導航條的頭部-商標加按鈕
          <div class="navbar-header">
            <a class="navbar-brand">
            <button class="navbar-toggle">
          </div>
   
          導航條的折疊菜單
          <div class="navbar-collapse">
             
             <ul class="nav navbar-nav"></ul>
             <form class="navbar-form">
               <button class="navbar-btn"></button>
               <span class="navbar-text"></span>
               <a class="nav-link navbar-text"></a>
              </form>
          </div>
   
      </div>
   
   </div>
   

二. 插件

1. bootstrap基于JQ提供了十幾個插件函數(shù)(類似于JQueryUI插件)碍现，每個插件對應(yīng)一個js文件，可以單獨使用唬渗，也可以整體引用(bootstrap.js);

2. 調(diào)用上訴十幾個插件可以用兩種格式

   1. 傳統(tǒng)的JS方式調(diào)用

      $().dropdown() $().tab();

   2. 使用data-*擴展屬性方式調(diào)用

      <a data-toggle="dropdown">

三. 插件-標簽頁

 <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#p1">十元套餐</a></li>

    <li><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="tab-pane active fade in">十元套餐詳情 </div>

    <div id="p2" class="tab-pane fade ">二十元套餐詳情 </div>

    <div id="p3" class="tab-pane fade ">三十元套餐詳情 </div>

  </div>

四. 插件-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">&times;</span>
   
    xxxx
   

   </div>

4. 模態(tài)對話框(modal)

五. 插件-bootstrap提供的彈出框 - 模態(tài)對話框(modal)

1. 模態(tài)框定義：在父窗體中彈出一個子窗體值依，子窗體若不關(guān)閉，父窗體就無法獲得焦點窥浪，同時父子窗體之間還可以傳遞數(shù)據(jù)祖很，window.alert()/confirm()/prompt()就是典型的例子

2. 模態(tài)框必需的結(jié)構(gòu)

   <div class="modal">  半透明的黑色遮罩層
     
     <div class="modal-dialog"> 寬、定位
        
        <div class="modal-content"> 邊框背景色陰影
            
            <div class="modal-header"><h3 class="modal-title"></h3></div>
            <div class="modal-body">主體</div>
            <div class="modal-footer">尾部</div>
   
        </div>
   
     </div>
      
   </div>
   

3. 顯示一個模態(tài)框

   1） <a href="#模態(tài)框id" data-toggle="modal">
   2) <button data-toggle="modal" data-target="#模態(tài)框id">
   

4. 關(guān)閉一個模態(tài)框

    <span data-dismiss="modal">&times</span>
   

六. 插件-折疊效果(collapse)

1. 觸發(fā)一個折疊效果

    1）<a href="#折疊元素id" data-toggle="collapse">
   
    2) <button data-toggle="collapse" data-target="#折疊元素id">
   

2. 折疊元素

   <div id="折疊元素id" class="collapse in">
   
   </div> 
   

3. 折疊組件的兩個擴展用途

   1. 響應(yīng)式導航條在手機屏幕中的效果
   2. according(手風琴)