Bootstrap巨幕（Jumbotron）

巨幕

巨幕（Jumbotron）是一个轻量、灵活可扩展组件，它能延伸到整个视口宽度，主要用于展示网站的重点内容。它的标题会被加大显示，而且边距也比较大，非常适合营销类或内容类网站。

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

1. <div class="jumbotron">
2.   <h1>歪脖网</h1>
3.   <p>歪脖网是一个 Web 技术交流平台，每月帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。</p>
4.   <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
5. </div>

效果如图 3‑67所示：

图3-67 巨幕

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有.container元素的外面，并在组件内部添加一个.container元素。如：

1. <div class="jumbotron">
2.   <div class="container">
3.     ...
4.   </div>
5. </div>

关于作者

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