Bootstrap3实用教程
3.12 巨幕
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

巨幕(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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验