Bootstrap 超大屏幕（Jumbotron）

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

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

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

  ，字體粗細(xì) font-weight 被減為 200。

下面的實(shí)例演示了這點(diǎn)：

實(shí)例

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

嘗試一下 ?

結(jié)果如下所示：

為了獲得占用全部寬度且不帶圓角的超大屏幕，請?jiān)谒械?.container class 外使用 .jumbotron class，如下面的實(shí)例所示：

實(shí)例

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

嘗試一下 ?

結(jié)果如下所示：

當(dāng)前文章：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap超大屏幕（Jumbotron）
本文鏈接：http://www.5511xx.com/article/djopocc.html