ده ها مولفه قابل استفاده مجدد در Bootstrap تعبیه شده است تا مسیریابی، هشدارها، پاپاورها و موارد دیگر را ارائه دهد.
صفحهبندی فوقالعاده ساده و سبک با الهام از Rdio، عالی برای برنامهها و نتایج جستجو. بلوک بزرگ به سختی قابل از دست دادن است، به راحتی مقیاس پذیر است و مناطق کلیک بزرگی را فراهم می کند.
پیوندها قابل تنظیم هستند و در شرایط مختلف با کلاس مناسب کار می کنند. .disabled
برای پیوندهای غیرقابل کلیک و .active
برای صفحه فعلی.
یکی از دو کلاس اختیاری را برای تغییر تراز پیوندهای صفحه بندی اضافه کنید: .pagination-centered
و .pagination-right
.
جزء صفحهبندی پیشفرض انعطافپذیر است و در انواع مختلفی کار میکند.
در یک صفحه بندی پیچیده شده <div>
است فقط یک <ul>
.
- <div class = "صفحه بندی" >
- <ul>
- <li><a href = "#" > قبلی </a></li>
- <li class = "فعال" >
- <a href = "#" > 1 </a>
- </li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > بعدی </a></li>
- </ul>
- </div>
جزء پیجر مجموعه ای از پیوندها برای پیاده سازی صفحه بندی ساده با نشانه گذاری سبک و حتی سبک های سبک تر است. این برای سایت های ساده مانند وبلاگ ها یا مجلات عالی است.
به طور پیش فرض، پیجر پیوندها را در مرکز قرار می دهد.
- <ul class = "پیجر" >
- <li>
- <a href = "#" > قبلی </a>
- </li>
- <li>
- <a href = "#" > بعدی </a>
- </li>
- </ul>
از طرف دیگر، می توانید هر پیوند را به طرفین تراز کنید:
- <ul class = "پیجر" >
- <li class = "قبلی" >
- <a href = "#" > ← قدیمی تر </a>
- </li>
- <li class = "بعدی" >
- <a href = "#" > جدیدتر → </a>
- </li>
- </ul>
برچسب ها | نشانه گذاری |
---|---|
پیش فرض | <span class="label">Default</span> |
جدید | <span class="label label-success">New</span> |
هشدار | <span class="label label-warning">Warning</span> |
مهم | <span class="label label-important">Important</span> |
اطلاعات | <span class="label label-info">Info</span> |
به طور پیشفرض، ریز عکسهای Bootstrap برای نمایش تصاویر مرتبط با حداقل نشانهگذاری مورد نیاز طراحی شدهاند.
با کمی نشانه گذاری اضافی، می توان هر نوع محتوای HTML مانند سرفصل ها، پاراگراف ها یا دکمه ها را به تصاویر کوچک اضافه کرد.
تصاویر کوچک (قبلاً .media-grid
تا نسخه 1.4) برای شبکههای عکس یا ویدیو، نتایج جستجوی تصویر، محصولات خردهفروشی، نمونه کارها و موارد دیگر عالی هستند. آنها می توانند لینک یا محتوای ثابت باشند.
نشانه گذاری تصویر بند انگشتی ساده است - ul
با هر تعداد li
عنصر تمام چیزی که لازم است. همچنین فوق العاده انعطاف پذیر است و به هر نوع محتوایی با نشانه گذاری بیشتر اجازه می دهد تا محتویات شما را بپیچد.
در نهایت، مولفه ریز عکسها از کلاس های سیستم شبکه ای موجود - مانند .span2
یا .span3
- برای کنترل ابعاد ریز استفاده می کند.
همانطور که قبلا ذکر شد، نشانهگذاری مورد نیاز برای ریز عکسها سبک و ساده است. در اینجا نگاهی به تنظیمات پیش فرض برای تصاویر پیوند داده شده است :
- <ul class = "تصاویر کوچک" >
- <li class = "span3" >
- <a href = "#" class = "تصویر کوچک" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
برای محتوای سفارشی HTML در تصاویر کوچک، نشانه گذاری کمی تغییر می کند. <a>
برای اجازه دادن به محتوای سطح بلوک در هر جایی، ما آن را با یک <div>
مانند عوض می کنیم :
- <ul class = "تصاویر کوچک" >
- <li class = "span3" >
- <div class = "تصویر کوچک" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> برچسب بند انگشتی </h5>
- <p> شرح تصویر کوچک در اینجا... </p>
- </div>
- </li>
- ...
- </ul>
با بوت استرپ 2، کلاس پایه را ساده کرده ایم: .alert
به جای .alert-message
. ما همچنین حداقل نشانهگذاری مورد نیاز را کاهش دادهایم— <p>
بهطور پیشفرض هیچ مورد نیاز است، فقط بیرونی <div>
.
برای کامپوننت بادوامتر با کد کمتر، ظاهر متمایزکننده هشدارهای بلوک، پیامهایی که دارای بالشتک بیشتر و معمولاً متن بیشتری هستند را حذف کردهایم. کلاس هم به .alert-block
.
بوت استرپ با یک پلاگین عالی جی کوئری ارائه می شود که از پیام های هشدار پشتیبانی می کند و حذف آنها را سریع و آسان می کند.
پیام خود و یک نماد بسته اختیاری را در یک div با کلاس ساده قرار دهید.
- <div class = "هشدار" >
- <a class = "close" > × </a>
- <strong> هشدار! </strong> بهتر است از خودتان مطمئن شوید که خیلی خوب به نظر نمی رسید.
- </div>
به راحتی پیام هشدار استاندارد را با دو کلاس اختیاری گسترش دهید: .alert-block
برای کنترلهای padding و متن بیشتر و .alert-heading
برای یک عنوان منطبق.
بهتر است خودتان را بررسی کنید، شما خیلی خوب به نظر نمی رسید. Nulla vitae elit libero، یک pharetra augue. commodo cursus magna، vel scelerisque nisl consectetur et.
- <div class = "Alert Alert-block" >
- <a class = "close" > × </a>
- <h4 class = "alert-heading" > هشدار! </h4>
- بهتر است خودتان را بررسی کنید، شما نیستید ...
- </div>
- <div class = "هشدار-خطای هشدار" >
- ...
- </div>
- <div class = "هشدار هشدار-موفقیت" >
- ...
- </div>
- <div class = "اطلاعات هشدار هشدار" >
- ...
- </div>
نوار پیشرفت پیشفرض با گرادیان عمودی.
- <div class = "پیشرفت" >
- <div class = "نوار"
- style = " width : 60 %; " ></div>
- </div>
از یک گرادیان برای ایجاد یک افکت راه راه استفاده می کند.
- <div class = "پیشرفت پیشرفت-اطلاعات
- پیشرفت راه راه" >
- <div class = "نوار"
- style = " width : 20 %; " ></div>
- </div>
مثال راه راه را می گیرد و آن را متحرک می کند.
- <div class = "پیشرفت پیشرفت-خطر
- progress-striped active" >
- <div class = "نوار"
- style = " عرض : 40 %; " ></div>
- </div>
نوارهای پیشرفت از برخی از نامهای کلاس مشابه به عنوان دکمهها و هشدارها برای یک ظاهر طراحی مشابه استفاده میکنند.
.progress-info
.progress-success
.progress-danger
از طرف دیگر، میتوانید فایلهای LESS را سفارشی کنید و رنگها و اندازههای خود را رول کنید.
نوارهای پیشرفت از انتقال CSS3 استفاده می کنند، بنابراین اگر به صورت پویا عرض را از طریق جاوا اسکریپت تنظیم کنید، اندازه آن به آرامی تغییر می کند.
اگر از .active
کلاس استفاده می کنید، .progress-striped
نوارهای پیشرفت شما نوارها را از چپ به راست متحرک می کند.
نوارهای پیشرفت از شیبها، انتقالها و انیمیشنهای CSS3 برای دستیابی به تمام جلوههایشان استفاده میکنند. این ویژگی ها در IE7-8 یا نسخه های قدیمی تر فایرفاکس پشتیبانی نمی شوند.
Opera در حال حاضر از انیمیشن ها پشتیبانی نمی کند.
از چاه به عنوان یک افکت ساده بر روی یک عنصر استفاده کنید تا جلوه ای درونی به آن بدهید.
- <div class = "خوب" >
- ...
- </div>
از نماد بسته عمومی برای رد کردن محتوا مانند مدال ها و هشدارها استفاده کنید.
- <a class = "close" > × </a>