BS yig‘iladigan bloklar (collapse)
Oddiy yig‘iladigan blok (collapse)
Yig‘iladigan bloklar katta hajmdagi kontentni yashirish va ko‘rsatish kerak bo‘lganda qulay:
Misol
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
O‘zingiz sinab ko‘ring »
Misol tahlili
.collapse klassi yig‘iladigan elementni bildiradi (bizning misolimizda <div>); bu tugma bosilganda ko‘rsatiladigan yoki yashiriladigan kontentdir.
Yig‘iladigan kontentni boshqarish (ko‘rsatish/yashirish) uchun <a> yoki <button> elementiga data-toggle="collapse" atributini qo‘shing. So‘ngra tugmani yig‘iladigan kontent (<div id="demo">) bilan bog‘lash uchun data-target="#id" atributini qo‘shing.
Eslatma: <a> elementlari uchun data-target atributi o‘rniga href atributidan foydalanishingiz mumkin:
Misol
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
O‘zingiz sinab ko‘ring »
Standart holatda yig‘iladigan kontent yashirin bo‘ladi. Biroq kontentni standart holatda ko‘rsatish uchun .in klassini qo‘shishingiz mumkin:
Misol
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
O‘zingiz sinab ko‘ring »
Yig‘iladigan panel
Quyidagi misolda yig‘iladigan panel ko‘rsatilgan:
Misol
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Yig‘iladigan ro‘yxat guruhi
- One
- Two
- Three
Quyida ichida ro‘yxat guruhi bo‘lgan yig‘iladigan panel ko‘rsatilgan:
Misol
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Akkordeon
Quyidagi misolda panel komponentini kengaytirish orqali yaratilgan oddiy akkordeon ko‘rsatilgan.
Eslatma: Yig‘iladigan elementlardan biri ochilganda, ko‘rsatilgan ota element ostidagi barcha boshqa yig‘iladigan elementlar yopilishini ta’minlash uchun data-parent atributidan foydalaning.
Misol
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap collapse bo‘yicha to‘liq ma’lumotnoma
Collapse’ning barcha parametrlari (options), metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Collapse ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!