Bootstrap-文字樣式
阿新 • • 發佈:2018-12-21
全域性的文字樣式
<p>全域性文字字號為14px(font-size);<br>
行高為1.42857143(line-height),大約是20px;<br>
顏色為深灰色(#333);<br>
字型為"Helvetica Neue", Helvetica, Arial, sans-serif;<br>
預設情況之下,p元素具有一個上下外邊距,並且保持一個行高的高度(p元素的margin值)。
</p>
強調內容
<p class="lead">強調的段落內容會增大文字字號(16px),加粗文字(200),而且對行高(1.4)和margin(底部20px)也做相應的處理</p> <p>對部分內容<strong>加粗(bold)</strong>處理</p> <p>對部分內容<b>加粗(bold)</b>處理</p> <p>對部分內容<small>縮小</small>處理</p> <p>對部分內容<cite>斜體</cite>處理</p> <p>對部分內容<em>斜體</em>處理</p> <p>對部分內容<i>斜體</i>處理</p>
類名強調文字內容,顏色區分
- .text-muted:提示,使用淺灰色(#999)
- .text-primary:主要,使用藍色(#428bca)
- .text-success:成功,使用淺綠色(#3c763d)
- .text-info:通知資訊,使用淺藍色(#31708f)
- .text-warning:警告,使用黃色(#8a6d3b)
- .text-danger:危險,使用褐色(#a94442)
<p class="text-muted">你該學習了</p> <p class="text-primary">你的主要任務就是學習</p> <p class="text-success">你學的很棒</p> <p class="text-info">08:00-23:00為學習時間</p> <p class="text-warning">再不學習你就慘了</p> <p class="text-danger">you are so bad</p>
文字對齊方式
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我兩端對齊(有問題的,慎用)</p>