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>
效果如下:
使用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>
<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">
另外,本篇部落格中所有的執行個體代碼及顯示效果,在如下位址中,需要的可以自行對照學習。
http://zyhshao.github.io/bootStrapDemo/typeset.html。