###內聯子標題
< 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>
~~~
效果如下:

圖中詳細說明了每一種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>
~~~
效果如下:

當鼠標懸停在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:文字超出部分顯示為省略號
~~~
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解