مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، گروه های لیست ( Bootstrap List Groups )

آموزش بوت استرپ ، گروه های لیست ( Bootstrap List Groups )

آموزش بوت استرپ ، گروه های لیست ( Bootstrap List Groups )

ابتدایی ترین گروه لیست عبارت است از یک لیست نامنظم که دارای آیتم های لیست می باشد برای ایجاد یک گروه لیست مقدماتی، عنصرِ<ul> را به کلاسِ.list-group بیفزایید و عنصرهای <li> را به کلاسِ list-group-item اضافه کنیدبرای این کار، ابتدا باید آن را فعال کنیم:

گروه لیست با نشان ها ( Badges )

امکان اضافه نمودنِ badge (نشانگرِ تعداد آیتم های مرتبط با لینک) به گروه لیست وجود دارد Badge ها به صورت اتوماتیک در قسمت راست قرار می گیرند

با استفاده از دستور زیر و استفاده از کلاس .sticky می توان بر روی صفحه، المانی به عنوان یک استیکی نوت داشته باشم:

گروه لیست با آیتم های لینک شده ( Linked Items )

آیتم های موجود در گروه لیست نیز می توانند به صورت hyperlink باشند. این امر موجب می شود که یک پس زمینه ی خاکستری بر روی Hover ایجاد شود.  برای ایجاد گروه لیست با استفاده از آیتم های لینک شده، به جای <ul> از <div> ، و به جای <li> از <a> استفاده نمایید.

کلاس های متنی ( Contextual Classes )

از کلاس های متنی به منظور رنگی کردن آیتم ها استفاده می شود.  کلاس های مورد استفاده برای رنگی کردن آیتم ها عبارتند از: list-group-item-success، list-group-item-info، list-group-item-warning، و list-group-item-danger .

 

تاریخ آخرین بروزرسانی : ۱۰ آذر ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.