Jumbotron

Komponen yang ringan dan fleksibel untuk mempamerkan kandungan gaya unit wira.

Komponen ringan dan fleksibel yang boleh memanjangkan keseluruhan port pandangan untuk mempamerkan mesej pemasaran utama di tapak anda.

Hai dunia!

Ini ialah unit wira ringkas, komponen gaya jumbotron ringkas untuk menarik perhatian tambahan kepada kandungan atau maklumat yang ditampilkan.

Ia menggunakan kelas utiliti untuk tipografi dan jarak ke ruang kandungan di dalam bekas yang lebih besar.

Ketahui lebih lanjut

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

Untuk menjadikan jumbotron lebar penuh, dan tanpa bucu bulat, tambah .jumbotron-fluidkelas pengubah suai dan tambah a .containeratau .container-fluiddalam.

Jumbotron cecair

Ini ialah jumbotron yang diubah suai yang menduduki keseluruhan ruang mendatar induknya.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>