Bootstrap響應式前端框架筆記二——排版標籤與類

Bootstrap響應式前端框架筆記二——排版標籤與類

    Bootstrap中對h標籤的字體和字號進行了微調，開發者除了能夠直接使用這些標籤進行標題的修飾外，還可使用.h1到.h6類來將其餘元素的字體進行修飾，示例以下：

<p>h1 到 h6 標籤的樣式</p>
		<h1>h1. Bootstrap heading</h1>
		<h2>h2. Bootstrap heading</h2>
		<h3>h3. Bootstrap heading</h3>
		<h4>h4. Bootstrap heading</h4>
		<h5>h5. Bootstrap heading</h5>
		<h6>h6. Bootstrap heading</h6>
		<hr />
		<p>.h1 到 .h6 類的樣式</p>
		<div class="h1">h1. Bootstrap heading</div>
		<div class="h2">h1. Bootstrap heading</div>
		<div class="h3">h1. Bootstrap heading</div>
		<div class="h4">h1. Bootstrap heading</div>
		<div class="h5">h1. Bootstrap heading</div>
		<div class="h6">h1. Bootstrap heading</div>

    在標題或者其餘標籤中使用small標籤或者small類能夠添加內部副標題，副標題除了字號會進行縮小調整外，還會修改文字的顏色，示例以下：

<p>可使用small標籤或者.samll類來向標題中添加副標題</p>
		<h3>h3標題 <small>small標籤副標題</small></h3>
		<span class="h3">h3Class類 <span class="small">small類副標題</span></span>

效果以下：

    使用.lead能夠實現段落的強調顯示，示例以下：

<p>這是一個普通段落</p>
		<p class="lead">這是一個強調段落</p>
		<p>這是一個普通段落</p>

效果以下：

    使用mark標籤或者mark類能夠進行特殊文本的標記，以下：

<p>使用mark標籤能夠實現部分文本進行標記</p>
		<div class="mark">進行<mark>特殊文字</mark>的標記</div>

效果以下：

    使用del標籤或者s標籤能夠實現對文本添加刪除線效果，以下：

<p>使用del標籤或者s標籤能夠實現文本的刪除效果</p>
		<del>del標籤的刪除效果</del>
		<br />
		<s>s標籤的刪除效果</s>

效果以下：

    使用ins標籤或者u標籤能夠實現爲本文添加下劃線效果，示例以下：

<p>使用ins標籤或者u標籤能夠實現文本添加下劃線</p>
		<ins>ins標籤的下劃線效果</ins>
		<br />
		<u>u標籤的下劃線效果</u>

效果以下：

    使用strong標籤能夠對特殊本文進行着重標記，以下:

<p>使用strong標籤能夠實現對特殊文本進行着重標記</p>
		<div>進行文本的<strong>着重</strong>標記</div>

效果以下圖

    使用em標籤能夠進行特殊文本的斜體處理，以下：

<p>使用em標籤能夠進行文本的斜體處理</p>
		<p>進行<em>特殊文本</em>的斜體處理</p>

效果以下：

    使用text-left類能夠實現文本的左對齊佈局，與之對應text-center將文本進行中心對齊佈局，text-right類來將文本進行右對齊佈局，text-justufy類設置文本進行自適應對齊，text-nowarp類將設置文本不換行的進行佈局，示例以下：

<mark>text-left類進行左對齊佈局</mark>
		<p class="text-left ">文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。文本左對齊排版。</p>
		<mark>text-center類進行中心對齊佈局</mark>
		<p class="text-center ">文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。文本居中對齊。</p>
		<mark>text-right類進行右對齊佈局</mark>
		<p class="text-right ">文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。文本右對齊。</p>
		<mark>text-justify類進行自適應佈局</mark>
		<p class="text-justify ">正常方向佈局。正常方向佈局。正常方向佈局。正常方向佈局。正常方向佈局。正常方向佈局。正常方向佈局。正常方向佈局。正常方向佈局。正常方向佈局。</p>
		<mark>text-nowarp類進行不換行佈局</mark>
		<p class="text-nowrap">不換行佈局。不換行佈局。不換行佈局。不換行佈局。不換行佈局。不換行佈局。不換行佈局。不換行佈局。不換行佈局。不換行佈局。</p>

效果以下圖：

        text-lowercase類能夠將全部修飾的文本轉換成小寫，與之對應text-uppercase類能夠將全部修飾的文本轉換成大寫，text-capitalize類則只會處理每一個單詞的首字母，將其轉換爲大寫。示例以下：

<mark>將全部字母轉換成小寫字母</mark>
		<p class="text-lowercase">My name is Jaki.</p>
		<mark>將全部字母轉換成大寫字母</mark>
		<p class="text-uppercase">My name is Jaki.</p>
		<mark>將全部單詞首字母字母轉換成大寫字母</mark>
		<p class="text-capitalize">My name is Jaki.</p>

效果以下圖：

    使用abbr標籤能夠進行某些內容的縮略顯示，示例以下：

使用abbr標籤能夠將某些文本進行縮略設置，當鼠標放置在對應文本上時，會顯示標籤中title所設置的內容
		<abbr title="這個是詳細信息">信息</abbr>

效果以下：

    若是要在頁面中進行內容的引用，可使用blockquote標籤進行包裹，在blockquote標籤中能夠繼續嵌套footer標籤來進行引用的標註，以下：

使用blockquote標籤能夠進行內容的引用，其中能夠嵌套fooer標籤進行標註
		<blockquote>
			<p>冰凍三尺，非一日之寒。</p>
			<footer>俗語</footer>
		</blockquote>

    效果以下圖所示：

    .blockquote-reverse類能夠將blockquote中的內容進行右對齊，示例以下：

<hr /> 使用blockquote標籤能夠進行內容的引用，其中能夠嵌套fooer標籤進行標註
		<blockquote class="blockquote-reverse">
			<p>冰凍三尺，非一日之寒。</p>
			<footer>俗語</footer>
		</blockquote>

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/typeset.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536