Bootstrap 巨幕 超大屏幕 key:Jumbotron - Bootstrap 工具类

Bootstrap 巨幕 超大屏幕

W3CSchool > bootstrap3中文手册 > Bootstrap 工具类 > Bootstrap 巨幕 超大屏幕

Bootstrap 超大屏幕(Jumbotron)

本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:

  • 创建一个带有 class .jumbotron. 的容器 <div>。
  • 除了更大的 <h1>,字体粗细 font-weight 被减为 200。

下面的实例演示了这点:

页面巨幕

这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

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

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

 

中文实例:

1.带圆角巨幕

欢迎登陆页面!

这是一个超大屏幕(Jumbotron)的实例。

学习更多

2.方角巨幕

欢迎登陆页面!

这是一个超大屏幕(Jumbotron)的实例。

学习更多

注:为了获得占用全部宽度且不带圆角的超大屏幕,请在所有的 .container class 外使用 .jumbotron class  请仔细观察两者的区别:

圆角与方角实例源码分别如下:
  1. <div class="container"
  2.    <div class="jumbotron"
  3.         <h1>欢迎登陆页面!</h1> 
  4.         <p>这是一个超大屏幕(Jumbotron)的实例。</p> 
  5.         <p><a class="btn btn-primary btn-lg" role="button"
  6.         学习更多</a> 
  7.       </p> 
  8.    </div> 
  9. </div> 
  1. <div class="jumbotron"
  2.     <div class="container"
  3.         <h1>欢迎登陆页面!</h1> 
  4.         <p>这是一个超大屏幕(Jumbotron)的实例。</p> 
  5.         <p><a class="btn btn-primary btn-lg" role="button"
  6.          学习更多</a> 
  7.         </p> 
  8.     </div> 
  9. </div> 

由于本站兼容问题,本文中未体现方角效果,请分离测验!

CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)