学习Bootstrap3之文本编辑

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同样添加了多个描述代码的标签与类

• 内联代码段 ，灰字红字。
• 块级代码段

  , 圆角灰底框 。
   可以添加 .pre-scrollable 来限制高度自动滚动

• 按钮 , 显示为黑底灰字。
• 变量 , 其实就是斜体。
• 代码字体 , 使用和

  同样的字体。

四、文本段落

markdown 使用空白行表示文本块，bt的文本块，字号为全局的14px, 有下边距10px。

• 使用.lead类可以创建一个稍大字号的段落，字号为21px, 细体。

五、列表

列表包括3类
无序列表ul, 有缩进，前缀点，嵌套时会不同的实心点、空心点、方点。
有序列表ol, 有缩进，前缀数字序号，嵌套时会变换序号为罗马数字、字母。
定义列表dl，无缩进，dt会为粗体，可以有多个dt与dd穿插为多组定义/描述。

• 使用 .list-unstyled 可以去除缩进与前缀，ul, ol 都可以使用。
• 使用 .list-inline 可以让列表水平排版，有5px的左外边距，首子项会抵消以与父元素对齐。
• 使用 .dl-horizontal 可以让定义列表显示为两列，使用dt右对齐，在宽度较窄的时候恢复为堆叠模式。
• 列表变形已接近排版层面，实质上导航菜单、面包屑都可以使用水平列表进行排版。

六、内联文本

内联文本有多个标签，分别表现高亮、删除线、下划线、斜体、小号、粗体、缩略样式。

• 高亮, 浅黄底色。
• 删除线 或者 , 表示已删除或者弃用的内容。
• 下划线 或者 , 表示插入或者着重的内容。
• 粗体 或者 , 表示重要的部分， 它使用700磅的粗体，比标题更重。
• 小号 , 它通常是父元素字号的 85%, 在标题中可以表示子标题或者备注。
• 斜体 或者 , 还有一个 标签也有同样的表示。
• 缩略词 , 它表现为90%大小的有虚下划的文本，光标为问号，通常要添加title属性。
  它的可以添加一个类 .initalism, 可以转换全大写，字号稍小，做为第一个单词描述。
• 地址块
  , 它只是一个有20px下边距的块容器，内容如果是其它内联文本，必须自已添加
换行，用来表示多组地址。

七、文本对齐

文本对齐比较简单，就是左，右，中， 两端，还有一个不换行。

• 左对齐 text-left。
• 右对齐 text-right。
• 居中对齐 text-center。
• 两端对齐 text-justify, 注意如果在中文后面跟一串英文的话，有可能把中文拉得间隔非常大。
• 强制不换行 text-nowrap。

八、字母或者单词大小转换

分别有强制全大写， 强制全小写，单词首字母大写3类。

• 强制小写 text-lowercase。
• 强制大写 text-uppercase。
• 首字母大写 text-capitalize。

九、分隔线

• ---

  标签，显示为浅灰水平线， 类似 markdown 中的 ---
• 它上下有10px的外间距。

十、文本编辑器映射

察看大部分文本编辑器的工具栏，我们可以找到90%的功能对应，也就是说这些基本标签的定义，是为了实现满足文本编辑的需求或者体现。

image.png

---

BT3的基本元素修饰，是为了更好的排版文本，能以简单的标签与类，很好表示一段视觉良好的文字版面，它包括了markdown中所需要的元素，参照 markdown的语法，可以更好的理解与体会这些修饰手段。

• 基本元素大多是自然堆叠排版，h1-6、p、pre、ul、ol、dl 这几个和文本关联比较紧密的块元素，都有着上下的外边距来安放文本块。