BS rasmlar
Bootstrap rasm shakllari
Yumaloq burchaklar:
Doira:
Eskiz (thumbnail):
Yumaloq burchaklar
.img-rounded klassi rasmga yumaloq burchaklar qo‘shadi (IE8 yumaloq burchaklarni qo‘llab-quvvatlamaydi):
Doira
.img-circle klassi rasmni doira shakliga keltiradi (IE8 yumaloq burchaklarni qo‘llab-quvvatlamaydi):
Eskiz (thumbnail)
.img-thumbnail klassi rasmni eskiz (thumbnail) ko‘rinishiga keltiradi:
Moslashuvchan rasmlar
Rasmlar turli o‘lchamlarda bo‘ladi. Ekranlar ham. Moslashuvchan rasmlar ekran o‘lchamiga avtomatik ravishda moslashadi.
Moslashuvchan rasmlar yaratish uchun <img> tegiga .img-responsive klassini qo‘shing. Shunda rasm ota element o‘lchamiga chiroyli tarzda moslashadi.
.img-responsive klassi rasmga display: block;, max-width: 100%; va height: auto; xususiyatlarini qo‘llaydi:
Rasmlar galereyasi
Rasmlar galereyasini yaratish uchun Bootstrap’ning grid tizimidan .thumbnail klassi bilan birgalikda ham foydalanishingiz mumkin.
Eslatma: Grid tizimi haqida (turli miqdordagi ustunlarga ega maketni qanday yaratish haqida) ushbu darslikda keyinroq batafsil bilib olasiz.
Misol
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan joylashtirilgan kontent (embed)
Videolar yoki slayd-shoular ham istalgan qurilmada to‘g‘ri masshtablansin.
Klasslarni bevosita <iframe>, <embed>, <video> va <object> elementlariga qo‘llash mumkin.
Quyidagi misolda <iframe> tegiga .embed-responsive-item klassini qo‘shish orqali moslashuvchan video yaratiladi (shunda video ota element o‘lchamiga chiroyli moslashadi). Uni o‘rab turgan <div> videoning tomonlar nisbatini belgilaydi:
Misol
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
O‘zingiz sinab ko‘ring »
Tomonlar nisbati (aspect ratio) nima?
Tasvirning tomonlar nisbati uning kengligi va balandligi o‘rtasidagi proporsional munosabatni ifodalaydi. Keng tarqalgan ikkita video tomonlar nisbati — 4:3 (XX asrning universal video formati) va 16:9 (HD televideniye va Yevropa raqamli televideniyesi uchun universal format).
Ikki xil tomonlar nisbati klassidan birini tanlashingiz mumkin:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap rasmlari bo‘yicha to‘liq ma’lumotnoma
Barcha rasm klasslari bo‘yicha to‘liq ma’lumot uchun Bootstrap rasmlar ma’lumotnomamizga o‘ting.
Bilasizmi?
W3.CSS — Bootstrap’ga ajoyib muqobil.
W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!