در این بخش خواهید آموخت که چگونه با استفاده از بوت استرپ به لیست های HTML سبک (style) دهید. میتوان 3 نوع مختلف لیست ایجاد کرد : لیست نامرتب (unordered): لیستی است که در آن ترتیب قرارگیری آیتم ها اهمیتی ندارد. آیتم ها در این لیست با دایره (bullet) مشخص میشوند. لیست مرتب (ordered): لیستی است که در آن ترتیب قرارگیری آیتم ها مهم است. آیتم ها در این لیست با اعداد مشخص میشوند. لیست توضیحی (definition): لیستی از لغات یا اصطلاحات به همراه توضیحات آن ها
لیست های مرتب و نامرتب بدون سبک :
گاهی اوقات نیاز است که سبک پیش فرض آیتم های لیست را حذف کنید. این کار را به راحتی میتوانید با اضافه کردن کلاس list-unstyled. به عناصر ol یا ul مربوطه انجام دهید.
خروجی مثال بالا به شکل زیر خواهد بود :
نکته : کلاس list-unstyled. سبک پیش فرض را حذف کرده و فقط padding را از آیتم هایی که مستقیماً فرزند یا children عنصر ol یا ul هستند باقی می گذارد.
در یک خط قرار دادن یا inline کردن آیتم ها در لیست های مرتب و نامرتب :
چنانچه میخواهید یک منوی افقی با استفاده از لیست های ol یا ul ایجاد کنید باید تمامی آیتم های لیست را در یک خط واحد (یعنی کنار هم) قرار دهید. جهت این کار باید کلاس list-inline. را به عناصر ol یا ul مریوطه اعمال کنید. این کلاس همچنین مقداری padding چپ و راست (پیش فرض 5px) به تمام آیتم های لیست اضافه میکند.
خروجی مثال بالا به شکل زیر خواهد بود :
ایجاد لیست های توضیحی افقی :
لغات و توضیحات آن ها در لیست های توضیحی هم میتوانند با استفاده از کلاس dl-horizontal. ، کنار هم قرار بگیرند. در لیست های توضیحی افقی چنانچه لغات طولانی تر از اندازه ستون چپ (پیش فرض 160px)باشند بریده یا کوتاه خواهند شد.
خروجی مثال بالا به شکل زیر خواهد بود :
نکته : اصطلاحات (لغات) کوتاه شده در لیست های توضیحی افقی میتوانند با استفاده از text-overflow (خصوصیت CSS) به صورت (...) نمایش داده شوند. در مطلب بعدی خواهید آموخت که چگونه با استفاده از ویژگی گروه لیست در بوت استرپ لیست های پیچیده تر و انعطاف پذیرتر ایجاد نمایید.
.png "لوگو")
