4.12　大屏幕展播

4.12　大屏幕展播

源码文件：jumbotron.less

CSS文件：bootstrap.css 4371行之后

在设计网页布局的时候，经常会有一些大屏（或大块头）内容的显示，.jumbotron样式提供的展示效果正是我们所需要的，如图4-65所示。

4.12　大屏幕展播 - 图1 图4-65　大屏幕展播效果

非常炫吧，使用方式只需要在容器元素上应用.Jumbotron样式即可。示例如下：

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>

实现该效果的jumbotron样式源码如下：

// 源码4371行
.jumbotron{                                     /*默认100%填充*/
  padding: 30px;                                        /*加大内边距*/
  margin-bottom: 30px;                          /*加大外边距*/
  color: inherit;
  background-color: #eee;                       /*背景颜色*/
}
.jumbotron h1,.jumbotron .h1 {  color: inherit; /*窄屏下，字体设置*/}
.jumbotron p {                                  /*窄屏下，行距设置*/
  margin-bottom: 15px;
  font-size: 21px;                              /*加大字体*/
  font-weight: 200;                             /*超大粗体*/
}
.container .jumbotron {  border-radius: 6px;    /*如果jumbotron放在container样式
                                                     内，则显示圆角*/ }
.jumbotron .container {  max-width: 100%;       /*如果jumbotron内部有container样
                                                     式，则最大宽度为100%*/ }
@media screen and (min-width: 768px) {          /*宽屏下的设置*/
  .jumbotron { padding-top: 48px;    padding-bottom: 48px;
                                                        /*宽屏下，加大上下内边距*/    }
  .container .jumbotron { padding-right: 60px;    padding-left: 60px;
                                                        /*宽屏下，加大左右内边距*/    }
  .jumbotron h1,  .jumbotron .h1 {    font-size: 63px;  /*宽屏下，字体加大*/  }
}

通过源码可以看出，在.jumbotron内部应用h1和p元素时，这两种元素也会进行相应的调整。从前面的HTML示例也可以看出这点。

另外，上述源码中有一个.container .jumbotron设置，也就是说，如果jumbotron放在container样式内，则显示圆角；如果不放在里面，就不会显示圆角。所以可以将.jumbotron样式从所有的.container样式容器里拿出来，然后单独放在一个地方（内部可以包含.container样式），就不再显示圆角了。示例如下：

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

最后，通过上面的后半部分的媒体查询代码，可以得知在屏幕宽度大于768像素的时候，.jumbotron样式的padding也加大了，其内部字体也增大到了63像素。而如果在窄屏下，则按上面的默认设置样式显示。

4.12 大屏幕展播