天天看點

響應式前端架構Bootstrap系列(3)段落、文字相關

本篇主要分享關于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>
           

效果圖:

響應式前端架構Bootstrap系列(3)段落、文字相關

段落背景顔色設定與上例樣式類似,如表示“主要”含義,用樣式.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>
           

效果圖:

響應式前端架構Bootstrap系列(3)段落、文字相關

另外,段落對齊方式有:左對齊(.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>
           

效果圖:

響應式前端架構Bootstrap系列(3)段落、文字相關

代碼顯示,是指在文本中單獨顯示單獨代碼标簽或代碼塊,前者用<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>
           

效果圖:

響應式前端架構Bootstrap系列(3)段落、文字相關

繼續閱讀