第六章之輔組類(lèi)與響應(yīng)式工具
Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。
學(xué)習(xí)要點(diǎn)：
1.輔組類(lèi)
2.響應(yīng)式工具
本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 的輔組類(lèi)和響應(yīng)式工具， 輔助類(lèi)提供了一組類(lèi)來(lái)輔組頁(yè)面設(shè)計(jì)，而響應(yīng)式工具則利用媒體查詢(xún)顯示或隱藏某些內(nèi)容。
一．輔助類(lèi)
Bootstrap 在布局方面提供了一些細(xì)小的輔組樣式，用于文字顏色以及背景色的設(shè)置、顯示關(guān)閉圖標(biāo)等等。
1.情景文本顏色
樣式列表 樣式名 描述 text-muted 柔和灰 text-primary 主要藍(lán) text-success 成功綠 text-info 信息藍(lán) text-warning 警告黃 text-danger 危險(xiǎn)紅 //各種色調(diào)的字體 <p class="text-muted">Bootstrap 視頻教程</p> <p class="text-primary">Bootstrap 視頻教程</p> <p class="text-success">Bootstrap 視頻教程</p> <p class="text-info">Bootstrap 視頻教程</p> <p class="text-warning">Bootstrap 視頻教程</p> <p class="text-danger">Bootstrap 視頻教程</p>
2.情景背景色
樣式列表 樣式名 描述 bg-primary 主要藍(lán) bg-success 成功綠 bg-info 信息藍(lán) bg-warning 警告黃 bg-danger 危險(xiǎn)紅 //各種色調(diào)的背景 <p class="bg-primary">Bootstrap 視頻教程</p> <p class="bg-success">Bootstrap 視頻教程</p> <p class="bg-info">Bootstrap 視頻教程</p> <p class="bg-warning">Bootstrap 視頻教程</p> <p class="bg-danger">Bootstrap 視頻教程</p>
3.關(guān)閉按鈕
<button type="button" class="close">×</button>
4.三角符號(hào)
<span class="caret"></span>
5.快速浮動(dòng)
<div class="pull-left">左邊</div> <div class="pull-right">右邊</div>
注：這個(gè)浮動(dòng)其實(shí)就是 float，只不過(guò)使用了!important 加強(qiáng)了優(yōu)先級(jí)。
6.塊級(jí)居中
<div class="center-block">居中</div>
注：就是 margin:x auto；并且設(shè)置了 display:block;。
7.清理浮動(dòng)
<div class="clearfix"></div>
注：這個(gè) div 可以放在需要清理浮動(dòng)區(qū)塊的前面即可。
8.顯示和隱藏
<div class="show">show</div> <div class="hidden">hidden</div>
二．響應(yīng)式工具
在媒體查詢(xún)時(shí)，針對(duì)不同的屏幕大小，有時(shí)需要顯示和隱藏部分內(nèi)容。響應(yīng)式工具類(lèi)，就提供了這種解決方案。
//超小屏幕激活顯示 <div class="visible-xs-block a">Bootstrap</div> //超小屏幕激活隱藏 <div class="hidden-xs a">Bootstrap</div>
注：對(duì)于顯示的內(nèi)容，有三種變體，分別為：block、inline-block、inline。
以上所述是小編給大家介紹的BootStrap組件之輔組類(lèi)與響應(yīng)式工具的相關(guān)內(nèi)容，希望對(duì)大家有所幫助！
相關(guān)文章
js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫(huà)的導(dǎo)航欄效果
本篇文章主要分享了js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫(huà)的導(dǎo)航欄效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
layer彈出層父子頁(yè)面事件相互調(diào)用方法
今天小編就為大家分享一篇layer彈出層父子頁(yè)面事件相互調(diào)用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁(yè)面實(shí)現(xiàn)代碼
這篇文章主要介紹了JS動(dòng)態(tài)添加的div點(diǎn)擊跳轉(zhuǎn)到另一頁(yè)面實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-09-09
跟我學(xué)習(xí)javascript的全局變量，告訴大家三種避免全局變量的方法，感興趣的小伙伴們可以參考一下2015-11-11
getElementByID、createElement、appendChild幾個(gè)DHTML元素
WEB標(biāo)準(zhǔn)下可以通過(guò)getElementById(), getElementsByName(), and getElementsByTagName()訪(fǎng)問(wèn)2008-06-06
自適應(yīng)布局meta標(biāo)簽中viewport、content、width、initial-scale、minimum-sca
這篇文章主要介紹了移動(dòng)客戶(hù)端手機(jī)頁(yè)面布局時(shí)各標(biāo)簽元素作用和適用情景，通過(guò)詳解幾種屬性讓讀者更明確自適應(yīng)布局的注意點(diǎn)，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
利用Angularjs和Bootstrap前端開(kāi)發(fā)案例實(shí)戰(zhàn)
這篇文章主要為大家介紹了利用Angularjs和Bootstrap前端開(kāi)發(fā)案例實(shí)戰(zhàn)，感興趣的小伙伴們可以參考一下2016-08-08
微信小程序使用ucharts在小程序中加入橫屏展示功能的全過(guò)程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
javascript簡(jiǎn)單實(shí)現(xiàn)等比例縮小圖片的方法
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)等比例縮小圖片的方法,涉及javascript針對(duì)頁(yè)面元素屬性的讀取、運(yùn)算及設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-07-07
獲取JS中網(wǎng)頁(yè)各種高寬與位置的方法總結(jié)
本文詳細(xì)羅列了如何在javascript獲取網(wǎng)頁(yè)各種高寬及位置，內(nèi)容比較全面，有需要的可以參考一下。2016-07-07