Bootstrap中響應(yīng)式布局的相關(guān)知識(shí)點(diǎn)有哪些
這篇文章主要講解了“Bootstrap中響應(yīng)式布局的相關(guān)知識(shí)點(diǎn)有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Bootstrap中響應(yīng)式布局的相關(guān)知識(shí)點(diǎn)有哪些”吧！
為汾陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及汾陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、汾陽網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
知識(shí)點(diǎn)
1 導(dǎo)航欄
官方解釋：導(dǎo)航條是在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。它們在移動(dòng)設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時(shí)逐漸變?yōu)樗秸归_模式。
1.1 基礎(chǔ)導(dǎo)航欄
使用 Bootstrap 之前，習(xí)慣用
Navigation First
Navigation Second
Navigation Third
Navigation Fourth
Navigation Fifth
效果圖：
使用 Bootstrap 的話，便是在熟悉的這個(gè)構(gòu)造上加上一些修飾即可。首先在 ，并加上樣式
navbar navbar-default；然后給里面的
加上樣式
nav navbar-nav；最后，給選中的部分加上樣式
active。一個(gè)最基本的 Bootstrap 導(dǎo)航便完成了。
Navigation First
Navigation Second
Navigation Third
Navigation Fourth
Navigation Fifth
效果圖：
這里在最外層加了一個(gè) role="navigation" 的屬性，這里是 HTML5 的標(biāo)簽屬性，目的是讓標(biāo)簽語義化，方便屏幕閱讀器對(duì)其進(jìn)行識(shí)別，同時(shí)也是為了方便特殊人群瀏覽。
1.2 進(jìn)階的導(dǎo)航欄
在瀏覽一些官方網(wǎng)站時(shí)，首先映入眼簾的是左上角鮮明的公司 LOGO 和夸張的輪播 ，Bootstrap 在導(dǎo)航中預(yù)留了 LOGO 的位置。使用方法是在外層 里面加一個(gè)樣式
navbar-header 的
，這個(gè)
內(nèi)再加一個(gè)樣式
navbar-brand 的
元素。
LOGO
效果圖：
有的時(shí)候一級(jí)導(dǎo)航是不夠的，需要搭配二級(jí)導(dǎo)航展示更多的內(nèi)容。使用方法：首先在需要加二級(jí)導(dǎo)航的 dropdown，dropdown-toggle 和屬性 data-toggle="dropdown"；然后在 dropdown-menu。
LOGO
效果圖：
這里又出現(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è) glyphicon glyphicon-triangle-bottom。
Glyphicons 字體圖標(biāo)使用示例：
Navigation Fifth
Sub-Navigation First
Sub-Navigation Second
Sub-Navigation Third
效果圖：
注意：
另外這里的箭頭也可以使用 Bootstrap 自帶的樣式 caret 來實(shí)現(xiàn)，這里的箭頭是用 CSS 實(shí)現(xiàn)了，使用方法：
1.3 響應(yīng)式導(dǎo)航欄
在手機(jī)端瀏覽網(wǎng)站的時(shí)候?？吹綆讉€(gè)橫線（≡）組成的導(dǎo)航向?qū)?，Bootstrap 作為一個(gè)移動(dòng)設(shè)備優(yōu)先也是支持這樣的需求的，響應(yīng)式導(dǎo)航的使用的方法比較固定，首先在導(dǎo)航標(biāo)題
效果圖：
2 輪播
圖片輪播是網(wǎng)站的重要組成部分之一，常用來放活動(dòng)廣告或企業(yè)宣傳圖，有時(shí)也叫做“幻燈片”，Bootstrap 中的輪播效果是由 JavaScript 插件 Carousel 來實(shí)現(xiàn)的。
2.1 基礎(chǔ)輪播
輪播的使用方法也是相對(duì)固定的，特殊場景按需求修改即可。需要注意的是需要給最外層 元素加上一個(gè)
id，并在小圓點(diǎn)出指向這個(gè)
id。
一個(gè)完整的輪播應(yīng)具有自動(dòng)播放、點(diǎn)擊切換、懸浮停止、外加說明文字功能，別擔(dān)心，這些 Bootstrap 通通都有！
重慶分公司
重慶分公司
