Bootstrap 排版

排版

Bootstrap提供了个排版组件：Hero unit 和 Page header。Hero unit 是一个轻量级的可扩展组件，主要用于展示网站的重点内容。Page header 用于简单地为页面的头部设置一个独立的空间。

Hero unit

Hero unit是一个轻量、灵活组件，用于展示网站的重点内容，它的标题会被加大显示，而且边距也比较大，非常适合营销类或内容类网站。

要在页面中放置一个Hero unit，只要给容器 <div> 添加 .hero-unit 类即可，还可以添加标题、说明性文本、按钮等，标题可以使用从 <h1> 到 <h6> 的任意标签。如：

1. <div class="hero-unit">
2.   <h1>Hello, world!</h1>
3.   <p>This is a simple hero unit, …to featured content or information.</p>
4.   <p>
5.     <a class="btn btn-primary btn-large">Learn more</a>
6.   </p>
7. </div>

效果如图 4‑49所示：

图4-49 Bootstrap排版组件Hero unit

关于作者

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