Source

جامبۆترۆن

پێکهاتەیەکی سووک و نەرم و نیان بۆ پیشاندانی ناوەڕۆکی شێوازی یەکەی پاڵەوان.

پێکهاتەیەکی سووک و نەرم و نیان کە دەتوانێت بە ئیختیاری تەواوی دەرچەی بینین درێژ بکاتەوە بۆ پیشاندانی پەیامە سەرەکییەکانی بازاڕکردن لە ماڵپەڕەکەتدا.

سڵاو جیهان!

ئەمە یەکەیەکی پاڵەوانی سادەیە، پێکهاتەیەکی سادەی شێوازی جامبۆتڕۆنە بۆ بانگهێشتکردنی سەرنجی زیاتر بە ناوەڕۆک یان زانیارییە تایبەتمەندەکان.


پۆلەکانی سوودبەخش بۆ تایپۆگرافی و دووری بەکاردەهێنێت بۆ ئەوەی ناوەڕۆک لەناو دەفری گەورەتردا بۆشایی بکات.

زیاتر فێربە

<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>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

بۆ ئەوەی جامبۆترۆنەکە تەواو پان بێت، و بەبێ گۆشەی گوڵاو، .jumbotron-fluidپۆلی دەستکاریکەر زیاد بکە و a .containerیان .container-fluidلەناو زیاد بکە.

جامبۆترۆنی شلە

ئەمە جامبۆترۆنێکی دەستکاریکراوە کە تەواوی فەزای ئاسۆیی دایک و باوکی داگیر دەکات.

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