bootstrap中的全局样式

一、排版--标题（h1-h6）   副标题（small）

• h1:36px
• h2:30px
• h3:24px
• h4:18px
• h5:14px
• h6:12px

<span></span>   //内联标签实现样式

bootstrap支持普通内联元素定义class=（.h1-h6）来实现相同的功能（使用内联元素直接来引用标题的样式）

eg：<span class="h1">XX</span>

注意： 在任何标题中添加一个内联子标题，只需要简单的在元素两旁添加<small>标签即可

显示的效果如下：

• h1 ~ h3 下 small 元素的大小只占父元素的 65% ，那么通过计算， h1 ~ h3 下的 small 为 23.4px 、 19.5px 、 15.6px ；
• h4 ~ h6 下 small 元素的大小只占父元素的 75% , 分别为： 13.5px 、 10.5px 、 9px 。
• 在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色： #777 ，行高为 1 ，粗度为 400

二、排版---文本

1）段落

p标签

• 默认：14px；
• 行高：20px
• 底部外边距：10px

2）对齐方式

• .text-left
• .text-center
• .text-right

3）文本标记

• class="lead"强调文本 得到更大更粗、行高更高的文本
  • eg：<p class="lead">xxx</p>
  • 
  • 
• 添加标记，<mark>元素或.mark 类(设置Mark标签是有黄色底边的)
  • eg：<p>bootstrap<mark>框架</mark></p>
  • 
  • 
• 各种加线条的文本
  • <del>XXXX</del>  //删除的文本
  • <s>XXX</s>   //无用的文本
  • <ins>XXX</ins>  //插入的文本
  • <u>XXX</u> //效果同上，下划线文本
  • 效果如下：
• 强调样式
  • <small>  设置文本为父文本大小的80%（标准字号的85%）
  • <strong> 设置文本为更粗的文本（加粗700）
  • <em> 设置文本为斜体
  • 显示效果如下：
  • 
    
• 对齐样式  设置文本对齐
  • <p class="text-left">位置居左</p>
  • <p class="text-center">位置居中</p>
  • <p class="text-right">位置居右</p>
  • <p class="text-justify">两端对齐，支持度不佳</p>
  • <p class="text-nowrap">不换行</p>