bootstrap超大螢幕(19)
阿新 • • 發佈:2018-12-30
Bootstrap 超大螢幕(Jumbotron) 本章將講解 Bootstrap 支援的另一個特性,超大螢幕(Jumbotron)。 顧名思義該元件可以增加標題的大小, 併為登陸頁面內容新增更多的外邊距(margin)。使用超大螢幕(Jumbotron)的步驟如下: 建立一個帶有 class .jumbotron. 的容器 <div>。 除了更大的 <h1>,字型粗細 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>