Bootstrap中的輔助類是什么
這篇文章將為大家詳細(xì)講解有關(guān)Bootstrap中的輔助類是什么，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創(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）
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
背景色
和情境文本顏色類一樣，使用任意情境背景色類就可以設(shè)置元素的背景。鏈接組件在鼠標(biāo)經(jīng)過時顏色會加深，就像上面所講的情境文本顏色類一樣
.bg-primary：主要，使用藍(lán)色（#337ab7）
.bg-success：成功，使用淺綠色(#dff0d8)
.bg-info：通知信息，使用淺藍(lán)色（#d9edf7）
.bg-warning：警告，使用淺黃色（#fcf8e3）
.bg-danger：危險，使用淺紫色（#f2dede）
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
文本對齊
通過文本對齊類，可以簡單方便的將文字重新對齊
.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;
}Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
【居中】
為任意元素設(shè)置 display: block 屬性并通過 margin 屬性讓其中的內(nèi)容居中
center
大小寫
通過這幾個類可以改變文本的大小寫
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}Lowercased text.
Uppercased text.
Capitalized text.
按鈕和符號
【關(guān)閉按鈕】
通過使用一個象征關(guān)閉的圖標(biāo)，可以讓模態(tài)框和警告框消失
×
【三角符號】
通過使用三角符號可以指示某個元素具有下拉菜單的功能
.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;
}
}
left
重慶分公司
重慶分公司
