BS Jumbotron
Jumbotron yaratish
Jumbotron — maxsus kontent yoki ma’lumotga alohida e’tibor qaratish uchun mo‘ljallangan katta blok.
Jumbotron burchaklari yumaloq kulrang blok ko‘rinishida chiqadi. U ichidagi matnning shrift o‘lchamlarini ham kattalashtiradi.
Maslahat: Jumbotron ichiga deyarli istalgan to‘g‘ri (valid) HTML kodni, jumladan boshqa Bootstrap elementlari/klasslarini ham joylashtirish mumkin.
Jumbotron yaratish uchun .jumbotron klassiga ega <div> elementidan foydalaning:
Bootstrap Tutorial
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
Konteyner ichidagi jumbotron
Agar jumbotron ekran chetlarigacha cho‘zilishini ISTAMASANGIZ, uni <div class="container"> ichiga joylashtiring:
Misol
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
O‘zingiz sinab ko‘ring »
Konteynerdan tashqaridagi jumbotron
Agar jumbotron ekran chetlarigacha cho‘zilishini istasangiz, uni <div class="container"> dan tashqariga joylashtiring:
Misol
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
O‘zingiz sinab ko‘ring »
Sahifa sarlavhasini (page header) yaratish
Sahifa sarlavhasi bo‘limlarni ajratuvchi element kabi ishlaydi.
.page-header klassi sarlavha ostiga gorizontal chiziq qo‘shadi (+ element atrofiga biroz qo‘shimcha bo‘sh joy qo‘shadi):
Example Page Header
Sahifa sarlavhasini yaratish uchun .page-header klassiga ega <div> elementidan foydalaning:
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!