天天看點

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>

效果如下:

Bootstrap響應式前端架構筆記二——排版标簽與類

   使用mark标簽或者mark類可以進行特殊文本的标記,如下:

 <p>使用mark标簽可以實作部分文本進行标記</p>

 <div class="mark">進行<mark>特殊文字</mark>的标記</div>

Bootstrap響應式前端架構筆記二——排版标簽與類

   使用del标簽或者s标簽可以實作對文本添加删除線效果,如下:

 <p>使用del标簽或者s标簽可以實作文本的删除效果</p>

 <del>del标簽的删除效果</del>

 <br />

 <s>s标簽的删除效果</s>

Bootstrap響應式前端架構筆記二——排版标簽與類

   使用ins标簽或者u标簽可以實作為本文添加下劃線效果,示例如下:

 <p>使用ins标簽或者u标簽可以實作文本添加下劃線</p>

 <ins>ins标簽的下劃線效果</ins>

 <u>u标簽的下劃線效果</u>

Bootstrap響應式前端架構筆記二——排版标簽與類

   使用strong标簽可以對特殊本文進行着重标記,如下:

 <p>使用strong标簽可以實作對特殊文本進行着重标記</p>

 <div>進行文本的<strong>着重</strong>标記</div>

效果如下圖

Bootstrap響應式前端架構筆記二——排版标簽與類

   使用em标簽可以進行特殊文本的斜體處理,如下:

 <p>使用em标簽可以進行文本的斜體處理</p>

 <p>進行<em>特殊文本</em>的斜體處理</p>

Bootstrap響應式前端架構筆記二——排版标簽與類

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

效果如下圖:

Bootstrap響應式前端架構筆記二——排版标簽與類

       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>

Bootstrap響應式前端架構筆記二——排版标簽與類

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