Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解
更新時(shí)間：2021年11月22日 11:16:09 作者：*花落微涼＆入夢(mèng)
這篇文章主要為大家介紹了Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
bootstrap簡(jiǎn)介及其相關(guān)內(nèi)容
Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。引用其時(shí)需要具備一定的基本模板：
<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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢(xún)（media queries）功能 -->
<!-- 警告：通過(guò) file:// 協(xié)議（就是直接將 html 頁(yè)面拖拽到瀏覽器中）訪問(wèn)頁(yè)面時(shí) 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將頁(yè)面或容器化氛圍橫向的12等份，行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding）。利用col-lg-(“number”）對(duì)橫向的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)是水平分開(kāi)兩個(gè)盒子，如果只是單純的div則會(huì)顯示為上下分布 -->
<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>
<!-- 總共十二等份，兩個(gè)盒子本來(lái)是只占了8列，還有四列未被使用，
故col-md-offset-4,所以右側(cè)的盒子會(huì)繼續(xù)向右偏移4列 -->
<div class="col-md-4 col-md-offset-4">右側(cè)</div>
</div>
</div>
</div>
列排序
一般用于盒子調(diào)換順序
<div class="container">
<div class="row">
<!-- 左右兩個(gè)盒子同時(shí)使用push和pull元素，盒子才不會(huì)被壓住 -->
<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"，有助于增加可訪問(wèn)性。 - <div> 元素添加一個(gè)標(biāo)題
class .navbar-header，內(nèi)部包含了帶有class navbar-brand的 <a> 元素。這會(huì)讓文本看起來(lái)更大一號(hào)。 - 為了向?qū)Ш綑谔砑渔溄?，只需要?jiǎn)單地添加帶有
class .nav、.navbar-nav的無(wú)序列表即可。
演示如下：
<!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>Bootstrap 101 Template</title>
<link rel="stylesheet" >
<!-- 這兩個(gè)script都必須要寫(xiě)否則就會(huì)下拉菜單無(wú)法出來(lái) -->
<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>
<!-- 這是一個(gè)響應(yīng)式布局，當(dāng)屏幕處于最大化時(shí)與屏幕縮小時(shí)的布局不一樣 -->
<body>
<!-- role="navigation"有助于增加可訪問(wèn)性 -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- "navbar-header"，內(nèi)部包含了帶有classnav-brand的<a>元素，會(huì)使文本看起來(lái)更大一號(hào) -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<!-- data-toggle用于告訴JavaScript需要對(duì)按鈕做什么，icon-target指示要切換到哪一個(gè)元素，三個(gè)icon代表要?jiǎng)?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="#">菜鳥(niǎo)教程</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="#">另一個(gè)分離的鏈接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
全局界面
小窗界面
輪播
Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式。除此之外，內(nèi)容也是足夠靈活的，可以是圖像、內(nèi)嵌框架、視頻或者其他您想要放置的任何類(lèi)型的內(nèi)容。
實(shí)例演示：
<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）項(xiàng)目 --> <div class="carousel-inner"> <div class="item active"> <!-- 圖片引用絕對(duì)路徑，相對(duì)路徑會(huì)出錯(cuò) --> <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é)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
您可能感興趣的文章:
- Three.js學(xué)習(xí)之網(wǎng)格
- JavaScript實(shí)現(xiàn)拖拽元素對(duì)齊到網(wǎng)格（每次移動(dòng)固定距離）
- 分享十三個(gè)最佳JavaScript數(shù)據(jù)網(wǎng)格庫(kù)
- 原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
- Vue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法
- Three.js中網(wǎng)格對(duì)象MESH的屬性與方法詳解
- JavaScript?Canvas繪制六邊形網(wǎng)格
- JavaScript網(wǎng)格中的最小路徑講解
相關(guān)文章
如何使用pace.js美化你的網(wǎng)站加載進(jìn)度條詳解
Pace.js是一個(gè)非常有意思的js插件,可以自動(dòng)的監(jiān)聽(tīng)頁(yè)面的加載數(shù)據(jù),并且能夠定制加載條,下面這篇文章主要給大家介紹了關(guān)于使用pace.js如何美化你的網(wǎng)站加載進(jìn)度條的相關(guān)資料,需要的朋友可以參考下2022-02-02
js腳本編寫(xiě)簡(jiǎn)單刷票投票系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了js腳本編寫(xiě)簡(jiǎn)單刷票投票系統(tǒng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
微信小程序bindinput與bindsubmit的區(qū)別實(shí)例分析
這篇文章主要介紹了微信小程序bindinput與bindsubmit的區(qū)別,結(jié)合實(shí)例形式分析了微信小程序bindinput與bindsubmit的具體功能、用法及相關(guān)使用區(qū)別,需要的朋友可以參考下2019-04-04
瀏覽器允許JavaScript腳本讀寫(xiě)剪貼板，自動(dòng)復(fù)制或粘貼內(nèi)容。一般來(lái)說(shuō)，腳本不應(yīng)該改動(dòng)用戶(hù)的剪貼板，以免不符合用戶(hù)的預(yù)期。但是，有些時(shí)候這樣做確實(shí)能夠帶來(lái)方便，比如"一鍵復(fù)制"功能，用戶(hù)點(diǎn)擊一下按鈕，指定的內(nèi)容就自動(dòng)進(jìn)入剪貼板。本文將介紹3種方法來(lái)實(shí)現(xiàn)。2021-05-05
Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了JS小游戲之宇宙戰(zhàn)機(jī)源碼,是一款非常經(jīng)典的游戲源碼,包含了游戲設(shè)計(jì)中比較常見(jiàn)的邏輯處理,本文附帶了該游戲的完整源碼,需要的朋友可以參考下2014-09-09
JavaScript棧和隊(duì)列相關(guān)操作與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript棧和隊(duì)列相關(guān)操作與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript棧和隊(duì)列的概念、原理、定義、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下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é)合實(shí)例形式分析了javascript數(shù)組的定義與使用方法,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了如何理解JavaScript中的對(duì)象，幫助大家更好的學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
不用MOUSEMOVE也能滑動(dòng)啊...2007-05-05