Bootstrap巨幕(Jumbotron)
巨幕
巨幕(Jumbotron)是一个轻量、灵活可扩展组件,它能延伸到整个视口宽度,主要用于展示网站的重点内容。它的标题会被加大显示,而且边距也比较大,非常适合营销类或内容类网站。
要在页面中放置一个巨幕,只要给容器 <div>
添加 .jumbotron
类即可,还可以添加标题、说明性文本、按钮等,标题可以使用从 <h1>
到 <h6>
的任意标签。如:
<div class="jumbotron">
<h1>歪脖网</h1>
<p>歪脖网是一个 Web 技术交流平台,每月帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
</div>
效果如图 3‑67所示:
图3-67 巨幕
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,请把此组件放在所有.container
元素的外面,并在组件内部添加一个.container
元素。如:
<div class="jumbotron">
<div class="container">
...
</div>
</div>
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。