Source

Jumbotron

Magaan, flexible na bahagi para sa pagpapakita ng nilalaman ng istilo ng hero unit.

Isang magaan, flexible na bahagi na maaaring opsyonal na mapalawak ang buong viewport upang ipakita ang mga pangunahing mensahe sa marketing sa iyong site.

Hello, mundo!

Ito ay isang simpleng yunit ng bayani, isang simpleng sangkap na istilo ng jumbotron para sa pagtawag ng karagdagang atensyon sa itinatampok na nilalaman o impormasyon.


Gumagamit ito ng mga utility class para sa typography at spacing sa space content sa loob ng mas malaking container.

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

Upang gawing buong lapad ang jumbotron, at walang mga bilugan na sulok, idagdag ang .jumbotron-fluidklase ng modifier at magdagdag ng .containero sa .container-fluidloob.

Fluid jumbotron

Ito ay isang binagong jumbotron na sumasakop sa buong pahalang na espasyo ng magulang nito.

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