# Bootstrap 超大屏幕(Jumbotron)
本章將講解 Bootstrap 支持的另一個特性,超大屏幕(Jumbotron)。顧名思義該組件可以增加標題的大小,并為登陸頁面內容添加更多的外邊距(margin)。使用超大屏幕(Jumbotron)的步驟如下:
* 創建一個帶有 class **.jumbotron**. 的容器 <div>。
* 除了更大的 <h1>,字體粗細 _font-weight_ 被減為 200px。
下面的實例演示了這點:
```
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 超大屏幕(Jumbotron)</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>歡迎登陸頁面!</h1>
<p>這是一個超大屏幕(Jumbotron)的實例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
學習更多</a>
</p>
</div>
</div>
</body>
</html>
```
[](/try/tryit.php?filename=bootstrap3-jumbotron)
結果如下所示:

為了獲得占用全部寬度且不帶圓角的超大屏幕,請在所有的 **.container** class 外使用 **.jumbotron** class,如下面的實例所示:
```
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 超大屏幕(Jumbotron)</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>歡迎登陸頁面!</h1>
<p>這是一個超大屏幕(Jumbotron)的實例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
學習更多</a>
</p>
</div>
</div>
</body>
</html>
```
[](/try/tryit.php?filename=bootstrap3-jumbotron-fullwidth)
結果如下所示:

- Bootstrap 簡介
- Bootstrap 簡介
- Bootstrap 環境安裝
- Bootstrap CSS
- Bootstrap CSS 概覽
- Bootstrap 網格系統
- Bootstrap 排版
- Bootstrap 代碼
- Bootstrap 表格
- Bootstrap 表單
- Bootstrap 按鈕
- Bootstrap 圖像
- Bootstrap 幫助器類
- Bootstrap 響應式實用工具
- Bootstrap 字形圖標(Glyphicons)
- Bootstrap 下拉菜單(Dropdowns)
- Bootstrap 按鈕組
- Bootstrap 按鈕下拉菜單
- Bootstrap 輸入框組
- Bootstrap 導航元素
- Bootstrap 導航欄
- Bootstrap 面包屑導航(Breadcrumbs)
- Bootstrap 分頁
- Bootstrap 標簽
- Bootstrap 徽章(Badges)
- Bootstrap 超大屏幕(Jumbotron)
- Bootstrap 頁面標題(Page Header)
- Bootstrap 縮略圖
- Bootstrap 警告(Alerts)
- Bootstrap 進度條
- Bootstrap 多媒體對象(Media Object)
- Bootstrap 列表組
- Bootstrap 面板(Panels)
- Bootstrap Wells
- Bootstrap 插件
- Bootstrap 插件概覽
- Bootstrap 過渡效果(Transition)插件
- Bootstrap 模態框(Modal)插件
- Bootstrap 下拉菜單(Dropdown)插件
- Bootstrap 滾動監聽(Scrollspy)插件
- Bootstrap 標簽頁(Tab)插件
- Bootstrap 工具提示(Tooltip)插件
- Bootstrap 彈出框(Popover)插件
- Bootstrap 警告框(Alert)插件
- Bootstrap 按鈕(Button)插件
- Bootstrap 折疊(Collapse)插件
- Bootstrap 輪播(Carousel)插件
- Bootstrap 附加導航(Affix)插件
- Bootstrap 其它
- Bootstrap UI 編輯器
- Bootstrap HTML編碼規范
- Bootstrap CSS編碼規范
- 免責聲明