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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

القوائم المنسدلة في مجموعات الأزرار

انتباه! .btn-groupيجب أن تكون الأزرار ذات القوائم المنسدلة ملفوفة بشكل فردي داخل الأزرار الخاصة بها .btn-toolbarللعرض الصحيح.

نظرة عامة وأمثلة

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

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

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

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

يعمل مع جميع أحجام الأزرار

تعمل القوائم المنسدلة للأزرار بأي حجم. أحجام الأزرار الخاصة بك إلى .btn-large، .btn-smallأو .btn-mini.

يتطلب جافا سكريبت

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

في بعض الحالات - مثل الجوال - ستمتد القوائم المنسدلة خارج إطار العرض. تحتاج إلى حل المحاذاة يدويًا أو باستخدام جافا سكريبت مخصص.

نظرة عامة وأمثلة

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

الأحجام

استخدم فئات الأزرار الإضافية .btn-mini، .btn-smallأو .btn-largeللتحجيم.

<div class = "btn-group" > 
  ...
  <ul class = "المنسدلة-menu pull-right" > 
    <! - روابط القائمة المنسدلة ->
  </ul>
</div>

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

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

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

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

يمكن أيضًا تبديل القوائم المنسدلة من الأسفل إلى الأعلى عن طريق إضافة فئة واحدة إلى الأصل المباشر لـ .dropdown-menu. سيقلب اتجاه .caretالقائمة ويعيد وضع القائمة نفسها للانتقال من أسفل إلى أعلى بدلاً من أعلى لأسفل.

<div class = "btn-group dropup" > 
  <button class = "btn" > إسقاط </ زر> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <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>أضف العلامة المناسبة مع الفصل وستكون جاهزًا.

فواصل أفقية

أضف فاصلًا أفقيًا عن طريق إنشاء عنصر قائمة فارغ مع الفصل .divider، كالتالي:

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

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

خذ قائمة بالارتباطات وأضف 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 علامات التبويب القابلة للجدولة في أربعة أنماط: أعلى (افتراضي) ، ويمين ، وأسفل ، ويسار.

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

تتلاشى في علامات التبويب

لجعل علامات التبويب تتلاشى ، أضف .fadeإلى كل منها .tab-pane.

يتطلب البرنامج المساعد jQuery

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

احصل على javascript →

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

لجعل علامات التبويب قابلة للجدولة ، قم بإنشاء .tab-paneمعرف فريد لكل علامة تبويب وقم بلفها .tab-content.

بالنسبة لعلامات التبويب المحاذية لليمين أو اليسار ، قم بلف .nav-tabsو ..tab-content.tabbable

ترميز مباشر

يتطلب استخدام علامات التبويب القابلة للجدولة div التفاف ومجموعة من علامات التبويب ومجموعة من أجزاء المحتوى القابلة للجدولة.

<div class = "tabbable" > <! - مطلوب فقط لعلامات التبويب اليسرى / اليمنى ->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" > <a href = "#tab1" data-toggle = "tab"> القسم 1 </a> < /li>   
    <li> <a href = "#tab2" data-toggle = "tab"> القسم 2 </a> < /li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> أنا في القسم 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> مرحبًا ، أنا في القسم 2. </p>
    </div>
  </div>
</div>

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

اقلب ترتيب 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>

نافبار ثابت

ثبت شريط التنقل أعلى أو أسفل منفذ العرض بفئة إضافية في الجزء الخارجي من div .navbar.

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

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

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

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

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

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

النماذج في نافبار

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

للحصول على نموذج بحث أكثر تخصيصًا ، أضف .navbar-searchإلى formوإلى .search-queryالمدخلات للأنماط المتخصصة في شريط التنقل.

<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 →

نص في شريط التنقل

قم بلف سلاسل النص في a <.navbar-text>، وعادةً ما تكون على <p>علامة من أجل المسافة البادئة واللون المناسبين.

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

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

أمثلة

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

• مسكن

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

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

وضع علامة على

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" > البيانات </ 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>

حول جهاز النداء

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

حالة تعطيل اختيارية

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

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

بشكل افتراضي ، يقوم جهاز الاستدعاء بتوسيط الروابط.

• سابق
• التالي

<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>

حول

الشارات هي مكونات صغيرة وبسيطة لعرض مؤشر أو عدد من نوع ما. يتم العثور عليها بشكل شائع في عملاء البريد الإلكتروني مثل Mail.app أو على تطبيقات الجوال لإشعارات الدفع.

الفصول المتاحة

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

وضع علامة على

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

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

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

<div class = "page-header" > 
  <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" > 
  <button class = "close" data-رفض = "alert" > × </button>  
  <strong> تحذير! </strong> أفضل التحقق من نفسك ، أنت لا تبدو جيدة للغاية.
</div>

انتباه! تتطلب أجهزة iOS href="#"رفض التنبيهات. تأكد من تضمينه وسمة البيانات لرموز إغلاق المرساة. بدلاً من ذلك ، يمكنك استخدام <button>عنصر بسمة البيانات ، وهو ما اخترناه لمستنداتنا. عند الاستخدام <button>، يجب عليك تضمين type="button"وإلا لن يتم إرسال النماذج الخاصة بك.

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

<div class = "alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#"> × </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>

مخطط

يستخدم تدرجًا لإنشاء تأثير مخطط (بدون IE).

<div class = "progress-striped" > 
  <div class = "bar" 
       style = " width : 20 ٪؛ " > </div> 
</div>

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

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

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

ألوان إضافية

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

أشرطة مخططة

على غرار الألوان الصلبة ، لدينا أشرطة تقدم مخططة متنوعة.

سلوك

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

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

دعم المتصفح

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

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

آبار

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

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

رمز الإغلاق

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

×

<button class = "close" > مرات؛ </button> 

تتطلب أجهزة iOS href = "#" للنقر فوق الأحداث إذا كنت تفضل استخدام مرساة.

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