溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Bootstrap中響應(yīng)式布局的相關(guān)知識(shí)點(diǎn)有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Bootstrap中響應(yīng)式布局的相關(guān)知識(shí)點(diǎn)有哪些”吧！
官方解釋：導(dǎo)航條是在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。它們在移動(dòng)設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時(shí)逐漸變?yōu)樗秸归_模式。
使用 Bootstrap 之前，習(xí)慣用 <ul> + <li> 來構(gòu)造一個(gè)導(dǎo)航欄。
<!--代碼部分-->
<style>
.navigation-past{
list-style: none;
}
.navigation-past>li{
float: left;
padding: 8px;
}
.navigation-past>li>a{
text-decoration: none;
color: #000;
}
.active-past{
background: #E7E7E7;
}
</style>
<ul class="navigation-past">
<!--選中-->
<li class="active-past"><a href="#">Navigation First</a></li>
<li><a href="#">Navigation Second</a></li>
<li><a href="#">Navigation Third</a></li>
<li><a href="#">Navigation Fourth</a></li>
<li><a href="#">Navigation Fifth</a></li>
</ul>效果圖：
使用 Bootstrap 的話，便是在熟悉的這個(gè)構(gòu)造上加上一些修飾即可。首先在 <ul> 外面套一層 <div>，并加上樣式 navbar navbar-default；然后給里面的 <ul> 加上樣式 nav navbar-nav；最后，給選中的部分加上樣式 active。一個(gè)最基本的 Bootstrap 導(dǎo)航便完成了。
<!--代碼部分--> <div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Navigation First</a></li> <li><a href="#">Navigation Second</a></li> <li><a href="#">Navigation Third</a></li> <li><a href="#">Navigation Fourth</a></li> <li><a href="#">Navigation Fifth</a></li> </ul> </div>
效果圖：
這里在最外層加了一個(gè) role="navigation" 的屬性，這里是 HTML5 的標(biāo)簽屬性，目的是讓標(biāo)簽語義化，方便屏幕閱讀器對其進(jìn)行識(shí)別，同時(shí)也是為了方便特殊人群瀏覽。
在瀏覽一些官方網(wǎng)站時(shí)，首先映入眼簾的是左上角鮮明的公司 LOGO 和夸張的輪播 ，Bootstrap 在導(dǎo)航中預(yù)留了 LOGO 的位置。使用方法是在外層 <div> 里面加一個(gè)樣式 navbar-header 的 <div>，這個(gè) <div> 內(nèi)再加一個(gè)樣式 navbar-brand 的 <a> 元素。
<!--代碼部分--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="#" class="navbar-brand">LOGO</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Navigation First</a></li> <li><a href="#">Navigation Second</a></li> <li><a href="#">Navigation Third</a></li> <li><a href="#">Navigation Fourth</a></li> <li><a href="#">Navigation Fifth</a></li> </ul> </div>
效果圖：
有的時(shí)候一級(jí)導(dǎo)航是不夠的，需要搭配二級(jí)導(dǎo)航展示更多的內(nèi)容。使用方法：首先在需要加二級(jí)導(dǎo)航的 <li> 元素中添加樣式 dropdown，<a> 元素中添加樣式 dropdown-toggle 和屬性 data-toggle="dropdown"；然后在 <li> 里面 <a> 下面在放一個(gè) <ul> + <li> 組合，<ul> 標(biāo)簽添加樣式 dropdown-menu。
<!--代碼部分--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="#" class="navbar-brand">LOGO</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Navigation First</a></li> <li><a href="#">Navigation Second</a></li> <li><a href="#">Navigation Third</a></li> <li><a href="#">Navigation Fourth</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Navigation Fifth <ul class="dropdown-menu"> <li><a href="#">Sub-Navigation First</a></li> <li><a href="#">Sub-Navigation Second</a></li> <li><a href="#">Sub-Navigation Third</a></li> </ul> </a> </li> </ul> </div>
效果圖：
這里又出現(xiàn)新的屬性 aria-haspopup="true" aria-expanded="false"，同樣的，這也是 HTML5 新加的屬性，這里引用 Segmentfault 社區(qū)姜中秋的回答。
aria-haspopup: true 表示點(diǎn)擊的時(shí)候會(huì)出現(xiàn)菜單或是浮動(dòng)元素；false 表示沒有 pop-up 效果。aria-expanded: 表示展開狀態(tài)。默認(rèn)為 undefined, 表示當(dāng)前展開狀態(tài)未知。其它可選值：true 表示元素是展開的；false 表示元素不是展開的。
平常所見到的下拉框一般都有一個(gè)向下的箭頭符號(hào) ▼，同樣的，在 Bootstrap 中也支持這一效果，只不過需要引入她自帶的字體庫 Glyphicons 字體圖標(biāo)。
官方介紹：Bootstrap 包括 250 多個(gè)來自 Glyphicon Halflings 的字體圖標(biāo)。Glyphicons Halflings 一般是收費(fèi)的，但是他們的作者允許 Bootstrap 免費(fèi)使用。為了表示感謝，希望你在使用時(shí)盡量為Glyphicons添加一個(gè) 友情鏈接。
使用方法：新建一個(gè) <span> 元素，然后在里面加上樣式 glyphicon glyphicon-triangle-bottom。
Glyphicons 字體圖標(biāo)使用示例：
<!--代碼部分--> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Navigation Fifth <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> <ul class="dropdown-menu"> <li><a href="#">Sub-Navigation First</a></li> <li><a href="#">Sub-Navigation Second</a></li> <li><a href="#">Sub-Navigation Third</a></li> </ul> </a> </li>
效果圖：
注意：
Glyphicons 字體圖標(biāo)和文本之間添加一個(gè)空格，不然會(huì)影響樣式（padding）的正確顯示。
服務(wù)器需要正確添加相應(yīng)的 MIME 類型，否則加載字體會(huì)報(bào) 404 錯(cuò)誤。
另外這里的箭頭也可以使用 Bootstrap 自帶的樣式 caret 來實(shí)現(xiàn)，這里的箭頭是用 CSS 實(shí)現(xiàn)了，使用方法：<span class="caret"></span>。
在手機(jī)端瀏覽網(wǎng)站的時(shí)候?？吹綆讉€(gè)橫線（≡）組成的導(dǎo)航向?qū)?，Bootstrap 作為一個(gè)移動(dòng)設(shè)備優(yōu)先也是支持這樣的需求的，響應(yīng)式導(dǎo)航的使用的方法比較固定，首先在導(dǎo)航標(biāo)題 <div class="navbar-header"> 內(nèi)加上一段固定寫法的代碼；然后在需要在小屏?xí)r折疊的 <ul> 元素外包一層樣式 collapse navbar-collapse 的 <div> 元素，并給這個(gè)元素加上任意名稱的 ID，例如：id="navigation-collapse"；最后在響應(yīng)式按鈕 <button> 元素上加上 data-target 屬性指向要折疊的內(nèi)容 id，例如：data-target="#navigation-collapse"。
<!--代碼部分--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!--以下為固定寫法，用到的時(shí)候復(fù)制粘貼即可--> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">LOGO</a> </div> <div class="collapse navbar-collapse" id="navigation-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Navigation First</a></li> <li><a href="#">Navigation Second</a></li> <li><a href="#">Navigation Third</a></li> <li><a href="#">Navigation Fourth</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Navigation Fifth <span class="caret"></span> <ul class="dropdown-menu"> <li><a href="#">Sub-Navigation First</a></li> <li><a href="#">Sub-Navigation Second</a></li> <li><a href="#">Sub-Navigation Third</a></li> </ul> </a> </li> </ul> </div> </div>
效果圖：
圖片輪播是網(wǎng)站的重要組成部分之一，常用來放活動(dòng)廣告或企業(yè)宣傳圖，有時(shí)也叫做“幻燈片”，Bootstrap 中的輪播效果是由 JavaScript 插件 Carousel 來實(shí)現(xiàn)的。
輪播的使用方法也是相對固定的，特殊場景按需求修改即可。需要注意的是需要給最外層 <div> 元素加上一個(gè) id，并在小圓點(diǎn)出指向這個(gè) id。
<!--代碼部分--> <div id="my-banner" class="carousel"> <!--放置小圓點(diǎn)，點(diǎn)擊可以切換輪播--> <ol class="carousel-indicators"> <!--加上樣式active表示默認(rèn)顯示的輪播，data-slide-to="0"屬性表示顯示輪播的順序--> <li data-target="#my-banner" data-slide-to="0" class="active"></li> <li data-target="#my-banner" data-slide-to="1"></li> </ol> <!--這里放置輪播顯示的圖片--> <div class="carousel-inner"> <!--加上樣式active表示默認(rèn)顯示的圖片--> <div class="item active"> <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="輪播"> </div> <div class="item"> <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="輪播"> </div> </div> </div>
一個(gè)完整的輪播應(yīng)具有自動(dòng)播放、點(diǎn)擊切換、懸浮停止、外加說明文字功能，別擔(dān)心，這些 Bootstrap 通通都有！
最外層 <div> 元素添加屬性 data-ride="carousel" 和樣式 slide（使輪播播放更平滑），如：<div id="my-banner" class="carousel slide" data-ride="carousel">。此時(shí)輪播的自動(dòng)播放時(shí)間為 5 秒（默認(rèn)），如想改變此值設(shè)置屬性 data-interval="你想要的值"，如我想要 3 秒（3000 ms）輪播一次則設(shè)置 data-interval="3000"。另外輪播是默認(rèn)懸浮停止播放的（data-pause="hover"），如想禁止懸浮播放設(shè)置屬性 data-pause="false" 即可。
在輪播圖片 <img> 元素下面添加樣式 carousel-caption 的 <div>，里面存放文字便可正確顯示在輪播上面。
<!--代碼部分--> <div class="carousel-caption"> <h6>夜里總是下雨</h6> </div>
在輪播圖片下面放置兩個(gè) <a> 元素，href 指向輪播 id，添加屬性 data-slide="prev/next 向前/向后"。
<!--代碼部分--> <!--<a>元素的href指向輪播id--> <a class="left carousel-control" href="#my-banner" data-slide="prev" role="button"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#my-banner" data-slide="next" role="button"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
輪播代碼示例：
<!--代碼部分--> <div id="my-banner" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false"> <!--放置小圓點(diǎn)，點(diǎn)擊可以切換輪播--> <ol class="carousel-indicators"> <!--加上樣式active表示默認(rèn)顯示的輪播，data-slide-to="0"屬性表示顯示輪播的順序--> <li data-target="#my-banner" data-slide-to="0" class="active"></li> <li data-target="#my-banner" data-slide-to="1"></li> </ol> <!--這里放置輪播顯示的圖片--> <div class="carousel-inner"> <!--加上樣式active表示默認(rèn)顯示的圖片--> <div class="item active"> <img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="輪播"> <div class="carousel-caption"> <h6>夜里總是下雨</h6> </div> </div> <div class="item"> <img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="輪播"> <div class="carousel-caption"> <h6>后除提醒君の世界</h6> </div> </div> </div> <!--<a>元素的href指向輪播id--> <a class="left carousel-control" href="#my-banner" data-slide="prev" role="button"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#my-banner" data-slide="next" role="button"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
其實(shí)實(shí)現(xiàn)這樣一個(gè)效果很簡單，首先看一下柵格參數(shù)如何在多種屏幕設(shè)備上工作的。
在新聞和資訊的盒子上同時(shí)加上樣式 col-xs-*，col-sm-* 和 col-md-*，小屏?xí)r（屏幕寬度 ＜ 992px）col-xs-*，col-sm-* 生效，col-md-* 失效；大屏?xí)r（屏幕寬度 ≥ 992px）col-md-* 生效，col-xs-*，col-sm-* 失效。例如：<div class="col-xs-12 col-sm-12 col-md-6">新聞</div><div class="col-xs-12 col-sm-12 col-md-6">資訊</div>。
感謝各位的閱讀，以上就是“Bootstrap中響應(yīng)式布局的相關(guān)知識(shí)點(diǎn)有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Bootstrap中響應(yīng)式布局的相關(guān)知識(shí)點(diǎn)有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼