Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS panellar

ULASHISH

Panellar

Bootstrap’dagi panel — kontenti atrofida biroz ichki chekinishga (padding) ega bo‘lgan, chegarali blok:

A Basic Panel

Panellar .panel klassi yordamida yaratiladi, panel ichidagi kontent esa .panel-body klassiga ega bo‘ladi:

Misol

<div class="panel panel-default">   <div class="panel-body">A Basic Panel</div> </div>
O‘zingiz sinab ko‘ring »

.panel-default klassi panel rangini bezash uchun ishlatiladi. Boshqa kontekstual klasslar uchun ushbu sahifadagi oxirgi misolni ko‘ring.

Panel sarlavhasi

Panel sarlavhasi
Panel Content

.panel-heading klassi panelga sarlavha qo‘shadi:

Misol

<div class="panel panel-default">   <div class="panel-heading">Panel Heading</div>   <div class="panel-body">Panel Content</div> </div>
O‘zingiz sinab ko‘ring »

Panel pastki qismi (footer)

Panel Content
Panel pastki qismi (footer)

.panel-footer klassi panelga pastki qism (footer) qo‘shadi:

Misol

<div class="panel panel-default">   <div class="panel-body">Panel Content</div>   <div class="panel-footer">Panel Footer</div> </div>
O‘zingiz sinab ko‘ring »

Panellar guruhi

Bir nechta panelni guruhlash uchun ularni .panel-group klassiga ega <div> bilan o‘rang.

.panel-group klassi har bir panelning pastki tashqi chekinishini (bottom-margin) olib tashlaydi:

Misol

<div class="panel-group">   <div class="panel panel-default">     <div class="panel-body">Panel Content</div>   </div>   <div class="panel panel-default">     <div class="panel-body">Panel Content</div>   </div> </div>
O‘zingiz sinab ko‘ring »

Kontekstual klassli panellar

Panelni bo‘yash uchun kontekstual klasslardan (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning yoki .panel-danger) foydalaning:

Misol

Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content
O‘zingiz sinab ko‘ring »

Mashqlar yordamida o‘zingizni sinang

Mashq:

"Hello World" so‘zlaridan iborat oddiy (standart) Bootstrap panelini yarating.

<div class="">
  <div class="">Hello World</div>
</div>

Mashqni boshlash

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish