Bootstrap 超大屏幕 Jumbotron class的用法教程

1、明确自己要的效果，如图。

2、写出基本的bootstrap模板。

3、使用Jumbotron class写HTML代码。

<div class="jumbotron">

<div class="container">

<hgroup>

<h1>关于</h1>

<h4>关于jumbotron的使用教程...</h4>

</hgroup>

</div>

</div>

注意：获得不带圆角的超大屏幕只需要把类名jumbotron写到类名container外面。

4、写CSS代码。

/*默认移动CSS代码*/

.jumbotron { color:#ccc;background-image: url("../img/bg.jpg"); margin-top: 50px;}

.jumbotron h1 {font-size: 26px; padding-left: 20px;}

.jumbotron h4 {font-size: 15px; padding-left: 20px;}

/* 小屏幕（平板，大于等于768px） */

@media (min-width: 768px) {

.jumbotron h1 {font-size: 26px;}

.jumbotron h4 {font-size: 15px;}

}

/* 中等屏幕（桌面显示器，大于等于992px） */

@media (min-width: 992px) {

.jumbotron h1 {font-size: 36px;}

.jumbotron h4 {font-size: 18px;}

}

5、浏览器查看效果。

1、将container class 在jumbotron class 外使用即可

<div class="container">

<div class="jumbotron">

<hgroup>

<h1>关于</h1>

<h4>关于jumbotron的使用教程...</h4>

</hgroup>

</div>

</div>

2、CSS样式同上。测试浏览器效果如图，四角都是圆角，默认有一个border-radius属性。