کلاس collapse در بوت استرپ bootstrap
مقالات
Collapsibles پایه
Collapsibles bootstrap زمانی مفید هستند که می خواهید حجم زیادی از متن را مخفی و نمایش دهید:
مثال:
|
1 2 3 4 5 |
<button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div> |
توضیح مثال:
کلاس collapse یک عنصر collapsible (یک <div> در مثال ما) را نشان می دهد. این محتوا است که با کلیک یک دکمه نمایش داده می شود یا پنهان می شود.
برای کنترل (نشان دادن / پنهان کردن) محتوای قابل انعطاف، ویژگی data-toggle = “collapse” را به یک عنصر <a> یا یک <button> اضافه کنید. سپس attribute data-target = “# id” را برای اتصال دکمه با محتوای قابل انعطاف (<div id = “demo”>) اضافه کنید.
توجه: برای <a> عناصر، می توانید از ویژگی href به جای مشخصه data-target استفاده کنید:
مثال
|
1 2 3 4 5 |
<a href="#demo" data-toggle="collapse">Collapsible</a> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div> |
به طور پیش فرض، محتوای قابل پنهان پنهان است. با این حال، می توانید کلاس In را اضافه کنید تا به طور پیش فرض محتوای نمایش داده شود:
|
1 2 3 |
<div id="demo" class="collapse in"> Lorem ipsum dolor text.... </div> |
Collapsible Panel
پنل پیچیده
پانل قابل انعطاف
مثال زیر پانل قابل انعطاف را نشان می دهد
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
گروه فهرست انعطاف پذیر
زیر یک پانل قابل انعطاف با یک گروه لیست در داخل نشان می دهد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
Accordion
مثال زیر نشان می دهد یک آکوردئون ساده با گسترش بخش پانل.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<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> |
توجه: از ویژگی data-parent استفاده کنید تا اطمینان حاصل کنید که تمام عناصر قابل انعطاف تحت والد مشخص شده هنگامی که یکی از آیتم های قابل انعطاف نشان داده شده بسته شود بسته شود
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
افزونه Scrollspy بوت استرپ
افزونه Popover بوت استرپ
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
Lagerung Levitra Viagra Made In Canada Il Cialis Non Fa Effetto viagra Generic Lasix