نمونه‌ها

دو انتخاب پایه به‌همراه دو گونهٔ خاص.

گروه دکمه تکی

یک مجموعه‌ از دکمه‌ها با کلاس .btn در داخل یک کلاس .btn-group قرار دهید.

  1. <div class="btn-group">
  2. <button class="btn">راست</button>
  3. <button class="btn">وسط</button>
  4. <button class="btn">چپ</button>
  5. </div>

گروهی از چندین دکمه

برای ایجاد اجزای پیچیده‌تر، مجموعهٔ <div class="btn-group"> را در داخل <div class="btn-toolbar"> قرار دهید.

  1. <div class="btn-toolbar">
  2. <div class="btn-group">
  3. ...
  4. </div>
  5. </div>

گروه‌های دکمه عمودی

مجموعه‌ای از دکمه‌های عمودی را به جای مجموعه‌ای از دکمه‌های افقی ایجاد کنید.

  1. <div class="btn-group btn-group-vertical">
  2. ...
  3. </div>

عملکرد به‌مانند Checkboxها و radioها

گروه‌های دکمه می‌توانند به مانند radioها عمل کنند. وقتی که ممکن است یک دکمه فعال باشد و یا به مانند checkboxها که ممکن است چندین دکمه همزمان فعال باشند. برای اطلاعات بیشتر به مستندات جاوااسکریپت را ببینید.

افتادنی‌ها در گروه‌های دکمه

توجه کنید! دکمه‌هایی که افتادنی هستند باید به‌صورت اختصاصی در .btn-group قرار گیرند سپس برای نمایش صحیح در داخل .btn-toolbar قرار گیرند.

مرور کلی و نمونه‌ها

از هر دکمه‌ای برای فعال کردن منوی افتادنی، با قرار دادن در کلاس .btn-group و آماده کردن کد نشانه‌گذاری منو، استفاده کنید.

  1. <div class="btn-group">
  2. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  3. عمل
  4. <span class="caret"></span>
  5. </a>
  6. <ul class="dropdown-menu">
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

با تمام اندازه‌ها به خوبی کار می‌کنند

دکمه‌ها با هر اندازه‌ای کار می‌کنند، اندازه‌هایی به‌مانند: .btn-large، .btn-mini و یا .btn-small.

جاوااسکریپت نیاز دارد

دکمه‌های افتادنی نیاز به پلاگین افتادنی بوت‌استرپ برای کار کردن، دارند.

در برخی از موارد، مانند موبایل‌ها، منوهای افتادنی از اندازه صفحه نمایش بزرگ‌تر می‌شوند. برای رفع این مشکل نیاز است که به صورت دستی و یا کد جاوااسکریپت سفارشی، آن را درست کرد.


دکمه‌های افتادنی جدا

ما به راحتی به‌وسیلهٔ تغییر شیوه نمایش گروه دکمه و کد نشانه‌گذاری، می‌توانیم یک دکمه جدا بسازیم. ویژگی یک دکمه جدا، داشتن یک عمل استاندارد در راست و پیوند فعال کردن دکمهٔ افتادنی در چپ است.

  1. <div class="btn-group">
  2. <button class="btn">عمل</button>
  3. <button class="btn dropdown-toggle" data-toggle="dropdown">
  4. <span class="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu">
  7. <!-- پیوندهای منوی افتادنی -->
  8. </ul>
  9. </div>

اندازه‌ها

از کلاس‌های کمکی دکمه مانند .btn-mini، .btn-small و یا .btn-large برای تغییر اندازه استفاده کنید.

  1. <div class="btn-group">
  2. <button class="btn btn-mini">عمل</button>
  3. <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
  4. <span class="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu">
  7. <!-- پیوندهای منوی افتادنی -->
  8. </ul>
  9. </div>

منوهای بالارونده

منوهای افتادنی می‌توانند از پایین به بالا نیز باز شوند. با اضافه کردن کلاس .dropup به پدر عنصری که کلاس آن .dropdown-menu است. این کلاس جهت فلش .caret و جهت باز شدن منو را از پایین به بالا تغییر می‌دهد.

  1. <div class="btn-group dropup">
  2. <button class="btn">بالارونده</button>
  3. <button class="btn dropdown-toggle" data-toggle="dropdown">
  4. <span class="caret"></span>
  5. </button>
  6. <ul class="dropdown-menu">
  7. <!-- پیوندهای منوی افتادنی -->
  8. </ul>
  9. </div>

صفحه‌بندی استاندارد

صفحه‌بندی ساده برگرفته از Rdio است، این نوع صفحه‌بندی مناسب برای نتایج جستجوها و برنامه‌ها است. اندازه بزرگ بلاک‌ها کمک می‌کند که سریع‌تر پیدا شوند و همچنین قابلیت تغییر اندازه را دارند و همچنین فضای بزرگی را برای کلیک کردن فراهم می‌کنند.

  1. <div class="pagination">
  2. <ul>
  3. <li><a href="#">&laquo;</a></li>
  4. <li><a href="#">۱</a></li>
  5. <li><a href="#">۲</a></li>
  6. <li><a href="#">۳</a></li>
  7. <li><a href="#">۴</a></li>
  8. <li><a href="#">&raquo;</a></li>
  9. </ul>
  10. </div>

انتخاب‌ها

وضعیت‌های فعال و غیرفعال

برای حالت‌های مختلف پیوندها قابل سفارشی شدن هستند. از کلاس .disabled برای این‌که پیوندها قابل کلیک شدن نباشند و از کلاس .active برای مشخص کردن صفحه جاری استفاده کنید.

  1. <div class="pagination">
  2. <ul>
  3. <li class="disabled"><a href="#">&laquo;</a></li>
  4. <li class="active"><a href="#">۱</a></li>
  5. ...
  6. </ul>
  7. </div>

همچنین برای این‌که قابلیت کلیک شدن برای پیوندهای فعال و غیرفعال بگیرید، از <span> استفاده کنید.

  1. <div class="pagination">
  2. <ul>
  3. <li class="disabled"><span>&laquo;</span></li>
  4. <li class="active"><span>1</span></li>
  5. ...
  6. </ul>
  7. </div>

اندازه‌ها

صفحه‌بندی زیبای بزرگ می‌خواهید یا صفحه‌بندی کوچک؟ کلاس .pagination-large، .pagination-small یا .pagination-mini را برای اندازه‌های مختلف اضافه کنید.

  1. <div class="pagination pagination-large">
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class="pagination">
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class="pagination pagination-small">
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class="pagination pagination-mini">
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

همراستاسازی

با اضافه کردن دو کلاس اختیاری .pagination-centered و .pagination-left آن‌ها را در وسط و چپ قرار دهید.

  1. <div class="pagination pagination-centered">
  2. ...
  3. </div>
  1. <div class="pagination pagination-left">
  2. ...
  3. </div>

ناوبر صفحه

پیوندهای بعدی و قبلی برای پیاده‌سازی صفحه‌بندی ساده که با شیوهٔ نمایش و نشانه‌گذاری سبک ایجاد می‌شود برای وبلاگ‌ها و مجله‌ها خیلی مناسب است.

نمونه پیش‌فرض

به‌صورت پیش‌فرض پیوندهای ناوبر صفحه در وسط قرار دارند.

  1. <ul class="pager">
  2. <li><a href="#">قبلی</a></li>
  3. <li><a href="#">بعدی</a></li>
  4. </ul>

پیوندهای همراستا

همچنین شما می‌توانید پیوندها را در طرفین قرار دهید:

  1. <ul class="pager">
  2. <li class="previous">
  3. <a href="#">&rarr; قبلی</a>
  4. </li>
  5. <li class="next">
  6. <a href="#">بعدی &larr;</a>
  7. </li>
  8. </ul>

وضعیت غیرفعال اختیاری

برای غیرفعال کردن می‌توانید از کلاس کلی .disabled استفاده کنید.

  1. <ul class="pager">
  2. <li class="previous disabled">
  3. <a href="#">&rarr; قبلی</a>
  4. </li>
  5. ...
  6. </ul>

برچسب‌ها

برچسب‌ها نشانه‌گذاری
پیش‌فرض <span class="label">پیش‌فرض</span>
موفقیت <span class="label label-success">موفقیت</span>
هشدار <span class="label label-warning">هشدار</span>
مهم <span class="label label-important">مهم</span>
اطلاعات <span class="label label-info">اطلاعات</span>
متفاوت <span class="label label-inverse">متفاوت</span>

نشان‌ها

نام نمونه نشانه‌گذاری
پیش‌فرض ۱ <span class="badge">۱</span>
موفقیت ۲ <span class="badge badge-success">۲</span>
هشدار ۴ <span class="badge badge-warning">۴</span>
مهم ۶ <span class="badge badge-important">۶</span>
اطلاعات ۸ <span class="badge badge-info">۸</span>
متفاوت ۱۰ <span class="badge badge-inverse">۱۰</span>

یه راحتی حذف می‌شوند

برای پیاده‌سازی ساده، برچسب‌ها و نشان‌ها به راحتی حذف می‌گردند (با استفاده از انتخاب‌گر :empty سی‌اس‌اس) وقتی که در آن‌ها محتوایی وجود ندارد.

واحد قهرمان

یک جزء سبک و قابل انعطاف برای نمایش محتوای کلیدی سایت. این جزء برای فروشگاه‌ها و سایت‌هایی که مطالب زیادی در آن‌ها است، مناسب می‌باشد.

سلام، دنیا!

این یک واحد قهرمان ساده است. این جزء برای جلب توجه و دادن اطلاعات مهم و کلیدی به خواننده است.

بیشتر بدانید

  1. <div class="hero-unit">
  2. <h1>تیتر</h1>
  3. <p>متن مهم</p>
  4. <p>
  5. <a class="btn btn-primary btn-large">
  6. بیشتر بدانید
  7. </a>
  8. </p>
  9. </div>

تیتر صفحه

یک پوستهٔ ساده برای h1 که به‌طور مناسب فضای خالی برای قرارگیری محتویات صفحه ایجاد می‌کند. همچنین می‌توان در تگ h1 از تگ small برای توضیح تیتر استفاده کرد.

  1. <div class="page-header">
  2. <h1>نمونه‌ای از تیتر صفحه <small>زیرنوشته برای تیتر</small></h1>
  3. </div>

بندانگشتی‌های پیش‌فرض

به‌صورت پیش‌فرض، بوت‌استرپ بندانگشتی‌ها را برای نمایش عکس‌ها آماده کرده‌است که با کمترین زبان نشانه‌گذاری قابل پیاده‌سازی باشد.

به‌طور کامل قابل سفارشی

با تغییر کوچکی در کدهای نشانه‌گذاری، می‌توان هر محتوای اچ‌تی‌ام‌ال مانند تیترها، پاراگراف‌ها و یا دکمه‌ها را در بندانگشتی‌ها استفاده کرد.

  • 300x200

    برچسب بندانگشتی

    "نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد.

    عمل عمل

  • 300x200

    برچسب بندانگشتی

    به منظور داشتن آزادی برای تغییر دادن، شما باید به کدهای منبع برنامه دسترسی داشته باشید. بنابراین دسترسی به کد منبع یک شرط ضروری می‌باشد.

    عمل عمل

  • 300x200

    برچسب بندانگشتی

    اگر توسعه‌دهنده نرم‌افزار قادر باشد مجوز نرم‌افزار را، بدون این که شما کاری کنید که سبب این کار شود، باطل کند، این نرم‌افزار آزاد نیست.

    عمل عمل

چرا از بندانگشتی‌ها استفاده کنم؟

بندانگشتی‌ها بسیار مناسب برای شبکه‌ای از عکس‌ها یا ویدیوها، نتایج جستجوی عکس، محصولات تجاری، نمونه‌کارها و خیلی چیزهای دیگر است. آن‌ها می‌توانند پیوند به جایی شده‌باشند.

نشانه‌گذاری ساده و انعطاف‌پذیر

نشانه‌گذاری بندانگشتی یک ul ساده با تعدادی li است. فقط همین! همچنین قابلیت انعطاف بالایی دارد، به‌راحتی می‌توان هر نوع محتوایی را با کمی تغییر در آن قرار داد.

از اندازه‌های ستون شبکه‌ای استفاده کنید

در نمونهٔ قبل، بندانگشتی از کلاس‌های سامانهٔ شبکه‌ای مانند .span2 یا .span3 برای کنترل اندازه بندانگشتی‌ها استفاده کرده‌است.

نشانه‌گذاری

همان‌طور در قبل گفته شد، نشانه‌گذاری بندانگشتی موردنیاز خیلی آسان و سبک است. این یک نمونه از عکس‌های پیوندشده پیش‌فرض است:

  1. <ul class="thumbnails">
  2. <li class="span4">
  3. <a href="#" class="thumbnail">
  4. <img data-src="holder.js/300x200" alt="">
  5. </a>
  6. </li>
  7. ...
  8. </ul>

برای محتوای سفارشی اچ‌تی‌ام‌ال در بندانگشتی‌ها، نشانه‌گذاری کمی تغییر می‌کند. برای این‌که از محتوای بلاکی استفاده کنیم، ما <a> را با <div> عوض کردیم و نتیجه شد:

  1. <ul class="thumbnails">
  2. <li class="span4">
  3. <div class="thumbnail">
  4. <img data-src="holder.js/300x200" alt="">
  5. <h3>برچسب بندانگشتی</h3>
  6. <p>عنوان بندانگشتی...</p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

نمونه‌های بیشتر

با استفاده از تنظیمات کلاس‌های شبکه‌ای شما می‌توانید اندازه‌های مختلف را باهم داشته باشید.

اخطار پیش‌فرض

هر نوشته‌ای را با دکمهٔ حذف اختیاری در کلاس .alert برای پیام اخطار هشدار پایه قرار دهید.

هشدار! بهتر است به خودتان نگاه کنید، به‌نظر خوب نیستید.
  1. <div class="alert">
  2. <button type="button" class="close" data-dismiss="alert">×</button>
  3. <strong>هشدار!</strong> بهتر است به خودتان نگاه کنید، به‌نظر خوب نیستید.
  4. </div>

دکمه‌های حذف

مرورگرهای موبایل سافاری و اپرا، برای استفاده از دکمه‌های حذف پیام‌های هشدار نیاز به ویژگی data-dismiss="alert" و استفاده از href="#" را دارند.

  1. <a href="#" class="close" data-dismiss="alert">×</a>

همچنین می‌توانید از عنصر <button> با ویژگی data که در مستندات آمده‌است، استفاده کنید وقتی از <button> استفاده می‌کنید باید type="button" رو به دکمهٔ خود اضافه کنید.

  1. <button type="button" class="close" data-dismiss="alert">×</button>

اخطارها را با جاوااسکریپت حذف کنید

از پلاگین اخطار جی‌کوئری برای حذف آسان و سریع استفاده کنید.


انتخاب‌ها

برای پیام‌های طولانی، حاشیهٔ بالا و پایین را با استفاده از کلاس .alert-block افزایش دهید.

هشدار!

شما برای من پنج فایل در قالب غیر استاندارد و حجیم .doc که یکی از اسرار مایکروسافت است ارسال کرده‌اید، به جای اینکه از قالب بین‌المللی، عمومی، و موثرتر متن ساده استفاده کنید.

  1. <div class="alert alert-block">
  2. <button type="button" class="close" data-dismiss="alert">&times;</button>
  3. <h4>هشدار!</h4>
  4. شما برای من پنج فایل در قالب غیر استاندارد و حجیم...
  5. </div>

جایگزین‌های پیش‌فرض

برای تغییر اخطار پیش‌فرض از کلاس‌های زیر استفاده کنید.

خطا یا خطر

اوه نه! رایانه شما دارای یک ویروس بزرگ است.
  1. <div class="alert alert-error">
  2. ...
  3. </div>

موفقیت

خوب تموم شد! مهاجرت شما با موفقیت انجام شد.
  1. <div class="alert alert-success">
  2. ...
  3. </div>

اطلاعاتی

توجه کنید! شما در حال استفاده از مرورگر اینترنت اکسپلورر هستید که دارای مالیات است.
  1. <div class="alert alert-info">
  2. ...
  3. </div>

نمونه‌ها و نشانه‌گذاری

پایه

نوار پیشرفت پیش‌فرض با گرادیانت عمودی.

  1. <div class="progress">
  2. <div class="bar" style="width: 60%;"></div>
  3. </div>

راه‌راه

از گرادیانت برای ساخت جلوهٔ بصری راه‌راه استفاده کنید. در اینترنت اکسپلورر ۷ و ۸ موجود نیست.

  1. <div class="progress progress-striped">
  2. <div class="bar" style="width: 20%;"></div>
  3. </div>

دارای حرکت

کلاس .active را به .progress-striped برای ایجاد حرکت از راست به چپ اضافه کنید. در هیچ نسخهٔ اینترنت اکسپلورر موجود نیست.

  1. <div class="progress progress-striped active">
  2. <div class="bar" style="width: 40%;"></div>
  3. </div>

پشته‌ای

چندین نوار را در یک .progress به‌صورت پشته‌ای قرار دهید.

  1. <div class="progress">
  2. <div class="bar bar-success" style="width: 35%;"></div>
  3. <div class="bar bar-warning" style="width: 20%;"></div>
  4. <div class="bar bar-danger" style="width: 10%;"></div>
  5. </div>

انتخاب‌ها

رنگ‌های بیشتر

نوارهای پیشرفت از کلاس‌های دکمه‌ها و اخطارها برای شیوهٔ نمایش یک‌دست استفاده می‌کند.

  1. <div class="progress progress-info">
  2. <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success">
  5. <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning">
  8. <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger">
  11. <div class="bar" style="width: 80%"></div>
  12. </div>

نوارهای راه‌راه

به‌مانند تک‌رنگ‌ها، ما می‌توانیم از نوارهای پیشرفت راه‌راه استفاده کنیم.

  1. <div class="progress progress-info progress-striped">
  2. <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success progress-striped">
  5. <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning progress-striped">
  8. <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger progress-striped">
  11. <div class="bar" style="width: 80%"></div>
  12. </div>

پشتیبانی مرورگرها

نوارهای پیشرفت از گرادیانت، انتقال‌ها و پویانمایی‌ها برای جلوه‌های بصری استفاده می‌کند. این ویژگی‌ها در مرورگر اینترنت اکسپلورر ۷ تا ۹ و نسخه‌های قدیمی فایرفاکس پشتیبانی نمی‌شود.

نسخه‌های قدیمی‌تر از اینترنت اکسپلورر ۱۰ و اپرا ۱۲ از پویانمایی‌ها پشتیبانی نمی‌کنند.

شیوه‌های نمایش اشیای انتزاعی برای ساخت انواع مختلف اجزا (مانند دیدگاه‌های بلاگ، توییت‌ها و غیره) که عکسی راست‌چین و یا چپ‌چین نیز می‌تواند در کنار آن قرار گیرد.

نمونه پیش‌فرض

رسانه پیش‌فرض به شما اجازهٔ قرارگیری یک شی رسانهٔ معلق (عکس، ویدیو، صدا) به راست یا چپ محتویات بلاک را می‌دهد.

64x64

تیتر رسانه

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.
64x64

تیتر رسانه

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.
64x64

تیتر رسانه

"نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.
  1. <div class="media">
  2. <a class="pull-right" href="#">
  3. <img class="media-object" data-src="holder.js/64x64">
  4. </a>
  5. <div class="media-body">
  6. <h4 class="media-heading">تیتر رسانه</h4>
  7. ...
  8.  
  9. <!-- Nested media object -->
  10. <div class="media">
  11. ...
  12. </div>
  13. </div>
  14. </div>

فهرست رسانه

با مقداری زبان نشانه‌گذاری اضافه، می‌توانید از رسانه در داخل فهرست‌ها استفاده کنید (مناسب برای دیدگاه‌های چندنخی و فهرست مقاله‌ها).

  • 64x64

    تیتر رسانه

    "نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.

    64x64

    تیتر فرورفته رسانه

    "نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.
    64x64

    تیتر فرورفته رسانه

    "نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.
    64x64

    تیتر فرورفته رسانه

    "نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.
  • 64x64

    تیتر رسانه

    "نرم‌افزار آزاد" به معنای "غیر تجاری" نیست. یک برنامه آزاد باید برای استفاده تجاری، توسعه تجاری، و توزیع تجاری در دسترس باشد. توسعه تجاری نرم‌افزار آزاد دیگر غیر معمول نیست، بلکه چنین نرم‌افزارهای آزاد تجاری بسیار مهم هستند.
  1. <ul class="media-list">
  2. <li class="media">
  3. <a class="pull-right" href="#">
  4. <img class="media-object" data-src="holder.js/64x64">
  5. </a>
  6. <div class="media-body">
  7. <h4 class="media-heading">تیتر رسانه</h4>
  8. ...
  9.  
  10. <!-- Nested media object -->
  11. <div class="media">
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

چاه‌ها

از چاه برای ایجاد جلوه بصری inset بر روی یک عنصر استفاده کنید.

ببین، من در چاه هستم!
  1. <div class="well">
  2. ...
  3. </div>

کلاس‌های اختیاری

حاشیه‌ها و گرد کردن گوشه‌ها را با استفاده از دو کلاس زیر، کنترل کنید.

ببین، من در چاه هستم!
  1. <div class="well well-large">
  2. ...
  3. </div>
ببین، من در چاه هستم!
  1. <div class="well well-small">
  2. ...
  3. </div>

آیکن بستن

از آیکن بستن برای حذف محتواهایی مانند مُدال‌ها و اخطارها استفاده کنید.

  1. <button class="close">&times;</button>

سیستم‌عامل iOS نیاز به یک href="#" برای کلیک کردن یک رویداد نیاز دارد.

  1. <a class="close" href="#">&times;</a>

کلاس‌های کمکی

کلاس‌های ساده برای استفاده از صفحه نمایش‌های کوچک و تغییر رفتار.

.pull-left

یک عنصر را به سمت چپ می‌برد.

  1. class="pull-left"
  1. .pull-left {
  2. float: left;
  3. }

.pull-right

یک عنصر را به سمت راست می‌برد.

  1. class="pull-right"
  1. .pull-right {
  2. float: right;
  3. }

.muted

رنگ یک عنصر را به #999 تغییر می‌دهد.

  1. class="muted"
  1. .muted {
  2. color: #999;
  3. }

.clearfix

float در هر عنصری را حذف می‌کند.

  1. class="clearfix"
  1. .clearfix {
  2. *zoom: 1;
  3. &:before,
  4. &:after {
  5. display: table;
  6. content: "";
  7. }
  8. &:after {
  9. clear: both;
  10. }
  11. }