1. 程式人生 > >Bootstrap-文字樣式

Bootstrap-文字樣式

全域性的文字樣式 

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

類名強調文字內容,顏色區分

  1. .text-muted:提示,使用淺灰色(#999)
  2. .text-primary:主要,使用藍色(#428bca)
  3. .text-success:成功,使用淺綠色(#3c763d)
  4. .text-info:通知資訊,使用淺藍色(#31708f)
  5. .text-warning:警告,使用黃色(#8a6d3b)
  6. .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>