上兩篇只講了組件如何使用，基本沒有說js，這篇博客要結合js來講講
主要講解一下幾個組件
1.模態框
2.滾動監聽
3.標籤頁
4.工具提示
5.彈出框
6.按鈕
7.堆疊
8.輪換頁
9.側邊欄
首先導入css和js
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="js/jquery-3.1.0.min.js"></script><script src="js/bootstrap.min.js"></script>
1.模態框
我們通常在登錄註冊，或者閱讀某些條例時都是用這個模態框，所以模態框是非常常見的
首先寫一個打開模態框的按鈕
<!--data-target是我們的模態框的id，data-whatever="@ime"是我們傳入模態框的標籤和值--><button type="button" data-toggle="modal" data-target="#myModal" data-whatever="@ime"> 打開模態框</button>
然後寫模態框
<div id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true"> <!--這是小模態框，將modal-sm換成modal-lg是大模態框--> <div> <div> <!--模態框頭部--> <div> <!--右上角的關閉按鈕--> <button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <!--標題--> <div>Modal title</div> </div> <!--模態框內容--> <div> <!--模態框內容可以是文字或表格--> <!--<p>hello</p>--> <form> <div> <label>username</label> <input type="text"> </div> <div> <label>password</label> <input type="password"> </div> </form> </div> <!--模態框腳部--> <div> <button type="button" data-dismiss="modal"> Close </button> <button type="button"> 保存</button> </div> </div> </div></div>
如果是點擊按鈕然後向模態框的表格傳入參數的話
在按鈕的屬性要加data-標籤：值
以上面data-whatever=”@ime”為例加了一個標籤為whatever，值為@ime的參數
下面是js操作
// 綁定模態框展示的方法$("#myModal").on("show.bs.modal",function(e){// 獲得點擊打開的按鈕var button=$(e.relatedTarget)// 根據標籤獲得按鈕傳入的參數var recipient=button.data("whatever")// 獲得模態框本身var modal=$(this)// 更改將title的text modal.find(".modal-title").text("Hello"+recipient);// 更改body裡input的值modal.find(".modal-body input").val(recipient) })2.滾動監聽
滑動到不同內容，標籤頁選中會變化
首先寫body屬性
<!--offset設為70，這個值是經過測試最佳的值-->
<body data-spy="scroll" data-target=".navbar" data-offset="70">
然後寫標籤頁
<!--標籤欄固定的顯示內容的頂部--> <nav role="navigation"> <div> <div id="myScrollspy"> <ul> <!--a標籤中的連接是下面標題的id--> <li><a href="#iwen">iwen</a> </li> <li><a href="#ime">ime</a> </li> <!--在標籤頁中嵌套下拉菜單--> <li> <a href="#" data-toggle="dropdown"> 下拉菜單<span></span> </a> <ul role="menu"> <li><a href="#one" tabindex="-1">one</a> </li> <li><a href="#two" tabindex="-1">two</a> </li> <li><a href="#three" tabindex="-1">three</a> </li> </ul> </li> </ul> </div> </div> </nav>
然後寫內容
<h2 id="iwen">@iwen</h2><p>這是一個人這是一個人</p><h2 id="ime">@ime</h2><p>這是一個人這是一個人</p><h2 id="one">@one</h2><p>這是一個人這是一個人</p><h2 id="two">@two</h2><p>這是一個人這是一個人</p><h2 id="three">@three</h2><p>這是一個人這是一個人</p>
建議把內容寫得長一點，這樣效果才會更加明顯，這裡演示不方便寫太多無用的文字
還可以寫一些js的方法
// 綁定標籤切換時的方法$("#myScrollspy").on("activate.bs.scrollspy",function(e){ alert("hello"); })3.標籤頁
點擊不同的標籤可以顯示不同的內容
首先寫標籤欄
<ul id="myTab"> <!--a標籤鏈接對應下面tab-pane的id--> <li ><a href="#home" data-toggle="tab">Home</a> </li> <li><a href="#profile" data-toggle="tab">Profile</a> </li> <li> <a href="#" id="myTabdrop1" data-toggle="dropdown"> 下拉菜單<span></span> </a> <ul role="menu"> <!--與普通下拉菜單不同，要加data-toggle="tab"--> <li><a href="#one" tabindex="-1" data-toggle="tab">one</a> </li> <li><a href="#two" tabindex="-1" data-toggle="tab">two</a> </li> </ul> </li> </ul>
然後寫不同標籤的內容
<div id="myTabContent"> <div id="home"> <p>home</p> <div id="profile"> <p>profile</p> <div id="one"> <p>one</p> <div id="two"> <p>two</p>
可以用js初始化顯示的標籤頁
有下面幾種選擇標籤頁的方式
$('#myTabs a[href="#profile"]').tab('show') // 根據名字選擇$('#myTabs a:first').tab('show') // 選擇第一個標籤頁$('#myTabs a:last').tab('show') // 選擇最後一個標籤頁$('#myTabs li:eq(2) a').tab('show') // 選擇第三個標籤頁（因為0是第一個），如果是下拉菜單裡的標籤頁，數字要加14.工具提示
<p> <!--若title內容為空則顯示data-original-title的內容，placement為顯示的位置，可設為top|bottom|left|right--> <!--參數可以以data-****的方式設置--> 歡迎來到<a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="www.jk.com">jack's page</a> </p>
然後要用js初始化，否則會沒有任何效果
//初始化tooltip，指向則顯示
$('[data-toggle="tooltip"]').tooltip();
5.彈出框
彈出框類似工具提示，但顯示的內容比工具提示更加豐富，也比它常用
<!--data-trigger="foucus"點擊空白可消失，不加的話點擊按鈕消失，設為hover的話鼠標移動的按鈕顯示，移開消失--> <!--這個彈出框標題為title，內容為content--> <button type="button" data-trigger="foucus" data-placement="bottom" data-toggle="popover" data-content="content"> 彈出框</button>
然後要用js初始化
// 初始化popover
$(".js-popover").popover();
6.按鈕
前2篇講的是按鈕的基本樣式，這次是進階使用，可以讓按鈕在加載時顯示不同的文字
<!--可以設置按鈕在loading時的文字--> <button type="button" data-loading-text="Loding for 3s"> Loading Status </button>
然後要用js綁定點擊事件
// 綁定按鈕的點擊事件$(".js-loading-btn").on("click", function (e) {// 點擊後設為loading狀態，顯示loading的文字var btn = $(this).button("loading");// 3s後恢復setTimeout(function (e) { btn.button("reset") }, 3000) })7.堆疊
堆疊效果可以節省大量的屏幕控件，非常實用
這是點擊按鈕打開堆疊的
<!--href為顯示內容的id--> <a data-toggle="collapse" href="#collapseExample">點擊查看</a> <div id="collapseExample"> <div> Hello </div> </div>
這是面板組的堆疊
<div id="accordion" role="tablist"> <div> <div role="tab" id="headingOne"> <!--顯示的標題--> <h4> <!--data-parent要是panel-group的id--> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a> </h4> </div> <!--加了in表示打開，不加表示隱藏--> <div id="collapseOne" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingTwo"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a> </h4> </div> <div id="collapseTwo" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> <div> <div role="tab" id="headingThree"> <h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a> </h4> </div> <div id="collapseThree" role="tabpanel"> <div> Hello<br> Hello<br> Hello<br> </div> </div> </div> </div>
8.輪換頁
我們經常可以在網站的主頁可以看到
<div id="carousel-example-generic"> <!--這是下面那三個白色圓indicator--> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!--輪換頁的內容--> <div> <div> <img src="images/4.jpg"> <!--添加文字--> <div> <h3>U3D</h3> <p>新版本升級</p> </div> </div> <div> <img src="images/2.jpg"> <div> <h3>U3D</h3> <p>新品上線</p> </div> </div> <div> <img src="images/3.jpg"> <div> <h3>Apple</h3> <p>Apple手錶</p> </div> </div> </div> <!--輪換頁左邊和右邊的箭頭--> <a href="#carousel-example-generic" data-slide="prew"> <span></span> </a> <a href="#carousel-example-generic" data-slide="next"> <span></span> </a> </div>
可以用js設置間隔和自動開始
//設置間隔為2s且自動輪播$(".carousel").carousel({ interval:2000 })9.側邊欄
側邊欄的主要內容是一個列表
<!--要設置寬度，在手機屏幕上隱藏--> <div> <ul> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> <a href="#">hello</a> </ul> </div>
再寫style
<style> .affixed-element-top.affix{ /*如果想在底部的話可以改為bottom:10px;*/ top:10px; } .affixed-element-top.affix-bottom{ position: relative; } </style>還要加一些js
$(".js-affixed-element-top").affix({ offset:{ } })Boostrap的基本用法就這樣，掌握後就可以做出很好的網頁了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。