Bootstrap 超大屏幕（Jumbotron）

本章將講解 Bootstrap 支持的另一個特性，超大屏幕（Jumbotron）。顧名思義該組件可以增加標題的大小，并為登陸頁面內容添加更多的外邊距（margin）。使用超大屏幕（Jumbotron）的步驟如下：

成都創(chuàng)新互聯(lián)擁有網(wǎng)站維護技術和項目管理團隊，建立的售前、實施和售后服務體系，為客戶提供定制化的成都網(wǎng)站設計、網(wǎng)站制作、網(wǎng)站維護、多線BGP機房解決方案。為客戶網(wǎng)站安全和日常運維提供整體管家式外包優(yōu)質服務。我們的網(wǎng)站維護服務覆蓋集團企業(yè)、上市公司、外企網(wǎng)站、商城網(wǎng)站定制開發(fā)、政府網(wǎng)站等各類型客戶群體，為全球上1000+企業(yè)提供全方位網(wǎng)站維護、服務器維護解決方案。

• 創(chuàng)建一個帶有 class .jumbotron. 的容器
  。
• 除了更大的

  ，字體粗細 font-weight 被減為 200。

下面的實例演示了這點：

實例

<
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
>

嘗試一下 ?

結果如下所示：

為了獲得占用全部寬度且不帶圓角的超大屏幕，請在所有的 .container class 外使用 .jumbotron class，如下面的實例所示：

實例

<
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
>

嘗試一下 ?

結果如下所示：

分享標題：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap超大屏幕（Jumbotron）
本文URL：http://www.dlmjj.cn/article/djopocc.html