مثال

قائمة سياقية قابلة للتبديل لعرض قوائم الروابط. أصبحت تفاعلية مع البرنامج المساعد JavaScript المنسدل .

<ul class = "المنسدلة-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> الإجراء </a> < /li>  
  <li> <a tabindex = "-1" href = "#"> إجراء آخر </a> < /li>  
  <li> <a tabindex = "-1" href = "#"> شيء آخر هنا </a> < /li>  
  <li class = "divider" > </li> 
  <li> <a tabindex = "-1" href = "#"> رابط منفصل </a> < /li>  
</ul>

وضع علامة على

بالنظر إلى القائمة المنسدلة فقط ، إليك HTML المطلوب. تحتاج إلى التفاف مشغل القائمة المنسدلة والقائمة المنسدلة بداخلها .dropdown، أو عنصر آخر يعلن position: relative;. ثم فقط قم بإنشاء القائمة.

<div class = "dropdown" > 
  <! - ارتباط أو زر لتبديل القائمة المنسدلة ->
  <ul class = "القائمة المنسدلة" role = "menu" aria-labelledby = "dLabel" >   
    <li> <a tabindex = "-1" href = "#"> الإجراء </a> < /li>  
    <li> <a tabindex = "-1" href = "#"> إجراء آخر </a> < /li>  
    <li> <a tabindex = "-1" href = "#"> شيء آخر هنا </a> < /li>  
    <li class = "divider" > </li> 
    <li> <a tabindex = "-1" href = "#"> رابط منفصل </a> < /li>  
  </ul>
</div>

خيارات

قم بمحاذاة القوائم إلى اليمين وإضافة تتضمن مستويات إضافية من القوائم المنسدلة.

محاذاة القوائم

أضف .pull-rightإلى .dropdown-menuاليمين محاذاة القائمة المنسدلة.

<ul class = "المنسدلة-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

القوائم الفرعية في القوائم المنسدلة

أضف مستوى إضافيًا من القوائم المنسدلة ، التي تظهر عند التمرير مثل تلك الموجودة في OS X ، مع بعض الإضافات البسيطة للترميز. أضف .dropdown-submenuإلى أي liقائمة منسدلة موجودة للتصميم التلقائي.

<ul class = "القائمة المنسدلة" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#"> المزيد من الخيارات </a>  
    <ul class = "القائمة المنسدلة" > 
      ...
    </ul>
  </li>
</ul>

أمثلة

خياران أساسيان ، إلى جانب شكلين أكثر تحديدًا.

مجموعة أزرار واحدة

لف سلسلة من الأزرار .btnبداخلها .btn-group.

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

مجموعات الأزرار العمودية

اجعل مجموعة من الأزرار تظهر مكدسة رأسيًا وليس أفقيًا.

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

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

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

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

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

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

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

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

يتطلب JavaScript

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

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

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

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

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

الأحجام

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > إجراء </ زر> 
  <button class = "btn btn-mini 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الفصل الدراسي.

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

خذ عددًا منتظمًا <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>

دولة المعوقين

بالنسبة إلى أي مكون تنقل (علامات تبويب أو أقراص أو قائمة) ، أضف روابط رمادية ولا توجد تأثيرات.disabled تمرير . ومع ذلك ، ستظل الروابط قابلة للنقر ما لم تقم بإزالة السمة. بدلاً من ذلك ، يمكنك تنفيذ JavaScript مخصص لمنع هذه النقرات.href

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

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

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

سهل التخزين

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

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

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

حبوب مكدسة

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

هبوط قطرة

أضف القوائم المنسدلة مع القليل من HTML الإضافي والقوائم المنسدلة JavaScript plugin .

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

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

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

خذ قائمة بالارتباطات وأضف 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>

ملحوظةللتداخل داخل قائمة التنقل ، قم بتضمين class="nav nav-list"أي متداخلة <ul>.

فواصل أفقية

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

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

Tabbable nav

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

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

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

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

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

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

يتطلب البرنامج المساعد 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>

نافبار الأساسي

للبدء ، تكون أشرطة التنقل ثابتة (غير مثبتة في الأعلى) وتتضمن دعمًا لاسم المشروع والتنقل الأساسي. ضع واحدة في أي مكان داخل .container، مما يحدد عرض موقعك ومحتواك.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> العنوان </a> _  
    <ul class = "nav" > 
      <li class = "active" > <a href = "#"> الصفحة الرئيسية </a> </li>  
      <li> <a href = "#"> ارتباط </a> < /li> 
      <li> <a href = "#"> ارتباط </a> < /li> 
    </ul>
  </div>
</div>

مكونات نافبار

ماركة

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

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

روابط التنقل

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

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

نماذج

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > إرسال </ زر>  
</form>

نموذج بحث

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

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

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

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

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

أضف القوائم المنسدلة والقوائم المنسدلة إلى التنقل مع القليل من الترميز والقوائم المنسدلة المكون الإضافي JavaScript .

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

قم بزيارة وثائق JavaScript المنسدلة لمزيد من الترميز والمعلومات حول القوائم المنسدلة للاتصال.

نص

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

اختلافات العرض الاختيارية

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

ثابت في الأعلى

أضف .navbar-fixed-topوتذكر حساب المنطقة المخفية تحتها عن طريق إضافة 40 بكسل على الأقل paddingإلى ملف <body>. تأكد من إضافة هذا بعد Bootstrap CSS الأساسي وقبل CSS المستجيب الاختياري.

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

ثابت في الأسفل

أضف .navbar-fixed-bottomبدلا من ذلك.

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

ثابت أعلى نافبار

قم بإنشاء شريط تنقل كامل العرض يتنقل بعيدًا مع الصفحة عن طريق الإضافة .navbar-static-top. على عكس .navbar-fixed-topالفصل الدراسي ، لا تحتاج إلى تغيير أي مساحة متروكة على body.

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

نافبار مستجيب

لتنفيذ شريط تنقل سريع الاستجابة قابل للطي ، قم بلف محتوى شريط التنقل الخاص بك في عنصر 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>

الاختلاف المقلوب

قم بتعديل مظهر شريط التنقل عن طريق الإضافة .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

أمثلة

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

<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 ، وهو رائع للتطبيقات ونتائج البحث. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> السابق </a> < /li> 
    <li> <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مع الروابط غير القابلة للنقر وللإشارة .activeإلى الصفحة الحالية.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" > <a href = "#"> السابق </a> < /li>  
    <li class = "active" > <a href = "#"> 1 </a> < /li>  
    ...
  </ul>
</div>

يمكنك اختياريًا تبديل نقاط الارتساء النشطة أو المعطلة بالمسافات لإزالة وظيفة النقر مع الاحتفاظ بالأنماط المقصودة.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" > <span> السابق </ span> </li> 
    <li class = "active" > <span> 1 </span> </li> 
    ...
  </ul>
</div>

الأحجام

يتوهم ترقيم الصفحات أكبر أو أصغر؟ أضف .pagination-large، .pagination-smallأو .pagination-miniلأحجام إضافية.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

محاذاة

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

<div class = "pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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>

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

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

<ul class = "pager" > 
  <li class = "معطل سابقًا" > 
    <a href = "#"> & larr؛ أقدم </a> 
  </li>
  ...
</ul>

ملصقات

شارات

وحدة البطل

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

<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> مثال على رأس الصفحة <small> نص فرعي للرأس </ small> </h1>
</div>

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

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

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

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

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

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

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

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

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

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

وضع علامة على

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

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

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

<ul class = "مصغرات" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> تسمية الصورة المصغرة </ h3>
      <p> التسمية التوضيحية للصورة المصغرة ... </ p>
    </div>
  </li>
  ...
</ul>

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

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

التنبيه الافتراضي

قم بلف أي نص وزر رفض اختياري .alertلرسالة تحذير أساسية.

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

أزرار الرفض

تتطلب متصفحات Mobile Safari و Mobile Opera ، بالإضافة إلى data-dismiss="alert"السمة ، href="#"رفض التنبيهات عند استخدام <a>علامة.

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

بدلاً من ذلك ، يمكنك استخدام <button>عنصر بسمة البيانات ، وهو ما اخترناه لمستنداتنا. عند الاستخدام <button>، يجب عليك تضمين type="button"وإلا لن يتم إرسال النماذج الخاصة بك.

<button type = "button" class = "close" data-رفض = "alert" > × </button>   

ارفض التنبيهات عبر JavaScript

استخدم المكون الإضافي jQuery للتنبيهات لرفض التنبيهات بسرعة وسهولة.

خيارات

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

<div class = "alert-block" > 
  <button type = "button" class = "close" data-رفض = "alert" > × </button>   
  <h4> تحذير! </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>

مخطط

يستخدم التدرج اللوني لإنشاء تأثير مخطط. غير متوفر في IE7-8.

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

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

أضف .activeلتحريك .progress-stripedالمشارب من اليمين إلى اليسار. غير متوفر في جميع إصدارات IE.

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

مرصوصة

ضع عدة أشرطة في نفس .progressلتكديسها.

<div class = "progress" > 
  <div class = "bar bar-success" style = " width : 35 ٪؛ " > </div>   
  <div class = "bar bar-warning" style = " width : 20 ٪؛ " > </div>   
  <div class = "bar bar-danger" style = " width : 10 ٪؛ " > </div>   
</div>

خيارات

ألوان إضافية

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 ٪ " > </div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " width : 40 ٪ " > </div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " width : 60 ٪ " > </div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 ٪ " > </div>   
</div>

أشرطة مخططة

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 ٪ " > </div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 ٪ " > </div>   
</div>
<div class = "التقدم - التحذير - شريط التقدم" > 
  <div class = "bar" style = " width : 60 ٪ " > </div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 ٪ " > </div>   
</div>

دعم المتصفح

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

الإصدارات الأقدم من Internet Explorer 10 و Opera 12 لا تدعم الرسوم المتحركة.

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

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

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

عنوان الوسائط

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.

عنوان الوسائط

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.

عنوان الوسائط

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.

<div class = "media" > 
  <a class = "pull-left" href = "#"> _  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media -eader" > عنوان الوسائط </ h4> 
    ...
 
    <! - كائن وسائط متداخل ->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

قائمة الوسائط

مع القليل من الترميز الإضافي ، يمكنك استخدام الوسائط داخل القائمة (مفيدة لسلاسل التعليقات أو قوائم المقالات).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#"> _  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media -eader" > عنوان الوسائط </ h4> 
      ...
 
      <! - كائن وسائط متداخل ->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

آبار

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

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

فصول اختيارية

التحكم في الحشو والزوايا الدائرية مع فئتين من فئات التعديل الاختيارية.

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

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

رمز الإغلاق

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

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

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

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

فصول المساعد

فصول بسيطة ومركزة لعرض صغير أو تعديلات على السلوك.

.pull-left

تعويم عنصر لليسار

class = "pull-left"

. سحب - اليسار {
  تعويم : يسار ؛
}

.pull-right

تعويم عنصر لليمين

class = "pull-right"

. اسحب - لليمين {
  تعويم : صحيح ؛
}

.muted

تغيير لون العنصر إلى#999

فئة = "كتم الصوت"

. صامت {
  اللون : # 999 ؛ 
}

.clearfix

امسح floatأي عنصر

فئة = "clearfix"

. clearfix {
  * تكبير : 1 ؛ 
  &: قبل ،
  &: بعد {
    عرض : طاولة ؛
    المحتوى : "" ؛ 
  }
  &: بعد {
    واضح : كلاهما ؛
  }
}