Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對象（Media Object）
Bootstrap 分頁
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
文字
Bootstrap 超大屏幕（Jumbotron）
本章將講解 Bootstrap 支持的另一個(gè)特性，超大屏幕（Jumbotron）。顧名思義該組件可以增加標(biāo)題的大小，并為登陸頁面內(nèi)容添加更多的外邊距（margin）。使用超大屏幕（Jumbotron）的步驟如下：
- 創(chuàng)建一個(gè)帶有 class .jumbotron. 的容器 <div>。
- 除了更大的 <h1>，字體粗細(xì) font-weight 被減為 200px。
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 超大屏幕（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>這是一個(gè)超大屏幕（Jumbotron）的實(shí)例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
學(xué)習(xí)更多</a>
</p>
</div>
</div>
</body>
</html>
結(jié)果如下所示：
為了獲得占用全部寬度且不帶圓角的超大屏幕，請?jiān)谒械?.container class 外使用 .jumbotron class，如下面的實(shí)例所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 超大屏幕（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>這是一個(gè)超大屏幕（Jumbotron）的實(shí)例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
學(xué)習(xí)更多</a>
</p>
</div>
</div>
</body>
</html>
結(jié)果如下所示：
