Bootstrap排版
阿新 • • 發佈：2019-02-09
縮寫
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>
當滑鼠懸停在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>
效果如下：
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>效果如下：
關於樣式做一點說明：
無樣式列表：
.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:文字超出部分顯示為省略號