這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap中的輔助類是什么,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)于2013年開始,先為和縣等服務(wù)建站,和縣等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為和縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
Bootstrap提供了一組工具類,用于輔助項目的開發(fā)。本篇文章給大家詳細(xì)介紹一下Bootstrap中的輔助類。
通過顏色來展示意圖,Bootstrap 提供了一組工具類。這些類可以應(yīng)用于鏈接,并且在鼠標(biāo)經(jīng)過時顏色可以還可以加深,就像默認(rèn)的鏈接一樣
.text-muted:提示,使用淺灰色(#777) .text-primary:主要,使用藍(lán)色(#337ab7) .text-success:成功,使用淺綠色(#3c763d) .text-info:通知信息,使用淺藍(lán)色(#31708f) .text-warning:警告,使用黃色(#8a6d3b) .text-danger:危險,使用褐色(#a94442)
<div> <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> </div>
和情境文本顏色類一樣,使用任意情境背景色類就可以設(shè)置元素的背景。鏈接組件在鼠標(biāo)經(jīng)過時顏色會加深,就像上面所講的情境文本顏色類一樣
.bg-primary:主要,使用藍(lán)色(#337ab7) .bg-success:成功,使用淺綠色(#dff0d8) .bg-info:通知信息,使用淺藍(lán)色(#d9edf7) .bg-warning:警告,使用淺黃色(#fcf8e3) .bg-danger:危險,使用淺紫色(#f2dede)
<div> <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> </div>
通過文本對齊類,可以簡單方便的將文字重新對齊
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-nowrap { white-space: nowrap; }
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
【居中】
為任意元素設(shè)置 display: block
屬性并通過 margin
屬性讓其中的內(nèi)容居中
<div class="center-block" style="width:100px;">center</div>
通過這幾個類可以改變文本的大小寫
.text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; }
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
【關(guān)閉按鈕】
通過使用一個象征關(guān)閉的圖標(biāo),可以讓模態(tài)框和警告框消失
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span>
【三角符號】
通過使用三角符號可以指示某個元素具有下拉菜單的功能
<span class="caret"></span>
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid \9; border-right: 4px solid transparent; border-left: 4px solid transparent; }
通過添加一個類,可以將任意元素向左或向右浮動。!important
被用來明確 CSS 樣式的優(yōu)先級
[注意]排列導(dǎo)航條中的組件時可以使用.navbar-left
或 .navbar-right
【清除浮動】
通過為父元素添加 .clearfix
類可以很容易地清除浮動(float
)
.pull-left { float: left !important; } .pull-right { float: right !important; }
.clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
<div class="clearfix"> <div class="pull-left">left</div> <div class="pull-right">right</div> </div> <div>aaa</div>
【顯示隱藏內(nèi)容】
.show
和 .hidden
類可以強(qiáng)制任意元素顯示或隱藏(對于屏幕閱讀器也能起效)。這些類通過 !important
來避免 CSS 樣式優(yōu)先級問題
另外,.invisible
類可以被用來僅僅影響元素的可見性,也就是說,元素的 display
屬性不被改變,并且這個元素仍然能夠影響文檔流的排布
[注意]這些類只對塊級元素起作用
.show { display: block !important; } .hidden { display: none !important; } .invisible { visibility: hidden; }
<div class="show">show</div> <div class="hidden">hidden</div> <div class="invisible">invisible</div>
【屏幕閱讀器】
.sr-only
類可以對屏幕閱讀器以外的設(shè)備隱藏內(nèi)容。.sr-only
和 .sr-only-focusable
聯(lián)合使用的話可以在元素有焦點(diǎn)的時候再次顯示出來(例如,使用鍵盤導(dǎo)航的用戶)
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
【圖片替換】
使用 .text-hide
類或?qū)?yīng)的 mixin 可以用來將元素的文本內(nèi)容替換為一張背景圖。
.text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }
<h2 class="text-hide" style="height:30px;background:url('http://via.placeholder.com/30x30') no-repeat;">Custom heading</h2>
關(guān)于“Bootstrap中的輔助類是什么”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
分享文章:Bootstrap中的輔助類是什么
鏈接分享:http://bm7419.com/article30/pcijso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)