功能強(qiáng)大的Bootstrap組件（結(jié)合js）
更新時(shí)間：2016年08月03日 09:41:39 作者：qq_32198277
這篇文章主要介紹了功能強(qiáng)大的Bootstrap組件，介紹js結(jié)合Bootstrap組件的使用方法，感興趣的小伙伴們可以參考一下
上兩篇只講了組件如何使用，基本沒(méi)有說(shuō)js，這篇博客要結(jié)合js來(lái)講講
主要講解一下幾個(gè)組件
1.模態(tài)框
2.滾動(dòng)監(jiān)聽(tīng)
3.標(biāo)簽頁(yè)
4.工具提示
5.彈出框
6.按鈕
7.堆疊
8.輪換頁(yè)
9.側(cè)邊欄
首先導(dǎo)入css和js
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" > <script src="js/jquery-3.1.0.min.js"></script> <script src="js/bootstrap.min.js"></script>
1.模態(tài)框
我們通常在登錄注冊(cè)，或者閱讀某些條例時(shí)都是用這個(gè)模態(tài)框，所以模態(tài)框是非常常見(jiàn)的
首先寫(xiě)一個(gè)打開(kāi)模態(tài)框的按鈕
<!--data-target是我們的模態(tài)框的id，data-whatever="@ime"是我們傳入模態(tài)框的標(biāo)簽和值--> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime"> 打開(kāi)模態(tài)框 </button>
然后寫(xiě)模態(tài)框
<div class="modal " id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true">
<!--這是小模態(tài)框，將modal-sm換成modal-lg是大模態(tài)框-->
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!--模態(tài)框頭部-->
<div class="modal-header">
<!--右上角的關(guān)閉按鈕-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!--標(biāo)題-->
<div class="modal-title">Modal title</div>
</div>
<!--模態(tài)框內(nèi)容-->
<div class="modal-body">
<!--模態(tài)框內(nèi)容可以是文字或表格-->
<!--<p>hello</p>-->
<form>
<div class="form-group">
<label class="control-label">username</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">password</label>
<input class="form-control" type="password">
</div>
</form>
</div>
<!--模態(tài)框腳部-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
保存
</button>
</div>
</div>
</div>
</div>
如果是點(diǎn)擊按鈕然后向模態(tài)框的表格傳入?yún)?shù)的話(huà)
在按鈕的屬性要加data-標(biāo)簽：值
以上面data-whatever=”@ime”為例加了一個(gè)標(biāo)簽為whatever，值為@ime的參數(shù)
下面是js操作
// 綁定模態(tài)框展示的方法
$("#myModal").on("show.bs.modal",function(e){
// 獲得點(diǎn)擊打開(kāi)的按鈕
var button=$(e.relatedTarget)
// 根據(jù)標(biāo)簽獲得按鈕傳入的參數(shù)
var recipient=button.data("whatever")
// 獲得模態(tài)框本身
var modal=$(this)
// 更改將title的text
modal.find(".modal-title").text("Hello"+recipient);
// 更改body里input的值
modal.find(".modal-body input").val(recipient)
})
2.滾動(dòng)監(jiān)聽(tīng)
滑動(dòng)到不同內(nèi)容，標(biāo)簽頁(yè)選中會(huì)變化
首先寫(xiě)body屬性
<!--offset設(shè)為70，這個(gè)值是經(jīng)過(guò)測(cè)試最佳的值-->
<body data-spy="scroll" data-target=".navbar" data-offset="70">
然后寫(xiě)標(biāo)簽頁(yè)
<!--標(biāo)簽欄固定的顯示內(nèi)容的頂部-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
<ul class="nav navbar-nav">
<!--a標(biāo)簽中的連接是下面標(biāo)題的id-->
<li><a href="#iwen">iwen</a> </li>
<li><a href="#ime">ime</a> </li>
<!--在標(biāo)簽頁(yè)中嵌套下拉菜單-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</a>
<ul class="dropdown-menu" 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>
然后寫(xiě)內(nèi)容
<h2 id="iwen">@iwen</h2> <p>這是一個(gè)人 這是一個(gè)人</p> <h2 id="ime">@ime</h2> <p>這是一個(gè)人 這是一個(gè)人</p> <h2 id="one">@one</h2> <p>這是一個(gè)人 這是一個(gè)人</p> <h2 id="two">@two</h2> <p>這是一個(gè)人 這是一個(gè)人</p> <h2 id="three">@three</h2> <p>這是一個(gè)人 這是一個(gè)人</p>
建議把內(nèi)容寫(xiě)得長(zhǎng)一點(diǎn)，這樣效果才會(huì)更加明顯，這里演示不方便寫(xiě)太多無(wú)用的文字
還可以寫(xiě)一些js的方法
// 綁定標(biāo)簽切換時(shí)的方法
$("#myScrollspy").on("activate.bs.scrollspy",function(e){
alert("hello");
})
3.標(biāo)簽頁(yè)
點(diǎn)擊不同的標(biāo)簽可以顯示不同的內(nèi)容
首先寫(xiě)標(biāo)簽欄
<ul id="myTab" class="nav nav-tabs">
<!--a標(biāo)簽鏈接對(duì)應(yīng)下面tab-pane的id-->
<li ><a href="#home" data-toggle="tab">Home</a> </li>
<li><a href="#profile" data-toggle="tab">Profile</a> </li>
<li class="dropdown">
<a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</a>
<ul class="dropdown-menu" 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>
然后寫(xiě)不同標(biāo)簽的內(nèi)容
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade" id="home">
<p>home</p>
<div class="tab-pane fade" id="profile">
<p>profile</p>
<div class="tab-pane fade" id="one">
<p>one</p>
<div class="tab-pane fade" id="two">
<p>two</p>
可以用js初始化顯示的標(biāo)簽頁(yè)
有下面幾種選擇標(biāo)簽頁(yè)的方式
$('#myTabs a[href="#profile"]').tab('show') // 根據(jù)名字選擇
$('#myTabs a:first').tab('show') // 選擇第一個(gè)標(biāo)簽頁(yè)
$('#myTabs a:last').tab('show') // 選擇最后一個(gè)標(biāo)簽頁(yè)
$('#myTabs li:eq(2) a').tab('show') // 選擇第三個(gè)標(biāo)簽頁(yè)（因?yàn)?是第一個(gè)），如果是下拉菜單里的標(biāo)簽頁(yè)，數(shù)字要加1
4.工具提示
<p>
<!--若title內(nèi)容為空則顯示data-original-title的內(nèi)容，placement為顯示的位置，可設(shè)為top|bottom|left|right-->
<!--參數(shù)可以以data-****的方式設(shè)置-->
歡迎來(lái)到<a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip" title="title"
data-placement="bottom" data-original-title="www.jk.com">jack's page</a>
</p>
然后要用js初始化，否則會(huì)沒(méi)有任何效果
//初始化tooltip，指向則顯示
$('[data-toggle="tooltip"]').tooltip();
5.彈出框
彈出框類(lèi)似工具提示，但顯示的內(nèi)容比工具提示更加豐富，也比它常用
<!--data-trigger="foucus"點(diǎn)擊空白可消失，不加的話(huà)點(diǎn)擊按鈕消失，設(shè)為hover的話(huà)鼠標(biāo)移動(dòng)的按鈕顯示，移開(kāi)消失-->
<!--這個(gè)彈出框標(biāo)題為title，內(nèi)容為content-->
<button type="button" class="btn btn-default js-popover" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content">
彈出框
</button>
然后要用js初始化
// 初始化popover
$(".js-popover").popover();
6.按鈕
前2篇講的是按鈕的基本樣式，這次是進(jìn)階使用，可以讓按鈕在加載時(shí)顯示不同的文字
<!--可以設(shè)置按鈕在loading時(shí)的文字-->
<button type="button" data-loading-text="Loding for 3s" class="btn btn-primary js-loading-btn">
Loading Status
</button>
然后要用js綁定點(diǎn)擊事件
// 綁定按鈕的點(diǎn)擊事件
$(".js-loading-btn").on("click", function (e) {
// 點(diǎn)擊后設(shè)為loading狀態(tài)，顯示loading的文字
var btn = $(this).button("loading");
// 3s后恢復(fù)
setTimeout(function (e) {
btn.button("reset")
}, 3000)
})
7.堆疊
堆疊效果可以節(jié)省大量的屏幕控件，非常實(shí)用
這是點(diǎn)擊按鈕打開(kāi)堆疊的
<!--href為顯示內(nèi)容的id-->
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">點(diǎn)擊查看</a>
<div class="collapse" id="collapseExample">
<div class="well">
Hello
</div>
</div>
這是面板組的堆疊
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<!--顯示的標(biāo)題-->
<h4 class="panel-title">
<!--data-parent要是panel-group的id-->
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>
</h4>
</div>
<!--加了in表示打開(kāi)，不加表示隱藏-->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
Hello<br>
Hello<br>
Hello<br>
</div>
</div>
</div>
</div>
8.輪換頁(yè)
我們經(jīng)?？梢栽诰W(wǎng)站的主頁(yè)可以看到
<div id="carousel-example-generic" class="carousel slide">
<!--這是下面那三個(gè)白色圓indicator-->
<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>
</ol>
<!--輪換頁(yè)的內(nèi)容-->
<div class="carousel-inner">
<div class="item active">
<img src="images/4.jpg">
<!--添加文字-->
<div class="carousel-caption">
<h3>U3D</h3>
<p>新版本升級(jí)</p>
</div>
</div>
<div class="item ">
<img src="images/2.jpg">
<div class="carousel-caption">
<h3>U3D</h3>
<p>新品上線(xiàn)</p>
</div>
</div>
<div class="item ">
<img src="images/3.jpg">
<div class="carousel-caption">
<h3>Apple</h3>
<p>Apple手表</p>
</div>
</div>
</div>
<!--輪換頁(yè)左邊和右邊的箭頭-->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prew">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
可以用js設(shè)置間隔和自動(dòng)開(kāi)始
//設(shè)置間隔為2s且自動(dòng)輪播
$(".carousel").carousel({
interval:2000
})
9.側(cè)邊欄
側(cè)邊欄的主要內(nèi)容是一個(gè)列表
<!--要設(shè)置寬度，在手機(jī)屏幕上隱藏-->
<div class="col-md-3 col-sm-4 hidden-xs">
<ul class="list-group affixed-element-top js-affixed-element-top">
<a href="#" class="list-group-item">hello</a>
<a href="#" class="list-group-item">hello</a>
<a href="#" class="list-group-item">hello</a>
<a href="#" class="list-group-item">hello</a>
<a href="#" class="list-group-item">hello</a>
<a href="#" class="list-group-item">hello</a>
<a href="#" class="list-group-item">hello</a>
<a href="#" class="list-group-item">hello</a>
</ul>
</div>
再寫(xiě)style
<style>
.affixed-element-top.affix{
/*如果想在底部的話(huà)可以改為bottom:10px;*/
top:10px;
}
.affixed-element-top.affix-bottom{
position: relative;
}
</style>
還要加一些js
$(".js-affixed-element-top").affix({
offset:{
}
})
Boostrap的基本用法就這樣，掌握后就可以做出很好的網(wǎng)頁(yè)了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS組件福利大放送 推薦12款好用的Bootstrap組件
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- JS組件Bootstrap Table使用方法詳解
- JS組件Bootstrap Select2使用方法詳解
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- JS組件中bootstrap multiselect兩大組件較量
- JS組件系列之Bootstrap Icon圖標(biāo)選擇組件
相關(guān)文章
談?wù)凱HP中相對(duì)路徑的問(wèn)題與絕對(duì)路徑的使用
經(jīng)?？吹接腥瞬仍诹薖HP路徑的坑上面了，感覺(jué)有必要來(lái)說(shuō)說(shuō)PHP中相對(duì)路徑的一些坑，以及PHP中絕對(duì)路徑的使用，下面一起來(lái)看看。2016-08-08
JS獲取隨機(jī)數(shù)函數(shù)可自定義最小值最大值
這篇文章主要介紹的是一個(gè)JS獲取隨機(jī)數(shù)的函數(shù)可自定義最小值最大值,需要的朋友可以參考下2014-05-05
js網(wǎng)頁(yè)中隨意拖動(dòng)的小方塊實(shí)現(xiàn)代碼
用CSS和JS制作的在網(wǎng)頁(yè)中可以隨意拖動(dòng)的小方塊。2008-08-08
ES6為js新增了很多方法,包括遍歷、查詢(xún)、替換等等,下面這篇文章主要給大家介紹了關(guān)于ES6字符串和數(shù)值新增方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
幾種延遲加載JS代碼的方法加快網(wǎng)頁(yè)的訪(fǎng)問(wèn)速度
如何延遲javascript代碼的加載，加快網(wǎng)頁(yè)的訪(fǎng)問(wèn)速度，為了讓我們的網(wǎng)頁(yè)加載速度更快，本文總結(jié)了一下幾個(gè)注意點(diǎn)，感興趣的朋友可以參考下2013-10-10
JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析
這篇文章主要介紹了JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析,需要的朋友可以參考下2018-07-07
JavaScript實(shí)現(xiàn)非常簡(jiǎn)單實(shí)用的下拉菜單效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)非常簡(jiǎn)單實(shí)用的下拉菜單效果,通過(guò)定義顯示及隱藏菜單項(xiàng)及鼠標(biāo)事件調(diào)用該函數(shù)實(shí)現(xiàn)下拉菜單功能,需要的朋友可以參考下2015-08-08
Mozilla中顯示textarea中選擇的文字...2006-09-09
微信小程序?qū)崿F(xiàn)商品分類(lèi)頁(yè)過(guò)程結(jié)束
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品分類(lèi)頁(yè)列表方法，商品分類(lèi)頁(yè)主要是需要實(shí)現(xiàn)商品類(lèi)目和對(duì)應(yīng)商品標(biāo)題的聯(lián)動(dòng)跳轉(zhuǎn)，文中過(guò)程詳細(xì)，感興趣的小伙伴們可以參考一下2023-05-05
javascript把15位身份證轉(zhuǎn)成18的函數(shù)
非常不錯(cuò)的，看了這個(gè)大家就明白身份證的運(yùn)算規(guī)則了2008-10-10