本篇主要分享關于bs中段落、文本的元件樣式,是一些較簡單的樣式實作。
段落元素用<p>表示,較常用與段落元素樣式有:文字顔色、背景顔色和對齊方式。
文字顔色樣式主要有以下6種:
.text-muted:減弱
.text-primary:主要
.text-success:成功
.text-info:資訊
.text-warning:警告
.text-danger:危險
示範代碼:
<div style="font-size: 16px;">
<p>原始</p>
<p class="text-muted">減弱 text-muted</p>
<p class="text-primary">主要 text-primary</p>
<p class="text-success">成功text-success</p>
<p class="text-info">資訊 text-info</p>
<p class="text-warning">警告 text-warning</p>
<p class="text-danger">危險 text-danger</p>
</div>
效果圖:

段落背景顔色設定與上例樣式類似,如表示“主要”含義,用樣式.bg-primary,示範代碼如下:
<div style="font-size: 16px;">
<p class="bg-primary">Bootstrap輔助類文本樣式:主要</p>
<p class="bg-success">Bootstrap輔助類文本樣式:成功</p>
<p class="bg-info">Bootstrap輔助類文本樣式:資訊</p>
<p class="bg-warning">Bootstrap輔助類文本樣式:警告</p>
<p class="bg-danger">Bootstrap輔助類文本樣式:危險</p>
</div>
效果圖:
另外,段落對齊方式有:左對齊(.text-left)、右對齊(.text-right)、居中對齊(.text-center)。
文字相關樣式有:詞語縮寫、引用名言和代碼顯示。
詞語縮寫,是指定義一個詞語,滑鼠移動到詞語上時,會有一個“?”号出現,并附帶tip提示。詞語縮寫用<abbr>标簽表示,當加上樣式.initialism時表示字母自動變為大寫。
示範代碼:
<abbr title="來自 Twitter,是目前很受歡迎的前端架構。">Bootstrap架構</abbr>
<br>
<br>
<abbr title="來自 Twitter,是目前很受歡迎的前端架構。" class="initialism">Bootstrap架構</abbr>
引用名言,用于表示它所包含的文本對某個參考文獻的引用,比如書籍或者雜志的标題,用 <cite>标簽表示,常與<small>标簽配合使用。示範代碼:
<blockquote>
床前明月光,疑是地上霜。<br />
舉頭望明月,低頭思故鄉。
<small style="margin-left: 100px;">摘自 <cite title="靜夜思">靜夜思</cite></small>
</blockquote>
效果圖:
代碼顯示,是指在文本中單獨顯示單獨代碼标簽或代碼塊,前者用<code>表示,後者用用<pre>表示。
<body>
<p>單獨元素,使用 <code> 标簽:</p>
<code><header></code>
<br />
<br />
<p>獨立的塊元素,使用 <pre> 标簽:</p>
<pre class="pre-scrollable">
<article>
<h1>Article Heading</h1>
</article>
</pre>
</body>
效果圖: