Bootstrap學(xué)習(xí)筆記之js組件（4）

更新時(shí)間：2016年06月12日 08:36:27 作者：向婷風(fēng)

這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之js組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

這次我們來(lái)看下js組件的使用，本篇文章會(huì)有點(diǎn)長(zhǎng)，希望大家可以耐心看，相信收獲會(huì)有不少。不少園友加我好友，表示喜歡我寫(xiě)文字的風(fēng)格，簡(jiǎn)單明了，這里，再次謝謝你們的支持。一方面，自身技術(shù)有限，寫(xiě)的東西都比較基礎(chǔ)，另一方面，寫(xiě)的東西，都是根據(jù)自己的理解，把復(fù)雜的東西用最簡(jiǎn)單的語(yǔ)言表達(dá)出來(lái)。所以，寫(xiě)的有不對(duì)的地方，麻煩各位給予指正哈。

一、js文件引用
注意點(diǎn)：jquery必須在在其它js文件之前引入，因?yàn)槠渌寮际且蕾囉趈query。

 <!--<script src="js/jquery-1.11.3.min.js"></script> 本地引入的加載文件-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> --必須在bootstrp.min.js之前引入
<script src="js/bootstrap.min.js"></script>

二、data屬性
作用：通過(guò)data屬性，可使用任何的bootstrap插件，無(wú)須寫(xiě)任何一段js代碼。前面講過(guò)的像：data-toggle="dropdown"等引用菜單插件。
那么既然有打開(kāi)功能，如何關(guān)閉功能呢？在javascript里面添加下面代碼即可：

<script type="text/javascript">
 $(document).off('.data-api'); 
</script>

如果要關(guān)閉某一個(gè)特定的插件的功能，添加下面代碼即可：

<script type="text/javascript">
 // 關(guān)閉提示框的插件功能
 $(document).off('.alert.data-api'); 
 </script>

所有的js插件基本都是下面幾步：
1：如何使用？---類對(duì)應(yīng)如何寫(xiě)？
2：如何調(diào)用？---類寫(xiě)好了，如何使其寫(xiě)的類生效？
3：事件處理---包括動(dòng)作觸發(fā)前發(fā)生以及動(dòng)作出發(fā)后發(fā)生
注意：所有動(dòng)作觸發(fā)之前發(fā)生的，bootstrap提供了preventDefault,實(shí)現(xiàn)在動(dòng)作執(zhí)行之前將其停止。代碼如下：

 $('#myModal').on('show.bs.modal', function (e) {
 if (!data) return e.preventDefault()

 // 阻止模態(tài)框的展示，當(dāng)然你也可換成阻止其它插件的出現(xiàn)
})

注意：bootstrap沒(méi)有對(duì)禁用javascript的瀏覽器采取補(bǔ)救措施，因此，我們需要自己寫(xiě)一段代碼補(bǔ)救，相信大家都知道。
<noscript> 你的瀏覽器不支持javascript，請(qǐng)下載最新的瀏覽器 </noscript>
三、模態(tài)框組件（modal.js）
注意點(diǎn)：
1：不支持同時(shí)打開(kāi)多個(gè)模態(tài)框
2：模態(tài)框盡量位于body子元素的位置，避免其它組件影響模態(tài)框的展現(xiàn)和功能
3：移動(dòng)端說(shuō)明
4：增強(qiáng)可訪問(wèn)性--添加role屬性
5：在模態(tài)框中可嵌入視屏，即data-toggle="modal"
我們來(lái)看下下面的列子，點(diǎn)擊button，會(huì)彈出一個(gè)模態(tài)框，關(guān)于這里的屬性，如果看過(guò)之前的文章，相信理解起來(lái)不難，這里不再詳解，可自行貼碼測(cè)試：

<!DOCTYPE html> 
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>
<body>
 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-lg">
 彈出大模態(tài)框
 </button>
<div class="modal fade bs-example-modal-lg" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <div class="modal-dialog modal-lg">--大的模態(tài)框
 <div class="modal-content">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="close">
  <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="modal-title">Modal title</h4>
 </div>
 <div class="modal-body">
  <p>one fine body &hellip;</p>
 </div>
 <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
  <button type="button" class="btn btn-primary">save changes</button>
 </div>
 </div> 
 </div>
</div><!-- 改變模態(tài)框的大小添加類modal-sm即可 --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-sm">
 彈出小模態(tài)框
 </button>
<div class="modal fade bs-example-modal-sm" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <div class="modal-dialog modal-sm"> ---小模態(tài)框
 <div class="modal-content">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="close">
  <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="modal-title">Modal title</h4>
 </div>
 <div class="modal-body">
  <p>one fine body &hellip;</p>
 </div>
 <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
  <button type="button" class="btn btn-primary">save changes</button>
 </div>
 </div> 
 </div>
</div>
<!-- 禁止動(dòng)畫(huà)效果，刪掉fade即可 -->

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
 $("#mymodal").modal("show"); ---調(diào)用這句代碼才能使插件生效
 </script>
</body>
</html>

實(shí)現(xiàn)效果如下：

結(jié)合模態(tài)框，你也可以給body內(nèi)容增加其它功能，比如嵌入表單的輸入框等，這里不再貼碼。
模態(tài)框的事件，在javascript中添加下面的代碼即可，如下所示：

復(fù)制代碼代碼如下:

我們來(lái)看看模態(tài)框如何嵌入視屏，自己需要添加一些代碼，自動(dòng)播放，停止等功能。先來(lái)看看代碼

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://v.youku.com/v_show/id_XMTU2ODMyMDUyMA==.html" >VIDEO</a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-body">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <div>
 <iframe width="100%" height="350" src=""></iframe>
 </div>
 </div>
 </div>
 </div>
</div>
<!-- <script src="js/jquery-1.11.3.min.js"></script> 本地的加載文件-->
 <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
 //視屏函數(shù)
 function autoPlayModal(){
 var trigger = $("body").find('[data-toggle="modal"]');
 trigger.click(function() {
 var theModal = $(this).data( "target" );
 var videoSRC = $(this).attr( "data-theVideo" );
 var videoSRCauto = videoSRC+"?autoplay=1" ;
 $(theModal+' iframe').attr('src', videoSRCauto);
 $(theModal+' button.close').click(function () {
 $(theModal+' iframe').attr('src', videoSRC);
 }); 
 });
}
//調(diào)用該函數(shù)
$(document).ready(function(){
 autoPlayModal();
}); 
</script>
<noscript>不支持javascript瀏覽器</noscript>

效果不再截圖，上面的src引入的是優(yōu)酷的地址。

四、滾動(dòng)監(jiān)聽(tīng)組件
以導(dǎo)航條舉列，即根據(jù)滾動(dòng)的位置來(lái)自動(dòng)切換標(biāo)簽頁(yè)。我們來(lái)看下代碼。
1：保證出現(xiàn)滾動(dòng)條。

2：通常給body加data-spy，即使用data-spy="scroll" 

<body data-spy="scroll" data-target=".navbar" data-offset="70">
 <div class="container" id="myScrollspy">
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container-fluid">
  <div class="collapse navbar-collapse js-navbar-scrollyspy" id="navbar-scroll">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#home">home</a></li>
   <li><a href="#message">message</a></li>
   <li><a href="#about">about</a></li>
   <li class="dropdown">
   <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜單<b class="caret"></b></a>
   <ul class="dropdown-menu">
   <li><a href="#one">one</a>
   <li><a href="#two">two</a>
   <li><a href="#three">three</a>
   </ul>
   </li>
  
  </ul>

  </div>
 </div>

 </nav>
 <!-- 展示的內(nèi)容 -->
 <h1 id="home">home</h1>
 <p>111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 </p>
 <hr>
 <h1 id="message">message</h1>
 <p>111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 </p>
 <hr>
 <h1 id="about">about</h1>
 <p>111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 </p>
 <hr>
 <h1 id="one">one</h1>
 <p>111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 </p>
 <h1 id="two">two</h1>
 <p>111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 </p>
 <h1 id="three">three</h1>
 <p>111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 111111111111111111111111111111111111111111111111111111
 </p>


 </div>

<!-- 理解data-offset的意思 -->

理解data-offset的意思：即當(dāng)滾動(dòng)位置時(shí)，距離頂部的偏移量。其次它的事件處理，與模態(tài)框的用法類似，不再講解。
效果如下：

五、提示框組件
注意：
1：使用data-toggle="tooltip"
2：data-placement表示提示框的方向，共有四個(gè)方向，left,right,bottom,top
3：data-animation是將其動(dòng)畫(huà)效果設(shè)為false,即鼠標(biāo)移過(guò)去后，由原來(lái)的漸入漸出變?yōu)樗查g出現(xiàn)，沒(méi)有緩沖效果。

<div class="container">
 <p class="muted"> <!-- 緩和 -->
 this is a test title,<a href="#" id="clickEvent" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="cnblog.com/jtjds" data-animation="false">click me,remember
 </p>
</div>

 <!-- <script src="js/jquery-1.11.3.min.js"></script> 本地的加載文件-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
 
 $('[data-toggle="tooltip"]').tooltip();//初始化
 $('#clickEvent').tooltip('show') //打開(kāi)就直接顯示
 $('#clickEvent').on('shown.bs.tooltip', function () {
 alert("2222"); //事件處理，顯示后將彈出此項(xiàng)
})
 </script>

六、彈出框組件
注意：
1：彈出框即為任意元素添加一小塊懸浮層，存放非主要信息。
2：當(dāng)內(nèi)容長(zhǎng)度為0時(shí)，不顯示彈出框。使用data-toggle="popover"
3：依賴于提示框插件，且需手動(dòng)初始化（見(jiàn)javascript里的初始化）
看下下面這段代碼，不再截圖：

復(fù)制代碼代碼如下:

<!--  點(diǎn)擊按鈕實(shí)現(xiàn)彈出，再點(diǎn)擊按鈕實(shí)現(xiàn)隱藏-->

<button  type="button"  class="btn btn-primary"  data-toggle="popover"  title="標(biāo)題" data-content="and  here  is  some  amazing  content,it's  very  engaging,right?">點(diǎn)我彈出/隱藏彈出框</button> 

點(diǎn)擊button時(shí)，出現(xiàn)，再點(diǎn)擊button，消失，如果想在空白處點(diǎn)擊便可將其隱藏怎么辦？
添加data-trigger="focus"即可，隱藏焦點(diǎn)，trigger表示觸發(fā)的意思。

復(fù)制代碼代碼如下:

<!-- 點(diǎn)擊按鈕彈出，點(diǎn)擊任一點(diǎn)空白處隱藏 ，最好使用a標(biāo)簽，當(dāng)然你也可以使用button-->

<a   tabindex="0" id="myPopover" class="btn  btn-lg  btn-danger"  role="button"  data-toggle="popover"  

data-trigger="focus"  title="Dismissible  popover"  data-content="and  this  is  a  beautiful  content">點(diǎn)我可消失</a> 

七、警告框組件
注意：
1：使用data-dismiss="alert"
2：次插件可為警告信息添加點(diǎn)擊并消失的功能
3：使用關(guān)閉按鈕時(shí)，即close類時(shí)，它必須是alert的第一個(gè)子元素，且在它之前不許出現(xiàn)文本。
我們來(lái)看下代碼：

<!-- 警告框 -->
<div class="alert alert-info fade in" id="myalert">
 <button type="button" class="close" data-dismiss="alert" aria-label="close">
 <span aria-hidden="true">&times;</span>
 </button>
 <span>歡迎你</span>
 <button type="button" class="btn btn-primary">詳情</button>
</div>

<div class="alert alert-info fade in" id="myalert1">
 <button type="button" class="close" data-dismiss="alert" aria-label="close">
 <span aria-hidden="true">&times;</span>
 </button>
 <span>歡迎你</span>
 <button type="button" class="btn btn-primary">詳情</button>
</div>

如果在javascript中存在多個(gè)警告框，并且你想將某個(gè)警告框關(guān)閉時(shí)，在javascript里添加下面代碼即可，如下：

 $("#myalert").alert('close') //第一個(gè)警告框備關(guān)閉了，或者將#myalert換成#myalert1時(shí)，第二個(gè)警告框?qū)㈥P(guān)閉
$('#myalert1').on('closed.bs.alert', function () {
 alert("close"); --當(dāng)點(diǎn)擊關(guān)閉按鈕后，執(zhí)行alert事件
})

八、按鈕組件
注意：
1：切換按鈕的狀態(tài)（禁用還是打開(kāi)的）--這個(gè)用到autocomplete="off"來(lái)實(shí)現(xiàn)
2：將多個(gè)按鈕形成工具條等
3：通過(guò)設(shè)置data-loading-text="loading....."來(lái)設(shè)置加載的狀態(tài)

<!-- 按鈕 -->
<button type="button" id="myButton" data-loading-text="loading...." class="btn btn-primary" autocomplete="off" >loading state
</button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">single toggle
</button>
<!-- button組 -->
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary active">
 <input type="checkbox" autocomplete="off" checked>home
 </label>
 <label class="btn btn-primary ">
 <input type="checkbox" autocomplete="off" >message
 </label>
 <label class="btn btn-primary ">
 <input type="checkbox" autocomplete="off" >profile
 </label>
</div>

如果希望在點(diǎn)擊button后，更改其內(nèi)容，添加data-complete-text=“xxxx”即可，同時(shí)添加javascript代碼如下：

復(fù)制代碼代碼如下:

<!-- 點(diǎn)擊觸發(fā)后，將內(nèi)容進(jìn)行更改data-complete-text表示為完成后的內(nèi)容 -->

<button  type="button"   class="btn btn-primary  mybtn"  data-complete-text="finish"  autocomplete="off">點(diǎn)擊后內(nèi)容自動(dòng)更改</button><script>   $('.mybtn').on('click', function () {        $(this).button('complete') // 內(nèi)容將變?yōu)閒inish    })</script>

設(shè)置點(diǎn)擊button切換狀態(tài)，并設(shè)置切換狀態(tài)時(shí)的時(shí)間，可在javascript里面添加如下代碼：

<script> $('#myButton').on('click', function (e) {
 var btn = $(this).button('loading');
 setTimeout(function(e){
  btn.button('reset');//設(shè)置恢復(fù)原始狀態(tài)
 },3000)
 
 })</script>

九、折疊框組件
注意：使用data-toggle="collapse" 看下代碼：

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href</a>

<div class="collapse" id="collapseExample">
 <div class="well">
 hello ,this is test!
 </div>
</div>

另外可結(jié)合面板組來(lái)進(jìn)行使用，如下所示：

 <!-- 面板組 -->
 <div class="panel-group" id="mypanel" role="tablist">  <!-- 第一個(gè)面板 -->
  <div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingone">
   <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#mypanel" href="#collapseone"    class="btn btn-primary">home</a>
   </h4>
  </div>
  <!-- 內(nèi)容-->
  <div id="collapseone" class="panel-collapse collapse in" role="tabpanel">
   <div class="panel-body">
    關(guān)于我
    你好啊
    碎碎念
   </div>
  </div>
  </div>  <!-- 第二個(gè)面板 -->
 </div>

通過(guò)點(diǎn)擊home來(lái)控制內(nèi)容部分，是設(shè)置它的href="#collapseone"即內(nèi)容所對(duì)應(yīng)的id。
關(guān)于事件，跟前面使用的類似，這些組件，進(jìn)行的時(shí)間用法都類似，如下

<script type="text/javascript">
 $('#mypanel').on('hidden.bs.collapse', function () {
 alert("2222");
}) </script>

十、carsousel滑動(dòng)組件
注意：使用data-ride="carousel" ,比如像我們通常制作的輪播圖等。先看下我制作的輪播圖代碼：

<div class="container" id="myContainer"> ---注意data-target的目標(biāo)
 <div id="carousel1" class="carousel slide" data-ride="carousel" >
  <ol class="carousel-indicators"> --indicators表示滑動(dòng)指示，即從哪一張滑到哪一張
   <li data-target="#carousel1" data-slide-to="0" class="active"></li>--從第一張開(kāi)始滑動(dòng)
   <li data-target="#carousel1" data-slide-to="1"></li>
   <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>
  <!-- 呈現(xiàn)內(nèi)容 -->
  <div class="carousel-inner" role="listbox">
   <div class="item active">
   <img src="bg.jpeg" style="width:600px;height:600px;">
   <div class="carousel-caption"> --carousel-caption承載添加的文字等
    <h3>綠色陽(yáng)光</h3>
    <p>陽(yáng)光心情，你我同行</p>
   </div>
   </div>
   <div class="item ">
   <img src="timg.jpg" style="width:600px;height: 600px;">
   </div>
   <div class="item ">
   <img src="xx.jpg" style="width:600px;height: 600px;">
   </div>
  </div>
  
  <!-- 左右兩個(gè)標(biāo)簽-->
  <a class="left carousel-control" href="#carousel1" role="button" data-slide="pre">

   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
   <span class="sr-only">previous</span>
  </a>
  <a class="right carousel-control" href="#carousel1" role="button" data-slide="next">

   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
   <span class="sr-only">next</span>
  </a>


 </div>
</div>

效果如下：

關(guān)于滑動(dòng)的快慢，你可以直接在div中添加data-interval="2000" 設(shè)置2秒切換，但這種方法出現(xiàn)問(wèn)題就是
當(dāng)你刷新瀏覽器的時(shí)候，必須手動(dòng)的去點(diǎn)一下左右按鈕，然后才能實(shí)現(xiàn)切換，最好的辦法是在javascript里進(jìn)行設(shè)置。如下代碼所示

 <script type="text/javascript">
 $(".carousel").carousel({
 interval:2000;
 })
 </script>

十一、Affix組件
注意：使用position:fixed進(jìn)行定位，利用data-spy="affix" 結(jié)合data-offset來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)，當(dāng)發(fā)生某一事件時(shí)，進(jìn)行偏移。貼碼看下列子：

<div class="container">
 <!-- 柵格系統(tǒng)進(jìn)行布局 -->
 <div class="col-md-3">
  <ul class="list-group affixed-element-top js-affixed-element-top">
  <li class="list-group-item">1111111111</li>
  <li class="list-group-item">222222222</li>
  <li class="list-group-item">3333333333333</li>
  <li class="list-group-item">44444444444</li>
  <li class="list-group-item">555555555</li>
  <li class="list-group-item">6666666666</li>
  <li class="list-group-item">777777777777</li>
  </ul>
 </div>
 <div class="js-content col-md-6">
  <p>1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  </p>
  <p>1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  </p>
  <p>1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  </p>
  <p>1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  </p>
  <p>1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  </p>
  <p>1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  </p>
  <p>1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  1111111111111111111111111111111111111111111111
  </p>

 </div>
 <div class="col-md-3 " >
  <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
  <li class="list-group-item">1111111111</li>
  <li class="list-group-item">222222222</li>
  <li class="list-group-item">3333333333333</li>
  <li class="list-group-item">44444444444</li>
  <li class="list-group-item">555555555</li>
  <li class="list-group-item">6666666666</li>
  <li class="list-group-item">777777777777</li>
  </ul> 
 </div>
</div>

 <!-- <script src="js/jquery-1.11.3.min.js"></script> 本地的加載文件-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
 $('.js-affixed-element-top').affix({
 offset:{ }
})
 $('.js-affixed-element-bottom').affix({
 offset:{bottom:200 }---當(dāng)鼠標(biāo)滾到最下面時(shí)，該div會(huì)自動(dòng)偏移到距離底部200px的地方
})
 </script>

js組件差不多到此結(jié)束，學(xué)習(xí)bootstrap這個(gè)框架也差不多結(jié)束了，下一篇終結(jié)篇，打算自己專門用bootstrap設(shè)計(jì)一個(gè)頁(yè)面制作出來(lái)，跟大家分享。如果你也正在學(xué)習(xí)bootstrap框架，歡迎交流學(xué)習(xí)哈！

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: