Bootstrap排版
最后更新于：2022-04-01 11:55:25
###内联子标题
< 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:文字超出部分显示为省略号
~~~