第六章之輔組類與響應(yīng)式工具
Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。
學(xué)習(xí)要點(diǎn)：
1.輔組類
2.響應(yīng)式工具
本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 的輔組類和響應(yīng)式工具， 輔助類提供了一組類來(lái)輔組頁(yè)面設(shè)計(jì)，而響應(yīng)式工具則利用媒體查詢顯示或隱藏某些內(nè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)式工具
在媒體查詢時(shí)，針對(duì)不同的屏幕大小，有時(shí)需要顯示和隱藏部分內(nèi)容。響應(yīng)式工具類，就提供了這種解決方案。
//超小屏幕激活顯示 <div class="visible-xs-block a">Bootstrap</div> //超小屏幕激活隱藏 <div class="hidden-xs a">Bootstrap</div>
注：對(duì)于顯示的內(nèi)容，有三種變體，分別為：block、inline-block、inline。
以上所述是小編給大家介紹的BootStrap組件之輔組類與響應(yīng)式工具的相關(guān)內(nèi)容，希望對(duì)大家有所幫助！
相關(guān)文章
echarts實(shí)現(xiàn)排名柱狀圖的示例代碼
在ECharts中,可以通過(guò)設(shè)置數(shù)據(jù)的順序來(lái)控制柱狀圖的排序,本文就介紹了echarts實(shí)現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
jquery div模態(tài)窗口的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery div模態(tài)窗口的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
uniapp項(xiàng)目?jī)?yōu)化方式及建議
性能優(yōu)化自古以來(lái)就是重中之重，本文關(guān)于uniapp項(xiàng)目?jī)?yōu)化方式最全整理，會(huì)根據(jù)開(kāi)發(fā)情況進(jìn)行補(bǔ)充，感興趣的可以了解一下2021-08-08
這篇文章主要教大家如何利用Bootstrap3制作圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
Javascript圖像處理—圖像形態(tài)學(xué)(膨脹與腐蝕)
上一篇文章，我們講解了圖像處理中的閾值函數(shù),這一篇文章我們來(lái)做膨脹和腐蝕函數(shù)2013-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap 3多級(jí)下拉菜單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了javascript圖片預(yù)加載的方法,實(shí)例分析了javascript實(shí)現(xiàn)圖片預(yù)加載的方法與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
上傳文件返回的json數(shù)據(jù)會(huì)被提示下載問(wèn)題解決方案
這篇文章主要介紹了項(xiàng)目中python+js實(shí)現(xiàn)的上傳文件返回的json數(shù)據(jù)會(huì)被提示下載問(wèn)題解決方案,需要的朋友可以參考下2014-12-12
最近發(fā)現(xiàn)JS當(dāng)中toFixed()方法存在一些問(wèn)題，采用原生的Number對(duì)象的原型對(duì)象上的toFixed()方法時(shí)，規(guī)則并不是所謂的“四舍五入”或者是四舍六入五成雙2012-11-11
這篇文章主要介紹了antd Upload 文件上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12