Bootstrap3 标题样式

标题

HTML中定义的所有标题标签,从 <h1> 到 <h6>,在Bootstrap中都是可用的。并且,为了在所有浏览器下都得到一致的效果,Bootstrap还为它们提供了预定义的样式。如:

 
  1. <h1>h1. Bootstrap heading</h1>
  2. <h2>h2. Bootstrap heading</h2>
  3. <h3>h3. Bootstrap heading</h3>
  4. <h4>h4. Bootstrap heading</h4>
  5. <h5>h5. Bootstrap heading</h5>
  6. <h6>h6. Bootstrap heading</h6>

运行结果如图 2‑10所示:

标题

图2-10 标题

同时,Bootstrap还提供了 .h1 到 .h6 类,如果你希望标题拥有 <h1> 到 <h6> 的样式但又要在行内显示,就可以使用这些类。

在 <h1> 到 <h6> 标题的内部,还可以使用 <small> 标签或 .small 类来创建副标题。与标题相比,副标题的文本稍细、字体稍小、颜色稍浅。如:

 
  1. <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
  2. <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
  3. <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
  4. <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
  5. <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
  6. <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

运行结果如图 2‑11所示:

副标题

图2-11 副标题

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

猜你喜欢

转载自blog.csdn.net/ixygj197875/article/details/89784630