标题
<h1>36px .h1
<h2>30px .h2
<h3>24px .h3
<h4>18px .h4
<h5>14px .h5
<h6>12px .h6
<small> 当前字体的65% .small
前面4个各差6px,h4-h5差4px,h5-h6差2px
.h*是为了给inline的文本赋予标题的样式
为副标题,.small也可以定义副标题或给inline的文本定义副标题样式
全局
<body>
默认
font-size: 14px;
line-height: 1.42857143;(倍字体)
color: #333;
background: #fff;
<p>
默认
margin-top: 10px
.lead
margin-bottom: 20px;
font-weight: 300;
line-height: 1.4;
margin-top: 10px
1. 屏幕宽768px以上font-size: 21px;
2. 屏幕宽768px以下font-size: 16px;
inline
文本元素
<mark>
标记标签
padding: .2em;
background-color: #fcf8e3;
color:#000;
<del>
删除线,删除的文本 | <s>
无用的文本
text-decoration: line-through;
两个标签展示的效果一样,只是是给搜索引擎看的,<s>是给用户看的。
<ins>
插入的文本 | <u>
带下划线的文本
text-decoration: underline
两个标签展示的效果也一样,<ins>是给搜索引擎看的,<u>是给用户看的
<small>
| .small
( 小号文本 )
font-size: 85% // 当前字体的85%
在inline
文本内为当前字体的85%,和在<h*>
内展示不同。
<strong>
和 <em>
(着重强调和斜体强调)
对齐
.text-left // 左对齐
.text-center // 居中对齐
.text-right // 右对齐
.text-justify // 分散对齐
.text-noerap // 不换行
文本大小写
.text-lowercase // 转小写
.text-uppercase // 转大写
.text-capitalize // 首字母大写
<abbr>
缩列语
cursor: help;
border-bottom: 1px dotted #777;
text-decoration:none; // 取消浏览器默认样式
.initialism
(首字母缩略语)
font-size: 90%;
text-transform: uppercase;
给<abbr>
添加会比当前字体小一些。
<blockquote>
引用
默认左边
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
.blockquote-reverse
右边
padding-right: 15px;
padding-left: 0;
text-align: right;
border-right: 5px solid #eee;
border-left: 0;
列表
.list-unstyled
( 移除默认list-style
)
只针对直接<li>
.inline-block
内联
.display:inline-block;
只针对直接<li>
.dl-horizontal
使得<dl><dt><dd>
水平排列
1. 屏幕width>768px时
dt style
.dl-horizontal dt {
width:180px;(超出会出现三个小点的省列号)
float: left;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
dl style
.dl-horizontal dd {
margin-left: 180px;
}
2. 屏幕width<768px时
.dl-horizontal dt,.dl-horizontal dd {
width:100%;
}