مجموعات الأزرار

استخدم مجموعات الأزرار لضم أزرار متعددة معًا كمكون مركب واحد. قم ببنائها بسلسلة من العناصر <a>أو <button>العناصر.

أفضل الممارسات

نوصي بالإرشادات التالية لاستخدام مجموعات الأزرار وأشرطة الأدوات:

• استخدم دائمًا نفس العنصر في مجموعة أزرار واحدة ، <a>أو <button>.
• لا تخلط الأزرار ذات الألوان المختلفة في نفس مجموعة الأزرار.
• استخدم الرموز بالإضافة إلى النص أو بدلاً منه ، ولكن تأكد من تضمين النص البديل ونص العنوان عند الاقتضاء.

يجب استدعاء مجموعات الأزرار ذات الصلة ذات القوائم المنسدلة (انظر أدناه) بشكل منفصل وتضمين دائمًا علامة إقحام قائمة منسدلة للإشارة إلى السلوك المقصود.

المثال الافتراضي

إليك كيف يبحث HTML عن مجموعة أزرار قياسية تم إنشاؤها باستخدام أزرار علامات الارتساء:

<div class = "btn-group" > 
  <a class = "btn" href = "#"> 1 </a> _  
  <a class = "btn" href = "#"> 2 </a> _  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

مثال على شريط الأدوات

اجمع مجموعات من <div class="btn-group">في a <div class="btn-toolbar">للحصول على مكونات أكثر تعقيدًا.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

مربع الاختيار والنكهات الراديو

يمكن أن تعمل مجموعات الأزرار أيضًا كأجهزة راديو ، حيث قد يكون زر واحد فقط نشطًا ، أو مربعات اختيار ، حيث يمكن تنشيط أي عدد من الأزرار. عرض مستندات جافا سكريبت لذلك.

احصل على جافا سكريبت »

انتباه

CSS لمجموعات الأزرار موجود في ملف منفصل ، Button-groups.less.

القوائم المنسدلة للأزرار

استخدم أي زر لتشغيل قائمة منسدلة عن طريق وضعها داخل علامة .btn-groupالقائمة المناسبة وتوفيرها.

انتباه! تتطلب القوائم المنسدلة للأزرار تشغيل المكون الإضافي المنسدل Bootstrap .

مثال على الترميز

على غرار مجموعة الأزرار ، يستخدم الترميز الخاص بنا ترميزًا منتظمًا للأزرار ، ولكن مع عدد قليل من الإضافات لتحسين النمط ودعم البرنامج المساعد jQuery المنسدلة في Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    عمل
    <span class = "caret" > </span> 
  </a>
  <ul class = "القائمة المنسدلة" > 
    <! - روابط القائمة المنسدلة ->
  </ul>
</div>

القوائم المنسدلة لزر الانقسام

بناءً على أنماط مجموعة الأزرار والترميز ، يمكننا بسهولة إنشاء زر تقسيم. تتميز أزرار الانقسام بإجراء قياسي على اليسار وقائمة منسدلة للتبديل على اليمين مع روابط سياقية.

مثال على الترميز

قمنا بتوسيع القوائم المنسدلة للأزرار العادية لتوفير إجراء زر ثانٍ يعمل كمشغل قائمة منسدلة منفصل.

<div class = "btn-group" > 
  <a class = "btn" href = "#"> الإجراء </a> _  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    <span class = "caret" > </span> 
  </a>
  <ul class = "القائمة المنسدلة" > 
    <! - روابط القائمة المنسدلة ->
  </ul>
</div>

فئة أساسية قوية

تشترك جميع مكونات التنقل هنا - علامات التبويب ، وأقراص الأقراص ، والقوائم - في نفس العلامات الأساسية والأنماط من خلال .navالفصل الدراسي.

متى يجب استخدام

تعد علامات التبويب والحبوب رائعة لأقسام المحتوى أو التنقل بين صفحات المحتوى ذي الصلة.

محاذاة المكونات

لمحاذاة روابط التنقل ، استخدم فئات .pull-leftأو الأداة المساعدة. .pull-rightكلا الفئتين سيضيفان CSS float في الاتجاه المحدد.

علامات التبويب الأساسية

خذ عددًا منتظمًا <ul>من الروابط وأضف .nav-tabs:

• مسكن
• الملف الشخصي
• رسائل

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#"> الصفحة الرئيسية </a> 
  </li>
  <li> <a href = "#"> ... </a> < /li> 
  <li> <a href = "#"> ... </a> < /li> 
</ul>

الحبوب الأساسية

خذ نفس HTML ، ولكن استخدم .nav-pillsبدلاً من ذلك:

• مسكن
• الملف الشخصي
• رسائل

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href = "#"> الصفحة الرئيسية </a> 
  </li>
  <li> <a href = "#"> ... </a> < /li> 
  <li> <a href = "#"> ... </a> < /li> 
</ul>

كيفية تكديس م

نظرًا لأن علامات التبويب والحبوب أفقية بشكل افتراضي ، ما عليك سوى إضافة فئة ثانية ، .nav-stackedلجعلها تظهر مكدسة عموديًا.

علامات تبويب مكدسة

• مسكن
• الملف الشخصي
• رسائل

<ul class = "nav-tabs nav-stacked" > 
  ...
</ul>

حبوب مكدسة

• مسكن
• الملف الشخصي
• رسائل

<ul class = "nav-pills nav-stacked" > 
  ...
</ul>

القوائم الغنية أصبحت سهلة

القوائم المنسدلة في علامات تبويب وأقراص Bootstrap سهلة للغاية ولا تتطلب سوى القليل من HTML الإضافي ومكوِّن jQuery خفيف الوزن.

توجه إلى صفحة Javascript لقراءة المستندات الخاصة بتهيئة القوائم المنسدلة في Bootstrap.

علامات التبويب مع القوائم المنسدلة

• مسكن
• الملف الشخصي
• اسقاط
  • عمل
  • عمل آخر
  • شيء آخر هنا
  • رابط منفصل

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "قائمة منسدلة"
       href = "#" >
        اسقاط
        <b class = "caret" > </b> 
      </a>
    <ul class = "القائمة المنسدلة" > 
      <! - روابط ->
    </ul>
  </li>
</ul>

حبوب مع قوائم منسدلة

• مسكن
• الملف الشخصي
• اسقاط
  • عمل
  • عمل آخر
  • شيء آخر هنا
  • رابط منفصل

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "قائمة منسدلة"
       href = "#" >
        اسقاط
        <b class = "caret" > </b> 
      </a>
    <ul class = "القائمة المنسدلة" > 
      <! - روابط ->
    </ul>
  </li>
</ul>

التنقل بنمط التطبيق

توفر قوائم التنقل طريقة بسيطة وسهلة لإنشاء مجموعات من روابط التنقل باستخدام رؤوس اختيارية. من الأفضل استخدامها في الشريط الجانبي مثل Finder في OS X.

من الناحية الهيكلية ، فهي مبنية على نفس أنماط التنقل الأساسية مثل علامات التبويب والحبوب ، لذلك يكون الاستخدام والتخصيص مباشرًا.

مع الرموز

من السهل أيضًا تجهيز قوائم التنقل بالأيقونات. <i>أضف العلامة المناسبة مع الفصل وستكون جاهزًا.

مثال على قائمة التنقل

خذ قائمة بالارتباطات وأضف class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    رأس القائمة
  </li>
  <li class = "active" > 
    <a href = "#"> الصفحة الرئيسية </a> 
  </li>
  <li>
    <a href = "#"> المكتبة </a> _ 
  </li>
  ...
</ul>

مثال مع الرموز

نفس المثال ، ولكن مع <i>علامات للرموز.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#"> _ 
      <i class = "icon-book" > </i> 
      مكتبة
    </a>
  </li>
  ...
</ul>

ما يحتويه

اجعل علامات التبويب الخاصة بك تنبض بالحياة باستخدام مكون إضافي بسيط للتبديل بين المحتوى عبر علامات التبويب. يدمج Bootstrap علامات التبويب القابلة للجدولة في أربعة أنماط: أعلى (افتراضي) ، ويمين ، وأسفل ، ويسار.

التغيير بينهما سهل ولا يتطلب سوى تغيير بسيط للغاية في الترميز.

مثال قابل للجدولة

لجعل علامات التبويب قابلة للجدولة ، قم بلف علامة .nav-tabsdiv أخرى بالفصل الدراسي .tabbable.

البرنامج المساعد jQuery المخصص

يتم تشغيل جميع علامات التبويب القابلة للجدولة بواسطة المكون الإضافي jQuery خفيف الوزن. اقرأ المزيد حول كيفية إضفاء الحيوية على علامات التبويب القابلة للجدولة في صفحة مستندات جافا سكريبت.

احصل على javascript →

علامات التبويب في الأسفل

اقلب ترتيب HTML وأضف فئة لوضع علامات التبويب في الأسفل.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

علامات التبويب على اليسار

قم بتبديل الفصل لوضع علامات التبويب على اليسار.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

علامات التبويب على اليمين

قم بتبديل الفصل لوضع علامات التبويب على اليمين.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

سقالات نافبار

لا يتطلب شريط التنقل سوى عدد قليل من divs لهيكله جيدًا للعرض الثابت أو الثابت.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

نافبار ثابت

لجعل شريط التنقل مثبتًا في الجزء العلوي من منفذ العرض ، أضف .navbar-fixed-topإلى الجزء الخارجي div ، .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

في CSS الخاص بك ، ستحتاج أيضًا إلى حساب التداخل الذي تسببه عن طريق إضافة 40 بكسل أو أكثر من الحشو إلى ملف <body>. تأكد من إضافة هذا بعد Bootstrap CSS الأساسي وقبل CSS المستجيب الاختياري.

اسم العلامة التجارية

رابط بسيط لإظهار علامتك التجارية أو اسم مشروعك لا يتطلب سوى علامة ارتساء.

<a class = "brand" href = "#"> _  
  اسم المشروع
</a>

نموذج بحث

تتلقى نماذج البحث أنماطًا مخصصة في شريط التنقل مع .navbar-searchالفئة. تضمين .pull-leftأو .pull-rightعلى formمحاذاة.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

تباين استجابة اختياري

اعتمادًا على كمية المحتوى في الشريط العلوي ، قد ترغب في تنفيذ الخيارات سريعة الاستجابة. للقيام بذلك ، قم بلف محتوى التنقل الخاص بك في عنصر div يحتوي ، .nav-collapse.collapseوأضف زر تبديل شريط التنقل ، .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <! - .btn-navbar يُستخدم للتبديل لمحتوى شريط التنقل المطوي ->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
      </a>
 
      <! - تأكد من ترك العلامة التجارية هناك إذا كنت تريد عرضها ->
      <a class = "brand" href = "#"> اسم المشروع </a>  
 
      <! - كل ما تريد إخفاءه بدقة 940 بكسل أو أقل ، ضعه هنا ->
      <div class = "nav-collapse" > 
        <! - .nav ، .navbar-search ، .navbar-form ، إلخ ->
      </div>
 
    </div>
  </div>
</div>

روابط التنقل

عناصر التنقل سهلة الإضافة عبر القوائم غير المرتبة.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#"> الصفحة الرئيسية </a> 
  </li>
  <li> <a href = "#"> ارتباط </a> < /li> 
  <li> <a href = "#"> ارتباط </a> < /li> 
</ul>

يمكنك بسهولة إضافة فواصل إلى روابط التنقل الخاصة بك باستخدام عنصر قائمة فارغ وفصل بسيط. فقط أضف هذا بين الروابط:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" > </li> 
  ...
</ul>

محاذاة المكونات

لمحاذاة التنقل أو نموذج البحث أو النص ، استخدم فئات .pull-leftأو الأداة المساعدة. .pull-rightكلا الفئتين سيضيفان CSS float في الاتجاه المحدد.

إضافة القوائم المنسدلة

تعد إضافة القوائم المنسدلة إلى التنقل أمرًا بسيطًا للغاية ، ولكنها تتطلب استخدام مكون جافا سكريبت الإضافي الخاص بنا .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "القائمة المنسدلة" >
          الحساب
          <b class = "caret" > </b> 
    </a>
    <ul class = "القائمة المنسدلة" > 
      ...
    </ul>
  </li>
</ul>

احصل على javascript →

لماذا نستخدمها

يتم استخدام التنقل عبر مسار التنقل كطريقة لإظهار المستخدمين مكان وجودهم داخل تطبيق أو موقع ، ولكن ليس للتنقل الأساسي. حافظ على استخدامها ضئيلًا وموجزًا ​​لتكون أكثر فاعلية.

أمثلة

يظهر مثال واحد لأنه قد يتم عرضه عبر صفحات متعددة.

• مسكن

• الرئيسية /
• مكتبة

• الرئيسية /
• مكتبة /
• بيانات

وضع علامة على

HTML هي قائمتك القياسية غير المرتبة التي تحتوي على روابط.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#"> الصفحة الرئيسية </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#"> المكتبة </a> < span class = "divider" > / </span>   
  </li>
  <li class = "active" > 
    <a href = "#"> البيانات </a> _ 
  </li>
</ul>

متى يجب استخدام

ترقيم صفحات فائق التبسيط ومصمم بأدنى حد مستوحى من Rdio ، وهو رائع للتطبيقات ونتائج البحث. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.

روابط الصفحات ذات الحالة

الروابط قابلة للتخصيص وتعمل في عدد من الظروف مع الفئة المناسبة. .disabledللروابط غير القابلة للنقر وللصفحة .activeالحالية.

محاذاة مرنة

أضف أيًا من الفئتين الاختياريين لتغيير محاذاة روابط ترقيم الصفحات: .pagination-centeredو .pagination-right.

أمثلة

مكون ترقيم الصفحات الافتراضي مرن ويعمل في عدد من الاختلافات.

وضع علامة على

ملفوفة في <div>ترقيم الصفحات هو مجرد ملف <ul>.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> السابق </a> < /li> 
    <li class = "active" > 
      <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 = "pager" > 
  <li>
    <a href = "#"> السابق </a> _ 
  </li>
  <li>
    <a href = "#"> التالي </a> _ 
  </li>
</ul>

الروابط المحاذاة

بدلاً من ذلك ، يمكنك محاذاة كل رابط بالجوانب:

• ← أقدم
• أحدث →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#"> & larr؛ أقدم </a> 
  </li>
  <li class = "next" > 
    <a href = "#"> أحدث & rarr؛ </a> 
  </li>
</ul>

يوفر Bootstrap مكونًا خفيفًا ومرنًا يسمى وحدة البطل لعرض المحتوى على موقعك. إنه يعمل بشكل جيد على مواقع التسويق والمحتوى الثقيل.

وضع علامة على

لف المحتوى الخاص بك في divمثل هذا:

<div class = "hero-unit" > 
  <h1> العنوان </ h1>
  <p> سطر الوصف </ p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      يتعلم أكثر
    </a>
  </p>
</div>

قشرة بسيطة h1لتقسيم أقسام المحتوى على الصفحة بشكل مناسب وتقسيمها. يمكنه استخدام العنصر h1الافتراضي الخاص smallبـ "، بالإضافة إلى معظم المكونات الأخرى (مع أنماط إضافية).

<div class = "page-haeder" > 
  <h1> مثال على رأس الصفحة </ h1>
</div>

الصور المصغرة الافتراضية

بشكل افتراضي ، تم تصميم الصور المصغرة لـ Bootstrap لعرض الصور المرتبطة بالحد الأدنى من العلامات المطلوبة.

عالية للتخصيص

مع القليل من الترميز الإضافي ، من الممكن إضافة أي نوع من محتوى HTML مثل العناوين أو الفقرات أو الأزرار إلى الصور المصغرة.

• 

  تسمية الصورة المصغرة

  Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

  عمل عمل

• 

  تسمية الصورة المصغرة

  Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

  عمل عمل

لماذا استخدام الصور المصغرة

تعد الصور المصغرة (سابقًا .media-gridحتى الإصدار 1.4) رائعة لشبكات الصور أو مقاطع الفيديو ونتائج البحث عن الصور ومنتجات البيع بالتجزئة والمحافظ وغير ذلك الكثير. يمكن أن تكون روابط أو محتوى ثابت.

ترميز بسيط ومرن

يعد ترميز الصور المصغرة أمرًا بسيطًا — كل ما هو مطلوب ulمع أي عدد من العناصر. liإنه أيضًا مرن للغاية ، مما يسمح بأي نوع من المحتوى مع المزيد من الترميز قليلاً لالتفاف محتوياتك.

يستخدم أحجام أعمدة الشبكة

أخيرًا ، يستخدم مكون الصور المصغرة فئات نظام الشبكة الحالية - مثل .span2أو .span3- للتحكم في أبعاد الصورة المصغرة.

الترميز

كما ذكرنا سابقًا ، فإن الترميز المطلوب للصور المصغرة خفيف ومباشر. فيما يلي نظرة على الإعداد الافتراضي للصور المرتبطة :

<ul class = "مصغرات" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

بالنسبة لمحتوى HTML المخصص في الصور المصغرة ، يتغير الترميز قليلاً. للسماح بمحتوى مستوى الحظر في أي مكان ، نستبدل <a>بـ <div>مثل:

<ul class = "مصغرات" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> تسمية الصورة المصغرة </ h5>
      <p> التسمية التوضيحية للصورة المصغرة هنا ... </ p>
    </div>
  </li>
  ...
</ul>

مزيد من الأمثلة

استكشف جميع خياراتك مع فئات الشبكة المختلفة المتاحة لك. يمكنك أيضًا مزج ومطابقة أحجام مختلفة.

الفئة الأساسية المعاد كتابتها

باستخدام Bootstrap 2 ، قمنا بتبسيط الفئة الأساسية: .alertبدلاً من .alert-message. لقد قمنا أيضًا بتخفيض الحد الأدنى من الترميز المطلوب — لا <p>مطلوب افتراضيًا ، فقط الخارجي <div>.

رسالة تنبيه واحدة

للحصول على مكون أكثر متانة برمز أقل ، قمنا بإزالة المظهر المميز لتنبيهات الحظر ، والرسائل التي تأتي مع مزيد من المساحة المتروكة ونصوص أكثر عادةً. تم تغيير الفصل أيضًا إلى .alert-block.

يذهب بشكل رائع مع جافا سكريبت

يأتي Bootstrap مزودًا بملحق jQuery رائع يدعم رسائل التنبيه ، مما يجعل رفضها سريعًا وسهلاً.

الحصول على المكون الإضافي »

مثال على التنبيهات

لف رسالتك وأيقونة إغلاق اختيارية في div مع فصل بسيط.

<div class = "alert" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <strong> تحذير! </strong> أفضل التحقق من نفسك ، أنت لا تبدو جيدة للغاية.
</div>

قم بتوسيع رسالة التنبيه القياسية بسهولة بفئتين اختياريتين: .alert-blockلمزيد من عناصر التحكم في الحشو والنص ولعنوان .alert-headingمطابق.

<div class = "alert-block" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <h4 class = "alert -head" > تحذير! </h4> 
  أفضل التحقق من نفسك ، أنت لست ...
</div>

خطأ أو خطر

<div class = "alert-error" > 
  ...
</div>

النجاح

<div class = "alert-alert-success" > 
  ...
</div>

معلومة

<div class = "alert-info" > 
  ...
</div>

أساسي

شريط التقدم الافتراضي مع تدرج عمودي.

<div class = "progress" > 
  <div class = "bar" 
       style = " width : 60 ٪؛ " > </div> 
</div>

مخطط

يستخدم التدرج اللوني لإنشاء تأثير مخطط.

<div class = "progress-info 
     مخطط التقدم " >
  <div class = "bar" 
       style = " width : 20 ٪؛ " > </div> 
</div>

مفعم بالحيوية

يأخذ المثال المخطط ويحركه.

<div class = "التقدم - خطر التقدم 
     مخطط التقدم نشط " >
  <div class = "bar" 
       style = " width : 40 ٪؛ " > </div> 
</div>

ألوان إضافية

تستخدم أشرطة التقدم بعضًا من نفس أسماء الفئات مثل الأزرار والتنبيهات لتصميم مماثل.

• .progress-info
• .progress-success
• .progress-danger

بدلاً من ذلك ، يمكنك تخصيص ملفات LESS ولف الألوان والأحجام الخاصة بك.

سلوك

تستخدم أشرطة التقدم انتقالات CSS3 ، لذلك إذا قمت بضبط العرض ديناميكيًا عبر جافا سكريبت ، فسيتم تغيير حجمه بسلاسة.

إذا كنت تستخدم .activeالفصل ، .progress-stripedفستقوم أشرطة التقدم بتحريك الخطوط من اليسار إلى اليمين.

دعم المتصفح

تستخدم أشرطة التقدم التدرجات ، والانتقالات ، والرسوم المتحركة CSS3 لتحقيق كل تأثيراتها. هذه الميزات غير مدعومة في IE7-8 أو الإصدارات الأقدم من Firefox.

لا يدعم Opera الرسوم المتحركة في الوقت الحالي.

آبار

استخدم أيضًا تأثيرًا بسيطًا على عنصر ما لإعطائه تأثيرًا داخليًا.

<div class = "well" > 
  ...
</div>

شارات

استخدم شارة على عنصر لحساب عدد غير مقروء أو كمؤشر بسيط.

<span class = "شارة" > 3 </div> 

رمز الإغلاق

استخدم رمز الإغلاق العام لرفض محتوى مثل الوسائط والتنبيهات.

×

<a class = "close"> & times؛ </a>