Bootstrap排版 · 致力于web前端技術撰寫

###內聯子標題 < small > 設置文本為父文本大小的 85% < strong > 設置文本為更粗的文本 < em >設置文本為斜體 P標簽的樣式： "lead":文本更大更粗、行高更高 "text-left":向左對齊 "text-center":居中對齊 "text-right":向右對齊 "text-justify":設定文本對齊,段落中超出屏幕部分文字自動換行 "text-muted":文本內容減弱 (不同的字體顏色) "text-primary":primary class "text-success":success?class "text-info":info class "text-warning":warning class "text-danger":danger class 舉例說明： ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 實例 - 上下文類</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class="row"> <div class="col-lg-6 col-lg-offset-2" style="background:#F1FFF4;padding:20px;"> <p>這是一行普通文字</p> <p class="lead">這是帶有lead類的文字(加粗加大行高更多,line-height:1.4;font-weight:300;margin-bottom:20px;)</p> <p class="text-center">這是帶有text-center類的文字（居中對齊,text-align: center;）</p> <p class="text-right">這是帶有text-right類的文字（局右對齊,text-align: right;）</p> <p class="text-justify">這是帶有text-justify類的文字(text-align: justify)</p> <p class="text-muted">這是帶有text-muted類的文字(減弱,color:#777)</p> <p class="text-primary">這是帶有text-primary類的文字(color: #337AB7)</p> <p class="text-success">這是帶有text-success類的文字(color: #3C763D)</p> <p class="text-info">這是帶有text-info類的文字(color: #31708F)</p> <p class="text-warning">這是帶有text-warning類的文字(color: #8A6D3B)</p> <p class="text-danger">這是帶有text-danger類的文字(color: #A94442)</p> </div> </div> </div> </body> </html> ~~~ 效果如下： ![](https://box.kancloud.cn/2016-04-07_570603f2c3490.jpg) 圖中詳細說明了每一種class的樣式，當然如果默認樣式不是自己想要的，完全可以更改bootstrap.min.css文件。縮寫HTML 元素提供了用于縮寫的標記，比如 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（<abbr> title 屬性中的內容）。添加 .initialism 到 <abbr>，會得到較小的字體。 ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 實例 - 上下文類</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class="row"> <div class="col-lg-4 col-lg-offset-2" style="background:#F1FFF4;padding:20px;"> <abbr title="World Wide Web">WWW</abbr><br> <abbr title="Small Office Home Office">SOHO</abbr> </div> </div> </div> </body> </html> ~~~ 效果如下： ![](https://box.kancloud.cn/2016-04-07_570603f2dd976.jpg) 當鼠標懸停在WWW或者是SOHO上時，鼠標右下方會出現一個？號，并且會顯示abbr的title屬性中的值，如WWW右下角顯示（World Wide Web），SOHO右下角顯示（Small Office Home Office） ### 地址（Address） < address > 默認為 display:block;需要使用標簽來為封閉的地址文本(當地址文本使用的是strong，abbr,a這些行內元素時)添加換行。 < address >標簽并無特殊之處，其默認的CSS樣式為： ~~~ address { ??? margin-bottom: 20px; ??? font-style: normal; ??? line-height: 1.42857; } ~~~ 引用（Blockquote）可以在任意的 HTML文本旁使用默認的 < blockquote >，其他選項包括，添加一個 < small > 標簽來標識引用的來源，使用class .pull-right 向右對齊引用。例如： ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 實例 - 上下文類</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class="row"> <div class="col-lg-6 col-lg-offset-2" style="background:#F1FFF4;padding:20px;"> <blockquote> <p>這是一個默認的引用實例。</p> </blockquote> <blockquote>這是一個帶有源標題(title = "Source Title")的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite> </small> </blockquote> <blockquote class="pull-right">這是一個向右對齊(class = "pull-right")的引用(帶有原標題)。 <small>Someone famous in <cite title="Source Title">Source Title</cite> </small> </blockquote> </div> </div> </div> </body> </html> ~~~ 效果如下： ![](https://box.kancloud.cn/2016-04-07_570603f2f039c.jpg) pull-right的樣式： ~~~ blockquote.pull-right { ??? padding-right: 15px; ??? padding-left: 0px; ??? text-align: right; ??? border-right: 5px solid #EEE; ??? border-left: 0px none; float: right !important; ~~~ } 列表Bootstrap 支持有序列表、無序列表和定義列表。有序列表：有序列表是指以數字或其他有序字符開頭的列表(ol/li)。無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的著重號開頭的列表。如果您不想顯示這些著重號，您可以使用 class .list-unstyled 來移除樣式。您也可以通過使用 class .list-inline 把所有的列表項放在同一行中(ul/li)。定義列表：在這種類型的列表中，每個列表項可以包含 < dt > 和 < dd > 元素。< dt > 代表定義術語，就像字典，這是被定義的屬于（或短語）。接著，< dd > 是 < dt > 的描述。可以使用 class dl-horizontal 把 < dl > 行中的屬于與描述并排顯示。 ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Bootstrap 實例 - 上下文類</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class = "container"> <div class="row"> <div class="col-lg-6 col-lg-offset-2" style="background:#F1FFF4;padding:20px;"> <h4>有序列表</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>無序列表</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>無樣式列表(list-unstyled)</h4> <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>內聯列表(list-inline)</h4> <ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定義列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定義列表</h4> <dl class="dl-horizontal"> <dt>Description你好你好你好你好你好1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> </div> </div> </div> </body> </html> ~~~ 效果如下： ![](https://box.kancloud.cn/2016-04-07_570603f30e028.jpg) 關于樣式做一點說明：無樣式列表： ~~~ .list-unstyled { ??? padding-left: 0px; ??? list-style: outside none none; } 內聯列表： .list-inline { ??? padding-left: 0px; ??? margin-left: -5px; ??? list-style: outside none none; } 水平的定義列表 .dl-horizontal dt { ??? float: left; ??? width: 160px; ??? overflow: hidden; ??? clear: left; ??? text-align: right; ??? white-space: nowrap; ??? text-overflow: ellipsis; } white-space:nowrap;強制不換行 text-overflow:ellipsis:文字超出部分顯示為省略號 ~~~