BootStrap-CSS樣式_佈局元件_超大螢幕頁面標題
阿新 • • 發佈：2019-01-01
超大螢幕（Jumbotron） 步驟如下：
1. 建立一個帶有 class .jumbotron. 的容器 <div>。
2. 除了更大的 <h1>，字型粗細 font-weight 被減為 200px。
頁面標題（page-header）
頁中有多個標題且每個標題之間需要新增一定的間距時，頁面標題這個功能就顯得特別有用。如 需使用頁面標題（Page Header），請把您的標題放置在帶有 class .page-header 的 <div>
程式碼例項：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>超大螢幕頁面標題</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:50px;"> <!-- Jumbotron樣式：超大螢幕，該元件可以增 加標題的大小，併為登陸頁面內容新增更多的外邊距（margin） page-header樣式：頁面標題,每個標題之間新增一定的間距 small樣式：副標題 --> <div class="container"> <div class="jumbotron"> <h1>超大螢幕</h1> <h2>Hello Worid！</h1> <p>你好，世界！</p> <p><a href="https://v3.bootcss.com/" class="btn btn-primary btn-lg">因為窮，才會熱愛學習</a></p> </div> <div class="page-header"> <h1>頁面標題</h1> <h2>Hello Worid！<small>你好，世界！</small></h1> </div> <p> 都說女兒找了男朋友，父母會有自己辛辛苦苦種的白菜被豬拱了的傷感。 可我弟弟自從找了女朋友，連家裡都不回來住了，天天岳母娘給做好吃的，各種的樂不思蜀啊。 老媽45°角仰望天空說：“白菜有沒有拱著不知道，反正養了20多年的豬肯定是丟了。。。 ” </p> </div> <!-- <div class="jumbotron"> <div class="container"> <h1>歡迎登入頁面！</h1> <p>這是一個超大螢幕的示例</p> <p><a href="#" class="btn btn-primary btn-lg">學習更多</a></p> </div> </div> --> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果：
