35.Bootstrap(中文教程)元件：jumbotron:廣告大屏幕

yan-bootstrap4 bootstrap4(中文教程)

Ci_Yao_Yan 2020-04-16 11:42:34 ‧ 1208 瀏覽

分享至

ㄧ.jumbotron:廣告大屏幕

<div class="component" id="demo">
  <div class="jumbotron ">
    <h1 class="display-1">hello</h1>
    <p class="lead mb-4">Welcome to Taiwan.</p>
    <a href="#" class="btn btn-primary btn-lg">Subscribe</a>
  </div>
</div>



.demo.component{
  padding: 50px;
}

重點：

1..jumbotron為廣告大屏幕，一樣放在父元素
2..display-1~5，1是最大的到
3.廣告大屏幕的p內容會加上.lead，.lead就是讓文字比較密集一點(font-weight: 300;)然後文字大小設為1.25rem
4.再加一個大按鈕

codepen
參考：bootstrap4