Detaillierte Erläuterung der Hilfsklassen in Bootstrap

.text-muted：提示，使用浅灰色（#777）
.text-primary：主要，使用蓝色（#337ab7）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

<div>
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p>Etiam porta sem malesuada magna mollis euismod.</p>
    <p>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>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p>Etiam porta sem malesuada magna mollis euismod.</p>
    <p>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>Left aligned text.</p>
<p>Center aligned text.</p>
<p>Right aligned text.</p>
<p>Justified text.</p>
<p>No wrap text.</p>

<div>center</div>

.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}

<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>Capitalized text.</p>

<button><span>×</span></button>

<span></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;
}

.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

<div>
    <div>left</div>
    <div>right</div>
</div>
<div>aaa</div>

.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

<div>show</div>
<div>hidden</div>
<div>invisible</div>

<a>Skip to main content</a>

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

<h1>Custom heading</h1>