Bootstrap中的輔助類是什么

這篇文章將為大家詳細講解有關Bootstrap中的輔助類是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

 Bootstrap提供了一組工具類，用于輔助項目的開發。本篇文章給大家詳細介紹一下Bootstrap中的輔助類。

文本色

　　通過顏色來展示意圖，Bootstrap 提供了一組工具類。這些類可以應用于鏈接，并且在鼠標經過時顏色可以還可以加深，就像默認的鏈接一樣

.text-muted：提示，使用淺灰色（#777）
.text-primary：主要，使用藍色（#337ab7）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#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>

背景色

　　和情境文本顏色類一樣，使用任意情境背景色類就可以設置元素的背景。鏈接組件在鼠標經過時顏色會加深，就像上面所講的情境文本顏色類一樣

.bg-primary：主要，使用藍色（#337ab7）
.bg-success：成功，使用淺綠色(#dff0d8)
.bg-info：通知信息，使用淺藍色（#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>

【居中】

　　為任意元素設置 display: block 屬性并通過 margin 屬性讓其中的內容居中

<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>

按鈕和符號

【關閉按鈕】

　　通過使用一個象征關閉的圖標，可以讓模態框和警告框消失

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</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 樣式的優先級

　　[注意]排列導航條中的組件時可以使用.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>

隱藏

【顯示隱藏內容】

　　.show 和 .hidden 類可以強制任意元素顯示或隱藏(對于屏幕閱讀器也能起效)。這些類通過 !important 來避免 CSS 樣式優先級問題

　　另外，.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 類可以對屏幕閱讀器以外的設備隱藏內容。.sr-only 和 .sr-only-focusable 聯合使用的話可以在元素有焦點的時候再次顯示出來（例如，使用鍵盤導航的用戶）

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

【圖片替換】

　　使用 .text-hide 類或對應的 mixin 可以用來將元素的文本內容替換為一張背景圖。

.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>

關于“Bootstrap中的輔助類是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。