Bootstrap--組件

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">

 

 

3.插件——標籤頁(tab)

  (1) $().tab();

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

 

 

 

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">&times;</span>

xxxx

</div>

  (4)模態對話框(modal)          —— 小重點

模態框定義：在父窗體中彈出一個子窗體，子窗體若不關閉，父窗體就沒法得到焦點，同時父子窗體間還能夠傳遞數據。window.alert()/confirm()/prompt()就是典型例子。模態框必需的結構：

<div class="modal">                        <!--半透明的黑色遮罩層-->

  <div class="modal-dialog">            <!--寬/定位-->

    <div class="modal-content">       <!--邊框/背景色/陰影-->

      <div class="modal-header">頭部</div>

      <div class="modal-body">主體</div>

      <div class="modal-footer">尾部</div>

    </div>

  </div>

</div>

顯示一個模態框：

1) <a href="#模態框ID" data-toggle="modal">

2) <button data-toggle="modal" data-target="#模態框ID">

 

 

5.插件——摺疊效果(collapse)

  觸發一個摺疊效果：

1) <a href="#摺疊元素ID" data-toggle="collapse">

2) <button data-toggle="collapse" data-target="#摺疊元素ID">

  ------------------------------------------------------------------------------

  <div id="摺疊元素ID" class="collapse in">

  </div>

 

  摺疊組件的兩個擴展用途：

  (1)Accordion（手風琴）

  (2)響應式導航條在手機屏幕中的效果

 

 

6.插件——輪播廣告(carousel)——小重點

  自己結構較複雜，編寫時只須要記住根class:  .carousel

  <div class="carousel">

<div class="carousel-inner">

<div class="item active">

<img>

</div>

</div>

  </div>

 

 

7.插件——附加導航（Affix）

<div data-spy="affix" data-offset-top="100">

<ul class="nav nav-pills">

</div>

 

 

9.插件——滾動監聽（scrollspy）——瞭解

  隨着頁面內容的滾動，某個導航中的項目，會自動的更改.active位置。

  實現思路：

(1)頁面中必須首先有一個導航菜單(.nav)——其中能夠定義一個菜單項爲.active

(2)導航菜單中的超連接的href屬性值必須和頁面中的某個錨點名同樣

(3)爲頁面添加滾動事件的監聽函數

body.onscroll= function(){

if(body滾動的距離 === 某個錨點距離頂端的距離){

此錨點對應的超連接的父元素li添加.active；

}

}