image.png
使用
markdown的视角去看bt3的基本标签修饰，是因为这些基本标签囊括了markdown所需要的元素，我们可以更加容易的去理解与熟悉它们，可以参考 markown基本语法 这篇文章。
一、标题
标题指的是 H1 - H6 共6个标题标签
它们使用500的粗体，在中文看来，不是很重，有时候要自己定义一个.b类加重。
.b{
font-weight: 700;
}
- 所有标签都有上下外边距。
- H1-H3 是20px上边距，其它的都是上下10px边距。
- 使用内联的
small标签可以展示子标题。 - 最小字号为12px, 最大为36px，不同设备可能要自行再调整。
二、引用
引用是一个有左边框、灰底的矩形容器。
- 内容可以用
p标签进行布局。 - 可以添加一个
footer标签进行底注描述来源，或者使用其它内联元素来增强显示。
三、代码
代码也是
markdown的重要组成部分， bt3同样添加了多个描述代码的标签与类
- 内联代码段
<code>，灰字红字。 - 块级代码段
<pre>, 圆角灰底框 。
可以添加.pre-scrollable来限制高度自动滚动 - 按钮
<kbd>, 显示为黑底灰字。 - 变量
<var>, 其实就是斜体。 - 代码字体
<samp>, 使用和<code><kbd><pre>同样的字体。
四、文本段落
markdown使用空白行表示文本块，bt的文本块，字号为全局的14px, 有下边距10px。
- 使用
.lead类可以创建一个稍大字号的段落，字号为21px, 细体。
五、列表
列表包括3类
无序列表ul, 有缩进，前缀点，嵌套时会不同的实心点、空心点、方点。
有序列表ol, 有缩进，前缀数字序号，嵌套时会变换序号为罗马数字、字母。
定义列表dl，无缩进，dt会为粗体，可以有多个dt与dd穿插为多组定义/描述。
- 使用
.list-unstyled可以去除缩进与前缀，ul,ol都可以使用。 - 使用
.list-inline可以让列表水平排版，有5px的左外边距，首子项会抵消以与父元素对齐。 - 使用
.dl-horizontal可以让定义列表显示为两列，使用dt右对齐，在宽度较窄的时候恢复为堆叠模式。 - 列表变形已接近排版层面，实质上导航菜单、面包屑都可以使用水平列表进行排版。
六、内联文本
内联文本有多个标签，分别表现高亮、删除线、下划线、斜体、小号、粗体、缩略样式。
- 高亮
<mark>, 浅黄底色。 - 删除线
<del>或者<s>, 表示已删除或者弃用的内容。 - 下划线
<ins>或者<u>, 表示插入或者着重的内容。 - 粗体
<b>或者<strong>, 表示重要的部分， 它使用700磅的粗体，比标题更重。 - 小号
<samll>, 它通常是父元素字号的 85%, 在标题中可以表示子标题或者备注。 - 斜体
<i>或者<em>, 还有一个<city>标签也有同样的表示。 - 缩略词
<abbr>, 它表现为90%大小的有虚下划的文本，光标为问号，通常要添加title属性。
它的可以添加一个类.initalism, 可以转换全大写，字号稍小，做为第一个单词描述。 - 地址块
<address>, 它只是一个有20px下边距的块容器，内容如果是其它内联文本，必须自已添加<br/>换行，用来表示多组地址。
七、文本对齐
文本对齐比较简单，就是左，右，中， 两端，还有一个不换行。
- 左对齐
text-left。 - 右对齐
text-right。 - 居中对齐
text-center。 - 两端对齐
text-justify, 注意如果在中文后面跟一串英文的话，有可能把中文拉得间隔非常大。 - 强制不换行
text-nowrap。
八、字母或者单词大小转换
分别有强制全大写， 强制全小写，单词首字母大写3类。
- 强制小写
text-lowercase。 - 强制大写
text-uppercase。 - 首字母大写
text-capitalize。
九、分隔线
-
<hr>标签，显示为浅灰水平线， 类似markdown中的--- - 它上下有10px的外间距。
十、文本编辑器映射
察看大部分文本编辑器的工具栏，我们可以找到90%的功能对应，也就是说这些基本标签的定义，是为了实现满足文本编辑的需求或者体现。
image.png
BT3的基本元素修饰，是为了更好的排版文本，能以简单的标签与类，很好表示一段视觉良好的文字版面，它包括了
markdown中所需要的元素，参照markdown的语法，可以更好的理解与体会这些修饰手段。
- 基本元素大多是自然堆叠排版，
h1-6、p、pre、ul、ol、dl这几个和文本关联比较紧密的块元素，都有着上下的外边距来安放文本块。
网友评论