Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解
更新時間：2021年11月22日 11:16:09 作者：*花落微涼＆入夢
這篇文章主要為大家介紹了Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
bootstrap簡介及其相關(guān)內(nèi)容
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。引用其時需要具備一定的基本模板：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
網(wǎng)格系統(tǒng)
bootstrap將頁面或容器化氛圍橫向的12等份，行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶R（alignment）和內(nèi)邊距（padding）。利用col-lg-(“number”）對橫向的12等份進(jìn)行分配。
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
列嵌套
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- col-md-6默認(rèn)是水平分開兩個盒子，如果只是單純的div則會顯示為上下分布 -->
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
</div>
列偏移
使用.col-md-offset-*可以將列向右偏移
<div class="container">
<div class="row">
<div class="col-md-4">坐廁</div>
<!-- 總共十二等份，兩個盒子本來是只占了8列，還有四列未被使用，
故col-md-offset-4,所以右側(cè)的盒子會繼續(xù)向右偏移4列 -->
<div class="col-md-4 col-md-offset-4">右側(cè)</div>
</div>
</div>
</div>
列排序
一般用于盒子調(diào)換順序
<div class="container">
<div class="row">
<!-- 左右兩個盒子同時使用push和pull元素，盒子才不會被壓住 -->
<div class="col-md-4 col-md-push-8">坐廁</div>
<div class="col-md-8 col-md-pull-4">右側(cè)</div>
</div>
</div>
</div>
導(dǎo)航欄
- 向
<nav>標(biāo)簽添加class .navbar、.navbar-default。 - 向上面的元素添加
role="navigation"，有助于增加可訪問性。 - <div> 元素添加一個標(biāo)題
class .navbar-header，內(nèi)部包含了帶有class navbar-brand的 <a> 元素。這會讓文本看起來更大一號。 - 為了向?qū)Ш綑谔砑渔溄樱恍枰唵蔚靥砑訋в?code> class .nav、
.navbar-nav的無序列表即可。
演示如下：
<!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個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" >
<!-- 這兩個script都必須要寫否則就會下拉菜單無法出來 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<!-- 這是一個響應(yīng)式布局，當(dāng)屏幕處于最大化時與屏幕縮小時的布局不一樣 -->
<body>
<!-- role="navigation"有助于增加可訪問性 -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- "navbar-header"，內(nèi)部包含了帶有classnav-brand的<a>元素，會使文本看起來更大一號 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<!-- data-toggle用于告訴JavaScript需要對按鈕做什么，icon-target指示要切換到哪一個元素，三個icon代表要創(chuàng)建所謂的漢堡按鈕 -->
<span class="sr-only">切換導(dǎo)航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鳥教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的鏈接</a></li>
<li class="divider"></li>
<li><a href="#">另一個分離的鏈接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
全局界面
小窗界面
輪播
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類型的內(nèi)容。
實例演示：
<body> <div id="myCarousel" class="carousel slide"> <!-- 輪播（Carousel）指標(biāo) --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 輪播（Carousel）項目 --> <div class="carousel-inner"> <div class="item active"> <!-- 圖片引用絕對路徑，相對路徑會出錯 --> <img src="1.jpg" alt="First slide" style="width: 100%;height: 200px;"> </div> <div class="item"> <img src="2.jpg" alt="Second slide" style="width: 100%;height: 200px;"> </div> <div class="item"> <img src="3.jpg" alt="Third slide" style="width: 100%;height: 200px;"> </div> </div> <!-- 上下跳轉(zhuǎn)控制，跳轉(zhuǎn)控制可以前進(jìn)貨后退 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
如何使用pace.js美化你的網(wǎng)站加載進(jìn)度條詳解
Pace.js是一個非常有意思的js插件,可以自動的監(jiān)聽頁面的加載數(shù)據(jù),并且能夠定制加載條,下面這篇文章主要給大家介紹了關(guān)于使用pace.js如何美化你的網(wǎng)站加載進(jìn)度條的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要為大家詳細(xì)介紹了js腳本編寫簡單刷票投票系統(tǒng)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
微信小程序bindinput與bindsubmit的區(qū)別實例分析
這篇文章主要介紹了微信小程序bindinput與bindsubmit的區(qū)別,結(jié)合實例形式分析了微信小程序bindinput與bindsubmit的具體功能、用法及相關(guān)使用區(qū)別,需要的朋友可以參考下2019-04-04
瀏覽器允許JavaScript腳本讀寫剪貼板，自動復(fù)制或粘貼內(nèi)容。一般來說，腳本不應(yīng)該改動用戶的剪貼板，以免不符合用戶的預(yù)期。但是，有些時候這樣做確實能夠帶來方便，比如"一鍵復(fù)制"功能，用戶點(diǎn)擊一下按鈕，指定的內(nèi)容就自動進(jìn)入剪貼板。本文將介紹3種方法來實現(xiàn)。2021-05-05
Vue2.0+ElementUI實現(xiàn)表格翻頁的實例
下面小編就為大家?guī)硪黄猇ue2.0+ElementUI實現(xiàn)表格翻頁的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了JS小游戲之宇宙戰(zhàn)機(jī)源碼,是一款非常經(jīng)典的游戲源碼,包含了游戲設(shè)計中比較常見的邏輯處理,本文附帶了該游戲的完整源碼,需要的朋友可以參考下2014-09-09
JavaScript棧和隊列相關(guān)操作與實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript棧和隊列相關(guān)操作與實現(xiàn)方法,結(jié)合實例形式較為詳細(xì)的分析了javascript棧和隊列的概念、原理、定義、用法及相關(guān)操作注意事項,需要的朋友可以參考下2018-12-12
JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法,從數(shù)據(jù)結(jié)構(gòu)線性表的角度分析了數(shù)組的原理并結(jié)合實例形式分析了javascript數(shù)組的定義與使用方法,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了如何理解JavaScript中的對象，幫助大家更好的學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
不用MOUSEMOVE也能滑動啊...2007-05-05