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 元素和媒體查詢（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都必須要寫否則就會(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)嵌框架、視頻或者其他您想要放置的任何類型的內(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)文章
這篇文章介紹了JS獲取地址欄參數(shù)的小例子，有需要的朋友可以參考一下2013-08-08
js獲取元素的偏移量offset簡(jiǎn)單方法(必看)
下面小編就為大家?guī)?lái)一篇js獲取元素的偏移量offset簡(jiǎn)單方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡(jiǎn)單計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javaScript中Math()函數(shù)注意事項(xiàng)
本文主要給大家分享了javascript中Math()函數(shù)的注意事項(xiàng)，以及math對(duì)象的方法，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下2015-06-06
淺談es6語(yǔ)法 (Proxy和Reflect的對(duì)比)
下面小編就為大家?guī)?lái)一篇淺談es6語(yǔ)法 (Proxy和Reflect的對(duì)比)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
javascript實(shí)現(xiàn)可全選、反選及刪除表格的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)可全選、反選及刪除表格的方法,實(shí)例展示了javascript針對(duì)表格全選、反選、刪除、隔行變色、刪除提示等常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別
JavaScript中，模塊是一種可重用的代碼塊，它將一些代碼打包成一個(gè)單獨(dú)的單元，并且可以在其他代碼中進(jìn)行導(dǎo)入和使用。JavaScript中有兩種常用的方式：使用import和require，本文主要聊聊他們二者的區(qū)別2023-03-03
純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
用瀑布流來(lái)展現(xiàn)照片再好不過(guò)了,我的思路大概是一張一張的圖片插入，當(dāng)這一行的圖片保持長(zhǎng)寬比例不變并且高度低于250時(shí)就完成一個(gè)了循環(huán)，即這一行插入進(jìn)去了2013-04-04
這篇文章主要介紹了JS實(shí)現(xiàn)前端頁(yè)面的搜索功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的實(shí)例代碼
這篇文章主要是對(duì)JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的實(shí)例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11