در این جلسه از دوره آموزش بوت استرپ به بررسی گروه های لیست در بوت استرپ می پردازیم.
گروه های لیست در بوت استرپ :
در این جلسه از دوره آموزش بوت استرپ به بررسی انواع مختلف لیست در بوت استرپ می پردازیم.در بوت استرپ به صورت پیشفرض این امکان تعریف شده است که لیست هایی جذاب بسازید.با ما همراه باشید تا با هم به بررسی لیست های بوت استرپ بپردازیم.
گروه های لیست اولیه(BASIC LIST GROUPS) :
گروه های لیست در بوت استرپ به صورت پیش فرض تعریف شده اند.اولین گروه لیست که در بوت استرپ تعریف شده است گروه های لیست اولیه هستند.گروه های لیست اولیه لیست های نامرتبی هستندکه دارای آیتم های لیست هستند.
برای ایجاد یک گروه لیست اولیه کلاس list – group . را به عنصر <ul> بیفزاییدوبه <li> ها کلاس list-group-item . بیفزایید.
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
لیست گروه های نشان دار (LIST GROUP WITH BADGES):
یکی دیگر از انواع گروه های لیست در بوت استرپ گروه های لیست نشان دار هستند.
- به وسیله گروه های لیست نشان دار می توان جلوی هر لیست تعداد آیتم های آن را مشخص کرد.
- نشان های لیست دربوت استرپ به صورت پیش فرض در سمت راست قرار می گیرند.
- عدد مربوط به نشان هر لیست را درون تگ <span> بنویسید.
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
لیست گروه هایی با آیتم های لینک شده :
در بوت استرپ این امکان تعریف شده است که آیتم درون لیست ها را به یک صفحه خاص لینک کرد.
- برای ایجاد لیست گروه هایی با آیتم لینک شده از <div> به جای <ul> و <a> به جای <li> استفاده کنید.
- در این لیست گروه ها زمانی که موس روی لینک برده می شود یک پس زمینه با رنگ خاکستری ایجاد می شود.
لیست گروه هایی با یک آیتم های فعال(ACTIVE STATE) :
در بوت استرپ این امکان به صورت پیش فرض تعریف شده است که آیتم های لیست را به صورت فعال نمایش داد.برای فعال نمایش دادن آیتم از کلاس active. استفاده کنید.
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
لیست گروه هایی با یک آیتم های غیرفعال (DISABLED ITEMS) :
برای عیر فعال نمایش دادن آیتم ها در بوت استرپ از کلاس disabled. استفاده کنید.زمانی که از این کلاس برای لیست گروه ها استفاده می شود یک علامت ممنوع با بردن موس روی آن نمایش داده می شود.
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
کلاسهای متنی در بوت استرپ :
از کلاس های متنی می توان استفاده کرد و آیتم های لیست را رنگ کرد.
- .list-group-item-success
- .list-group-item-info
- .list-group-item-warning
- .list-group-item-danger
به نحوه به کار بردن کلاس ها دقت کنید.
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>محتوای سفارشی در لیست :
در بوت استرپ این امکان تعریف شده است که محتوای لیست ها را به صورت سفارشی تغییردهید.
- کلاس هایی به صورت پیش فرض برای ایجاد محتوای سفارشی در بوت استرپ تعریف شده است.
- در بوت استرپ کلاس list-group-heading برای هدر محتوای متنی به صورت پیش فرض تعریف شده است.
- دربوت استرپ کلاس list-group-item-text برای متن لیست ها به صورت پیش فرض تعریف شده است.
به تفاوت متن ها زمانی که لیست فعال می شود دقت کنید.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
