الحروف الرسومية المتاحة

يتضمن أكثر من 250 صورة رمزية بتنسيق خط من مجموعة Glyphicon Halflings. لا تتوفر عادةً Glyphicons Halflings مجانًا ، لكن منشئها جعلها متاحة لـ Bootstrap مجانًا. كتعبير عن الشكر ، نطلب منك فقط تضمين رابط يعود إلى Glyphicons كلما أمكن ذلك.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon ناقص
glyphicon glyphicon-cloud
مغلف glyphicon glyphicon-envelope
قلم رصاص رسومي
glyphicon glyphicon-glass
glyphicon موسيقى glyphicon
البحث عن glyphicon glyphicon
glyphicon glyphicon-heart
glyphicon glyphicon-star
نجمة فارغة glyphicon glyphicon
glyphicon glyphicon-user
فيلم glyphicon glyphicon-film
glyphicon glyphicon-th- كبير
glyphicon glyphicon-th
قائمة glyphicon glyphicon-th
glyphicon glyphicon-ok
glyphicon glyphicon- إزالة
تكبير الصورة glyphicon glyphicon-in
تصغير glyphicon glyphicon-out
glyphicon glyphicon-off
glyphicon إشارة glyphicon
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon المنزل glyphicon
ملف glyphicon glyphicon-file
الوقت glyphicon glyphicon
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
دائرة اللعب glyphicon glyphicon
تكرار glyphicon glyphicon -رر
تحديث glyphicon glyphicon-Refresh
glyphicon glyphicon-list-alt
قفل glyphicon glyphicon-lock
glyphicon علم رسومي
سماعات glyphicon glyphicon
glyphicon glyphicon-volume-off
glyphicon glyphicon-Volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon علامة glyphicon
glyphicon علامات glyphicon
glyphicon glyphicon-book
glyphicon إشارة مرجعية glyphicon
glyphicon glyphicon-print
كاميرا glyphicon glyphicon
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
ارتفاع النص glyphicon glyphicon
عرض النص glyphicon glyphicon
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
قائمة glyphicon glyphicon
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
الصورة الرمزية glyphicon
glyphicon glyphicon-map-marker
glyphicon glyphicon- ضبط
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon حصة رمزية
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon سريع للخلف
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
تقدم سريع glyphicon glyphicon
glyphicon glyphicon-step-forward
إخراج glyphicon glyphicon
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
علامة موافق glyphicon glyphicon
glyphicon glyphicon- علامة السؤال
glyphicon glyphicon-info- تسجيل
glyphicon glyphicon-screenshot
إزالة دائرة glyphicon glyphicon
دائرة glyphicon glyphicon-ok
دائرة حظر glyphicon glyphicon
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon- سهم لأسفل
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize- كامل
glyphicon glyphicon-resize-small
علامة تعجب-علامة glyphicon glyphicon
هدية glyphicon glyphicon
ورقة glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
علامة تحذير glyphicon glyphicon
طائرة glyphicon glyphicon
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
مغناطيس glyphicon glyphicon
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
عربة التسوق glyphicon glyphicon
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical. صورة رمزية رمزية-تغيير الحجم-عمودي
glyphicon glyphicon-resize-أفقي
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
شهادة glyphicon glyphicon
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon- اليد اليمنى
glyphicon glyphicon- جهة اليسار
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-دائرة-سهم-لليمين
glyphicon glyphicon-دائرة-سهم لليسار
glyphicon glyphicon- دائرة السهم لأعلى
glyphicon glyphicon-دائرة-سهم لأسفل
glyphicon glyphicon-global
مفتاح ربط glyphicon glyphicon
مهام glyphicon glyphicon
مرشح glyphicon glyphicon
حقيبة أوراق glyphicon glyphicon
glyphicon glyphicon-fullscreen
لوحة عدادات glyphicon glyphicon
مشبك ورقي glyphicon glyphicon-paperclip
glyphicon glyphicon-heart-فارغة
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon- فرز
glyphicon glyphicon مرتبة حسب الأبجدية
glyphicon glyphicon-Sort-by-alphabet-alt. الصورة الرمزية glyphicon-Sort-by-alphabet-alt
glyphicon glyphicon-Sort-by-order
glyphicon glyphicon- فرز حسب الطلب- بديل
السمات glyphicon glyphicon-Sort-by-attributes
الصورة الرمزية glyphicon-Sort-by-attributes-alt
glyphicon glyphicon دون رادع
glyphicon glyphicon- توسيع
glyphicon glyphicon-collapse
انهيار glyphicon glyphicon-up
تسجيل الدخول glyphicon glyphicon
فلاش glyphicon glyphicon-flash
تسجيل خروج glyphicon glyphicon
glyphicon glyphicon-new-window
سجل glyphicon glyphicon
حفظ glyphicon glyphicon-save
glyphicon glyphicon-open
حفظ glyphicon glyphicon
glyphicon glyphicon-import
تصدير glyphicon glyphicon
glyphicon glyphicon-send
القرص المرن glyphicon glyphicon-floppy
حفظ glyphicon glyphicon-floppy
glyphicon glyphicon-floppy-remove
الصورة الرمزية glyphicon-floppy save
glyphicon glyphicon-floppy-open
بطاقة ائتمان glyphicon glyphicon
نقل glyphicon glyphicon
أدوات المائدة glyphicon glyphicon
رأس glyphicon glyphicon
مضغوط glyphicon glyphicon
سماعة glyphicon glyphicon
glyphicon glyphicon-phone-alt
برج glyphicon glyphicon
احصائيات glyphicon glyphicon
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
ترجمات glyphicon glyphicon
glyphicon glyphicon-sound-stereo. صوت glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
علامة تسجيل glyphicon glyphicon
glyphicon glyphicon- سحابة تنزيل
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-Tree-conifer
glyphicon glyphicon- شجرة نفضية
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
مستوى glyphicon glyphicon-up
نسخة glyphicon glyphicon
لصق glyphicon glyphicon
تنبيه glyphicon glyphicon
glyphicon glyphicon- Equalizer
glyphicon glyphicon-king
glyphicon ملكة glyphicon
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
صيغة glyphicon glyphicon-baby
خيمة glyphicon glyphicon
glyphicon glyphicon-blackboard
سرير glyphicon glyphicon-bed
glyphicon glyphicon-apple
محو glyphicon glyphicon-erase
الساعة الرملية glyphicon glyphicon-hourglass
مصباح glyphicon glyphicon
glyphicon الصورة الرمزية مكررة
البنك أصبع glyphicon glyphicon
مقص glyphicon glyphicon
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
مقياس glyphicon glyphicon
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted. الصورة الرمزية glyphicon-ice-lolly-tasted
glyphicon glyphicon-education
glyphicon glyphicon-option-أفقي
glyphicon glyphicon- خيار عمودي
glyphicon glyphicon القائمة همبرغر
نافذة مشروط glyphicon glyphicon
زيت glyphicon glyphicon-oil
glyphicon glyphicon- الحبوب
النظارات الشمسية glyphicon glyphicon
حجم النص glyphicon glyphicon
لون النص glyphicon glyphicon
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-أفقي
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical. الصورة الرمزية glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon- مثلث يمين
glyphicon glyphicon-triangle-left
glyphicon glyphicon مثلث القاع
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-Subscript
glyphicon glyphicon القائمة اليسرى
glyphicon glyphicon القائمة اليمنى
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

كيف تستعمل

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

لا تخلط مع المكونات الأخرى

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

فقط للاستخدام على العناصر الفارغة

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

تغيير موقع خط الأيقونة

يفترض Bootstrap أن ملفات خطوط الرموز ستكون موجودة في ../fonts/الدليل ، بالنسبة إلى ملفات CSS المترجمة. يعني نقل ملفات الخطوط هذه أو إعادة تسميتها تحديث CSS بإحدى الطرق الثلاث:

قم بتغيير @icon-font-pathو / أو @icon-font-nameالمتغيرات في الملفات الأقل المصدر.
استخدم خيار عناوين URL النسبية التي يوفرها مترجم Less.
قم بتغيير url()المسارات في CSS المترجمة.

استخدم أي خيار يناسب إعداد التطوير الخاص بك.

أيقونات يمكن الوصول إليها

ستعلن الإصدارات الحديثة من التقنيات المساعدة عن محتوى CSS الذي تم إنشاؤه ، بالإضافة إلى أحرف Unicode محددة. لتجنب الإخراج غير المقصود والمربك في برامج قراءة الشاشة (خاصةً عند استخدام الرموز فقط للزينة) ، نقوم بإخفائها aria-hidden="true"بالسمة.

إذا كنت تستخدم رمزًا لنقل المعنى (وليس كعنصر زخرفي فقط) ، فتأكد من نقل هذا المعنى أيضًا إلى التقنيات المساعدة - على سبيل المثال ، تضمين محتوى إضافي ، مخفي بصريًا مع .sr-onlyالفصل.

إذا كنت تقوم بإنشاء عناصر تحكم بدون نص آخر (مثل <button>الذي يحتوي على رمز فقط) ، فيجب عليك دائمًا توفير محتوى بديل لتحديد الغرض من عنصر التحكم ، بحيث يكون مفيدًا لمستخدمي التقنيات المساعدة. في هذه الحالة ، يمكنك إضافة aria-labelسمة على عنصر التحكم نفسه.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

أمثلة

استخدمها في الأزرار أو مجموعات الأزرار لشريط الأدوات أو التنقل أو مدخلات النموذج المسبق.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

رمز مستخدم في التنبيه لنقل أنه رسالة خطأ ، مع .sr-onlyنص إضافي لنقل هذا التلميح إلى مستخدمي التقنيات المساعدة.

أدخل عنوان بريد إلكتروني صالح

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

مثال

قم بلف مشغل القائمة المنسدلة والقائمة المنسدلة بداخلها .dropdown، أو قم بلف عنصر آخر يعلن position: relative;. ثم أضف HTML الخاص بالقائمة.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

يمكن تغيير القوائم المنسدلة لتوسيعها لأعلى (بدلاً من أسفل) عن طريق إضافتها .dropupإلى القائمة الرئيسية.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

محاذاة

بشكل افتراضي ، يتم وضع القائمة المنسدلة تلقائيًا بنسبة 100٪ من أعلى وعلى طول الجانب الأيسر من القائمة الرئيسية. أضف .dropdown-menu-rightإلى .dropdown-menuاليمين محاذاة القائمة المنسدلة.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

الرؤوس

أضف رأسًا لتسمية أقسام الإجراءات في أي قائمة منسدلة.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

مقسم

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

عناصر القائمة معطلة

أضف .disabledإلى <li>القائمة المنسدلة لتعطيل الرابط.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

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

تتطلب تلميحات الأدوات والعناصر المنبثقة في مجموعات الأزرار إعدادًا خاصًا

عند استخدام تلميحات الأدوات أو العناصر المنبثقة على عناصر داخل a .btn-group، سيتعين عليك تحديد الخيار container: 'body'لتجنب الآثار الجانبية غير المرغوب فيها (مثل زيادة اتساع العنصر و / أو فقدان زواياه الدائرية عند تشغيل التلميح أو المنبثقة).

تأكد من صحة `role`وضع الملصق

لكي تنقل التقنيات المساعدة - مثل قارئات الشاشة - أن سلسلة من الأزرار مجمعة ، roleيجب توفير سمة مناسبة. بالنسبة لمجموعات الأزرار ، سيكون هذا role="group"، بينما يجب أن تحتوي أشرطة الأدوات على ملف role="toolbar".

استثناء واحد هو المجموعات التي تحتوي فقط على عنصر تحكم واحد (على سبيل المثال ، مجموعات الأزرار المضبوطة مع <button>العناصر) أو القائمة المنسدلة.

بالإضافة إلى ذلك ، يجب إعطاء تسمية صريحة للمجموعات وأشرطة الأدوات ، لأن معظم التقنيات المساعدة لن تعلن عنها بخلاف ذلك ، على الرغم من وجود roleالسمة الصحيحة. في الأمثلة المقدمة هنا ، نستخدم ، ولكن يمكن أيضًا استخدام aria-labelالبدائل مثل .aria-labelledby

مثال أساسي

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

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

تحجيم

بدلاً من تطبيق فئات تغيير حجم الأزرار على كل زر في مجموعة ، ما عليك سوى الإضافة .btn-group-*إلى كل زر .btn-group، بما في ذلك عند دمج مجموعات متعددة.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

التعشيش

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

الاختلاف العمودي

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

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

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

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

التعامل مع الحدود

نظرًا لاستخدام HTML و CSS المحدد لضبط الأزرار (أي display: table-cell) ، يتم مضاعفة الحدود بينهما. في مجموعات الأزرار العادية ، margin-left: -1pxتُستخدم لتكديس الحدود بدلاً من إزالتها. ومع ذلك ، marginلا يعمل مع display: table-cell. نتيجة لذلك ، بناءً على تخصيصاتك في Bootstrap ، قد ترغب في إزالة الحدود أو إعادة تلوينها.

IE8 والحدود

لا يعرض Internet Explorer 8 حدودًا على الأزرار في مجموعة أزرار مضبوطة ، سواء كانت قيد التشغيل <a>أو <button>عناصر. للتغلب على ذلك ، لف كل زر في الآخر .btn-group.

راجع # 12476 لمزيد من المعلومات.

مع `<a>`العناصر

مجرد لف سلسلة من .btns في .btn-group.btn-group-justified.

اليسار وسط الصحيح

اليسار وسط

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

تعمل الروابط كأزرار

إذا <a>تم استخدام العناصر للعمل كأزرار - تشغيل وظيفة في الصفحة ، بدلاً من التنقل إلى مستند أو قسم آخر داخل الصفحة الحالية - فيجب أيضًا إعطاؤها مناسبة role="button".

مع `<button>`العناصر

لاستخدام مجموعات الأزرار المضبوطة مع <button>العناصر ، يجب عليك التفاف كل زر في مجموعة أزرار . لا تقوم معظم المتصفحات بتطبيق CSS بشكل صحيح لتبرير <button>العناصر ، ولكن نظرًا لأننا ندعم القوائم المنسدلة للأزرار ، فيمكننا التغلب على ذلك.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

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

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

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

حوّل زرًا إلى قائمة منسدلة للتبديل مع بعض التغييرات الأساسية في الترميز.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

وبالمثل ، قم بإنشاء قوائم منسدلة لأزرار الانقسام بنفس تغييرات الترميز ، فقط باستخدام زر منفصل.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

تحجيم

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

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

تباين إسقاط

تشغيل القوائم المنسدلة فوق العناصر من خلال إضافتها .dropupإلى العنصر الرئيسي.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

قم بتوسيع عناصر التحكم في النموذج عن طريق إضافة نص أو أزرار قبل أو بعد أو على كلا الجانبين من أي مستند إلى النص <input>. استخدم .input-groupمع .input-group-addonأو .input-group-btnلإضافة عناصر قبلية أو إلحاقها بمفردها .form-control.

نصية `<input>`فقط

تجنب استخدام <select>العناصر هنا حيث لا يمكن تصميمها بالكامل في متصفحات WebKit.

تجنب استخدام <textarea>العناصر هنا حيث rowsلن يتم احترام سماتها في بعض الحالات.

تتطلب تلميحات الأدوات والعروض المنبثقة في مجموعات الإدخال إعدادًا خاصًا

عند استخدام تلميحات الأدوات أو العناصر المنبثقة على عناصر داخل .input-group، سيتعين عليك تحديد الخيار container: 'body'لتجنب الآثار الجانبية غير المرغوب فيها (مثل زيادة اتساع العنصر و / أو فقدان زواياه الدائرية عند تشغيل التلميح أو المنبثقة).

لا تخلط مع المكونات الأخرى

لا تخلط مجموعات النماذج أو فئات أعمدة الشبكة مباشرة مع مجموعات الإدخال. بدلاً من ذلك ، قم بتداخل مجموعة الإدخال داخل مجموعة النموذج أو العنصر المرتبط بالشبكة.

أضف تسميات دائمًا

ستواجه برامج قراءة الشاشة مشكلة في النماذج الخاصة بك إذا لم تقم بتضمين تسمية لكل إدخال. بالنسبة لمجموعات الإدخال هذه ، تأكد من نقل أي تسمية أو وظيفة إضافية إلى التقنيات المساعدة.

ستختلف التقنية الدقيقة التي سيتم استخدامها ( <label>العناصر المرئية ، أو <label>العناصر المخفية باستخدام .sr-onlyالفئة ، أو استخدام aria-label، aria-labelledbyأو aria-describedby، titleأو placeholderالسمة) والمعلومات الإضافية التي يجب نقلها اعتمادًا على النوع الدقيق لعنصر واجهة المستخدم الذي تقوم بتطبيقه. توفر الأمثلة في هذا القسم بعض الأساليب المقترحة الخاصة بكل حالة.

مثال أساسي

ضع وظيفة إضافية أو زرًا واحدًا على جانبي الإدخال. يمكنك أيضًا وضع أحدهما على جانبي الإدخال.

نحن لا ندعم الوظائف الإضافية المتعددة ( .input-group-addonأو .input-group-btn) على جانب واحد.

نحن لا ندعم عدة عناصر تحكم في النموذج في مجموعة إدخال واحدة.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

تحجيم

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

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

مربعات الاختيار وملحقات الراديو

ضع أي مربع اختيار أو خيار راديو داخل الوظيفة الإضافية لمجموعة الإدخال بدلاً من النص.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

الإضافات زر

تختلف الأزرار في مجموعات الإدخال قليلاً وتتطلب مستوى إضافيًا واحدًا من التداخل. بدلاً من ذلك .input-group-addon، ستحتاج إلى استخدام .input-group-btnالتفاف الأزرار. هذا مطلوب بسبب أنماط المتصفح الافتراضية التي لا يمكن تجاوزها.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

أزرار مجزأة

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

أزرار متعددة

بينما يمكنك الحصول على وظيفة إضافية واحدة فقط لكل جانب ، يمكنك الحصول على عدة أزرار داخل واحد .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

تحتوي Navs المتوفرة في Bootstrap على ترميز مشترك ، بدءًا من .navالفئة الأساسية ، بالإضافة إلى الحالات المشتركة. فئات معدل التبديل للتبديل بين كل نمط.

يتطلب استخدام التنقل للوحات علامات التبويب المكون الإضافي لعلامات تبويب جافا سكريبت

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

جعل الملاحة تستخدم للتنقل يمكن الوصول إليها

إذا كنت تستخدم التنقلات لتوفير شريط تنقل ، فتأكد من إضافة role="navigation"الحاوية الرئيسية الأكثر منطقية لـ <ul>، أو قم بلف <nav>عنصر حول التنقل بالكامل. لا تقم بإضافة الدور إلى <ul>نفسه ، لأن هذا سيمنع الإعلان عنه كقائمة فعلية بواسطة التقنيات المساعدة.

نوافذ التبويب

لاحظ أن .nav-tabsالفئة تتطلب .navالفئة الأساسية.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

حبوب الدواء

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

الحبوب قابلة للتكديس عموديًا أيضًا. أضف فقط .nav-stacked.

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

مبرر

اجعل علامات التبويب أو الحبوب بعرض متساوٍ بسهولة لوالديها على شاشات أكبر من 768 بكسل .nav-justified. على الشاشات الأصغر ، تكون روابط التنقل مكدسة.

روابط تنقل شريط التنقل المضبوطة غير مدعومة حاليًا.

سفاري وملاح مبرر سريع الاستجابة

اعتبارًا من الإصدار 9.1.2 ، يعرض Safari خطأً يتسبب فيه تغيير حجم المتصفح أفقيًا في حدوث أخطاء في العرض في التنقل المبرر الذي يتم مسحه عند التحديث. يظهر هذا الخطأ أيضًا في مثال التنقل المبرر .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

الروابط المعطلة

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

لم تتأثر وظيفة الارتباط

ستغير هذه الفئة فقط <a>مظهره ، وليس وظيفته. استخدم JavaScript المخصص لتعطيل الروابط هنا.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

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

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

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

تعد Navbars مكونات تعريفية سريعة الاستجابة تعمل كرؤوس تنقل لتطبيقك أو موقعك. تبدأ مطوية (وقابلة للتبديل) في عروض الجوال وتصبح أفقية مع زيادة عرض إطار العرض المتاح.

روابط تنقل شريط التنقل المضبوطة غير مدعومة حاليًا.

فائض المحتوى

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

تقليل كمية أو عرض عناصر شريط التنقل.
إخفاء بعض عناصر شريط التنقل بأحجام شاشة معينة باستخدام فئات الأدوات المساعدة سريعة الاستجابة .
قم بتغيير النقطة التي ينتقل عندها شريط التنقل بين الوضع المطوي والوضع الأفقي. خصص @grid-float-breakpointالمتغير أو أضف استعلام الوسائط الخاص بك.

تغيير نقطة توقف شريط التنقل المطوي

ينهار شريط التنقل في عرضه الرأسي على الهاتف المحمول عندما يكون إطار العرض أضيق من @grid-float-breakpoint، ويتوسع إلى العرض الأفقي غير المحمول عندما يكون عرض إطار العرض على الأقل @grid-float-breakpoint. اضبط هذا المتغير في Less source للتحكم عند انهيار / توسيع شريط التنقل. القيمة الافتراضية هي 768px(أصغر شاشة "صغيرة" أو شاشة "كمبيوتر لوحي").

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

استبدل العلامة التجارية navbar بصورتك الخاصة عن طريق تبديل النص بملف <img>. نظرًا لأن .navbar-brandالحشو والارتفاع الخاصين به ، فقد تحتاج إلى تجاوز بعض CSS اعتمادًا على صورتك.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

كرؤساء ، .navbar-formيشارك الكثير من التعليمات البرمجية الخاصة به مع .form-inlineعبر mixin. قد تتطلب بعض عناصر التحكم في النموذج ، مثل مجموعات الإدخال ، عروض ثابتة لتظهر بشكل صحيح داخل شريط التنقل.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

أضف تسميات دائمًا

ستواجه برامج قراءة الشاشة مشكلة في النماذج الخاصة بك إذا لم تقم بتضمين تسمية لكل إدخال. بالنسبة لهذه النماذج المضمنة ، يمكنك إخفاء التسميات باستخدام .sr-onlyالفئة. هناك طرق بديلة أخرى لتوفير تسمية للتقنيات المساعدة ، مثل aria-label، aria-labelledbyأو titleالسمة. في حالة عدم وجود أي منها ، قد تلجأ برامج قراءة الشاشة إلى استخدام placeholderالسمة ، إن وجدت ، ولكن لاحظ أنه placeholderلا يُنصح باستخدامها كبديل لطرق وضع العلامات الأخرى.

أضف .navbar-btnالفئة إلى <button>العناصر غير المقيمة في a <form>لتوسيطها رأسياً في شريط التنقل.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

بالنسبة للأشخاص الذين يستخدمون ارتباطات قياسية ليست ضمن مكون التنقل العادي في شريط التنقل ، استخدم .navbar-linkالفئة لإضافة الألوان المناسبة لخيارات شريط التنقل الافتراضية والعكسية.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

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

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

محاذاة مكونات متعددة لليمين

توجد قيود على Navbars حاليًا مع .navbar-rightفئات متعددة. لفراغ المحتوى بشكل صحيح ، نستخدم الهامش السالب على .navbar-rightالعنصر الأخير. عندما تكون هناك عناصر متعددة تستخدم هذه الفئة ، فإن هذه الهوامش لا تعمل على النحو المنشود.

سنعيد النظر في هذا عندما نتمكن من إعادة كتابة هذا المكون في v4.

إضافة .navbar-fixed-topوتضمين .containerأو .container-fluidإلى مركز ولوحة شريط التنقل محتوى.

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

الحشوة المطلوبة للجسم

سيغطي شريط التنقل الثابت المحتوى الآخر الخاص بك ، ما لم تقم بإضافته paddingإلى الجزء العلوي من ملف <body>. جرب القيم الخاصة بك أو استخدم المقتطف أدناه. نصيحة: بشكل افتراضي ، يبلغ ارتفاع شريط التنقل 50 بكسل.

body { padding-top: 70px; }

تأكد من تضمين ذلك بعد Bootstrap CSS الأساسي.

إضافة .navbar-fixed-bottomوتضمين .containerأو .container-fluidإلى مركز ولوحة شريط التنقل محتوى.

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

الحشوة المطلوبة للجسم

سيغطي شريط التنقل الثابت المحتوى الآخر الخاص بك ، ما لم تقم بإضافته paddingإلى الجزء السفلي من ملف <body>. جرب القيم الخاصة بك أو استخدم المقتطف أدناه. نصيحة: بشكل افتراضي ، يبلغ ارتفاع شريط التنقل 50 بكسل.

body { padding-bottom: 70px; }

تأكد من تضمين ذلك بعد Bootstrap CSS الأساسي.

قم بإنشاء شريط تنقل كامل العرض يتنقل بعيدًا مع الصفحة عن طريق إضافة .navbar-static-topأو تضمين محتوى شريط التنقل .containerأو .container-fluidإلى المركز ولوحة التنقل.

على عكس .navbar-fixed-*الفئات ، لا تحتاج إلى تغيير أي مساحة متروكة على ملف body.

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

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

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

فتات الخبز

حدد موقع الصفحة الحالية داخل التسلسل الهرمي للتنقل.

تتم إضافة الفواصل تلقائيًا في CSS من خلال :beforeو content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

ترقيم الصفحات

قم بتوفير روابط ترقيم الصفحات لموقعك أو تطبيقك باستخدام مكون ترقيم الصفحات متعدد الصفحات ، أو البديل الأبسط للصفحة .

ترقيم الصفحات الافتراضي

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

وسم مكون ترقيم الصفحات

يجب أن يتم لف مكون ترقيم الصفحات في <nav>عنصر لتحديده كقسم تنقل لقارئات الشاشة والتقنيات المساعدة الأخرى. بالإضافة إلى ذلك ، نظرًا لأنه من المحتمل أن تحتوي الصفحة على أكثر من قسم تنقل واحد بالفعل (مثل التنقل الأساسي في العنوان ، أو التنقل في الشريط الجانبي) ، فمن المستحسن توفير وصف وصفي يعكس الغرض منه aria-label. <nav>على سبيل المثال ، إذا تم استخدام مكون ترقيم الصفحات للتنقل بين مجموعة من نتائج البحث ، فيمكن أن تكون التسمية المناسبة aria-label="Search results pages".

الدول المعوقة والنشطة

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

نوصي باستبدال نقاط الارتساء النشطة أو المعطلة <span>، أو حذف الرابط في حالة الأسهم السابقة / التالية ، لإزالة وظيفة النقر مع الاحتفاظ بالأنماط المقصودة.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

تحجيم

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

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

بيجر

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

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

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

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

مثال

مثال عنوان جديد

<h3>Example heading <span class="label label-default">New</span></h3>

الاختلافات المتاحة

أضف أيًا من فئات التعديل المذكورة أدناه لتغيير مظهر الملصق.

خطر التحذير من معلومات النجاح الأولية الافتراضية

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

هل لديك الكثير من الملصقات؟

يمكن أن تظهر مشاكل التقديم عندما يكون لديك عشرات التسميات المضمنة داخل حاوية ضيقة ، كل منها يحتوي على inline-blockعنصره الخاص (مثل رمز). الطريقة حول هذا هو الإعداد display: inline-block;. للسياق ومثال ، انظر # 13219 .

قم بتمييز العناصر الجديدة أو غير المقروءة بسهولة عن طريق إضافة <span class="badge">روابط إلى روابط Bootstrap والمزيد.

صندوق الوارد42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

الانهيار الذاتي

في حالة عدم وجود عناصر جديدة أو غير مقروءة ، ستنهار الشارات ببساطة (عبر :emptyمحدد CSS) بشرط عدم وجود محتوى بداخلها.

التوافق عبر المستعرضات

لن تنهار الشارات في Internet Explorer 8 لأنها تفتقر إلى دعم :emptyالمحدد.

يتكيف مع حالات التنقل النشطة

يتم تضمين الأنماط المضمنة لوضع الشارات في الحالات النشطة في التنقلات على الأقراص.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

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

مرحبا بالعالم!

هذه وحدة بطل بسيطة ، مكون بسيط بأسلوب jumbotron لجذب انتباه إضافي إلى المحتوى أو المعلومات المميزة.

يتعلم أكثر

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

لجعل الجامبوترون بالعرض الكامل ، وبدون زوايا دائرية ، ضعه خارج كل .containers وبدلاً من ذلك أضف .containerالداخل.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

قم بتوسيع نظام شبكة Bootstrap بمكون الصورة المصغرة لعرض شبكات الصور ومقاطع الفيديو والنصوص والمزيد بسهولة.

إذا كنت تبحث عن عرض تقديمي يشبه Pinterest لصور مصغرة ذات ارتفاعات و / أو عروض مختلفة ، فستحتاج إلى استخدام مكون إضافي تابع لجهة خارجية مثل Masonry أو Isotope أو Salvattore .

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

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

محتوى مخصص

مع القليل من الترميز الإضافي ، من الممكن إضافة أي نوع من محتوى 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.

زر زر

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

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.

زر زر

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

قم بتوفير رسائل ملاحظات سياقية لإجراءات المستخدم النموذجية مع عدد قليل من رسائل التنبيه المتاحة والمرنة.

أمثلة

قم بلف أي نص وزر رفض اختياري في .alertواحدة من الفئات السياقية الأربعة (على سبيل المثال ، .alert-success) لرسائل التنبيه الأساسية.

لا توجد فئة افتراضية

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

أحسنت! لقد نجحت في قراءة رسالة التنبيه المهمة هذه.

انتباه! يحتاج هذا التنبيه إلى انتباهك ، لكنه ليس بالغ الأهمية.

تحذير! تحقق من نفسك بشكل أفضل ، فأنت لا تبدو جيدًا جدًا.

أوه المفاجئة! قم بتغيير بعض الأشياء وحاول الإرسال مرة أخرى.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

تنبيهات غير مقبولة

بناء على أي تنبيه عن طريق إضافة زر اختياري .alert-dismissibleوإغلاق.

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

للحصول على التنبيهات التي تعمل بشكل كامل ، والتي يمكن رفضها ، يجب عليك استخدام مكون JavaScript الإضافي للتنبيهات .

تحذير! تحقق من نفسك بشكل أفضل ، فأنت لا تبدو جيدًا جدًا.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ضمان السلوك السليم عبر جميع الأجهزة

تأكد من استخدام <button>العنصر مع data-dismiss="alert"سمة البيانات.

الروابط في التنبيهات

استخدم .alert-linkفئة الأداة المساعدة لتوفير روابط ملونة مطابقة بسرعة داخل أي تنبيه.

أحسنت! لقد نجحت في قراءة رسالة التنبيه المهمة هذه .

انتباه! يحتاج هذا التنبيه إلى انتباهك ، لكنه ليس بالغ الأهمية.

تحذير! تحقق من نفسك بشكل أفضل ، فأنت لا تبدو جيدًا جدًا .

أوه المفاجئة! قم بتغيير بعض الأشياء وحاول الإرسال مرة أخرى.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

قدم ملاحظات محدثة حول تقدم سير العمل أو الإجراء باستخدام أشرطة تقدم بسيطة ومرنة.

التوافق عبر المستعرضات

تستخدم أشرطة التقدم انتقالات CSS3 والرسوم المتحركة لتحقيق بعض تأثيراتها. هذه الميزات غير مدعومة في Internet Explorer 9 والإصدارات الأقدم أو الإصدارات الأقدم من Firefox. لا يدعم Opera 12 الرسوم المتحركة.

التوافق مع نهج أمان المحتوى (CSP)

إذا كان موقع الويب الخاص بك يحتوي على سياسة أمان المحتوى (CSP) التي لا تسمح بذلك style-src 'unsafe-inline'، فلن تتمكن من استخدام styleالسمات المضمنة لتعيين عروض شريط التقدم كما هو موضح في الأمثلة أدناه. تتضمن الطرق البديلة لتعيين العروض المتوافقة مع CSPs الصارمة استخدام القليل من JavaScript المخصص (الذي يعين element.style.width) أو استخدام فئات CSS مخصصة.

مثال أساسي

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

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

مع التسمية

قم بإزالة الفئة <span>مع .sr-onlyمن داخل شريط التقدم لإظهار النسبة المئوية المرئية.

60٪

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

للتأكد من أن نص التسمية يظل مقروءًا حتى بالنسبة للنسب المئوية المنخفضة ، ضع في اعتبارك إضافة a min-widthإلى شريط التقدم.

0٪

2٪

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

البدائل السياقية

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

مخطط

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

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

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

أضف .activeلتحريك .progress-bar-stripedالمشارب من اليمين إلى اليسار. غير متوفر في IE9 وما دونه.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

مرصوصة

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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

الوسائط الافتراضية

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

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

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. دونيك لاسينيا كونيج فيليس في فوسيبوس.

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

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.

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

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

الفئات موجودة أيضًا .pull-leftوتم .pull-rightاستخدامها سابقًا كجزء من مكون الوسائط ، ولكن تم إهمالها لهذا الاستخدام اعتبارًا من الإصدار 3.3.0. وهي تكافئ تقريبًا .media-leftو .media-right، باستثناء أنه .media-rightيجب وضعها بعد .media-bodyالحرف في html.

محاذاة الوسائط

يمكن محاذاة الصور أو الوسائط الأخرى لأعلى أو وسط أو أسفل. الافتراضي هو المحاذاة لأعلى.

الوسائط المحاذاة لأعلى

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. دونيك لاسينيا كونيج فيليس في فوسيبوس.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus.

وسط محاذاة للوسائط

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. دونيك لاسينيا كونيج فيليس في فوسيبوس.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus.

وسائط محاذاة لأسفل

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. دونيك لاسينيا كونيج فيليس في فوسيبوس.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

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

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

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

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.

عنوان الوسائط المتداخلة
Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.

عنوان الوسائط المتداخلة
Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.

عنوان الوسائط المتداخلة
Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

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

مثال أساسي

مجموعة القائمة الأساسية هي ببساطة قائمة غير مرتبة تحتوي على عناصر قائمة ، والفئات المناسبة. قم بالبناء عليه بالخيارات التالية ، أو CSS الخاص بك حسب الحاجة.

كراس جوستو أوديو
Dapibus ac facilisis في
موربي ليو ريسوس
Porta ac consectetur ac
الدهليز في إيروس

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

شارات

أضف مكون الشارات إلى أي عنصر مجموعة قائمة وسيتم وضعه تلقائيًا على اليمين.

14كراس جوستو أوديو
2Dapibus ac facilisis في
1موربي ليو ريسوس

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

العناصر المرتبطة

ربط عناصر مجموعة القائمة باستخدام علامات الإرساء بدلاً من عناصر القائمة (وهذا يعني أيضًا أصلًا <div>بدلاً من <ul>). لا حاجة للآباء الفرديين حول كل عنصر.

كراس جوستو أوديو Dapibus ac facilisis في موربي ليو ريسوس Porta ac consectetur ac الدهليز في إيروس

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

عناصر الزر

قد تكون عناصر مجموعة القائمة عبارة عن أزرار بدلاً من عناصر قائمة (وهذا يعني أيضًا أصلًا <div>بدلاً من عنصر <ul>). لا حاجة للآباء الفرديين حول كل عنصر. لا تستخدم .btnالفصول القياسية هنا.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

العناصر المعطلة

أضف .disabledإلى .list-group-itemاللون الرمادي لتظهر معطلاً.

كراس جوستو أوديو Dapibus ac facilisis في موربي ليو ريسوس Porta ac consectetur ac الدهليز في إيروس

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

الفئات السياقية

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

Dapibus ac facilisis في
Cras sit amet nibh Libero
Porta ac consectetur ac
الدهليز في إيروس

Dapibus ac facilisis في Cras sit amet nibh Libero Porta ac consectetur ac الدهليز في إيروس

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

محتوى مخصص

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

قائمة عنصر المجموعة

Donec id elit non mi porta gravida at eget metus. Maecenas Sed Diam eget risus varius blandit.

قائمة عنصر المجموعة

Donec id elit non mi porta gravida at eget metus. Maecenas Sed Diam eget risus varius blandit.

قائمة عنصر المجموعة

Donec id elit non mi porta gravida at eget metus. Maecenas Sed Diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

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

مثال أساسي

بشكل افتراضي ، كل ما .panelيفعله هو تطبيق بعض الحدود الأساسية والحشو لاحتواء بعض المحتوى.

مثال على اللوحة الأساسية

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

لوحة مع العنوان

يمكنك بسهولة إضافة حاوية عنوان إلى اللوحة الخاصة بك باستخدام ملفات .panel-heading. يمكنك أيضًا تضمين أي <h1>- <h6>مع .panel-titleفئة لإضافة عنوان مصمم مسبقًا. ومع ذلك ، يتم تجاوز أحجام خطوط <h1>- <h6>بواسطة .panel-heading.

لتلوين الارتباط الصحيح ، تأكد من وضع الروابط في العناوين بداخلها .panel-title.

عنوان اللوحة بدون عنوان

محتوى اللوحة

عنوان اللوحة

محتوى اللوحة

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

لوحة مع تذييل

أزرار التفاف أو نص ثانوي بتنسيق .panel-footer. لاحظ أن تذييلات اللوحة لا ترث الألوان والحدود عند استخدام الاختلافات السياقية حيث لا يُقصد بها أن تكون في المقدمة.

محتوى اللوحة

تذييل اللوحة

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

البدائل السياقية

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

عنوان اللوحة

محتوى اللوحة

عنوان اللوحة

محتوى اللوحة

عنوان اللوحة

محتوى اللوحة

عنوان اللوحة

محتوى اللوحة

عنوان اللوحة

محتوى اللوحة

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

مع الجداول

أضف أي .tableلوحة لا حدود لها للحصول على تصميم سلس. إذا كان هناك a .panel-body، نضيف حدًا إضافيًا إلى أعلى الجدول للفصل.

عنوان اللوحة

بعض محتويات اللوحة الافتراضية هنا. Nulla vitae elit libero ، augue pharetra. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

#	الاسم الاول	الكنية	اسم المستخدم
1	علامة	أوتو	mdo
2	يعقوب	ثورنتون	@سمين
3	لاري	الطائر	@تويتر

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

في حالة عدم وجود جسم لوحة ، ينتقل المكون من رأس اللوحة إلى الجدول دون انقطاع.

عنوان اللوحة

#	الاسم الاول	الكنية	اسم المستخدم
1	علامة	أوتو	mdo
2	يعقوب	ثورنتون	@سمين
3	لاري	الطائر	@تويتر

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

مع مجموعات القائمة

قم بتضمين مجموعات قائمة كاملة العرض بسهولة داخل أي لوحة.

عنوان اللوحة

بعض محتويات اللوحة الافتراضية هنا. Nulla vitae elit libero ، augue pharetra. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

كراس جوستو أوديو
Dapibus ac facilisis في
موربي ليو ريسوس
Porta ac consectetur ac
الدهليز في إيروس

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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

يتم تطبيق القواعد مباشرة على <iframe>، <embed>و <video>، <object>والعناصر ؛ استخدم اختياريًا فئة فرعية صريحة .embed-responsive-itemعندما تريد مطابقة نمط السمات الأخرى.

نصيحة محترف! لست بحاجة إلى تضمينها frameborder="0"في حساباتك <iframe>لأننا نتجاوز ذلك نيابةً عنك.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

الافتراضي جيدا

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

انظر ، أنا في بئر!

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

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

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

انظر ، أنا في بئر كبير!

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

انظر ، أنا في بئر صغير!

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

عناصر

الحروف الرسومية

الحروف الرسومية المتاحة

كيف تستعمل

لا تخلط مع المكونات الأخرى

فقط للاستخدام على العناصر الفارغة

تغيير موقع خط الأيقونة

أيقونات يمكن الوصول إليها

أمثلة

هبوط قطرة

مثال

محاذاة

قد يتطلب تحديد المواقع الإضافية

.pull-rightمحاذاة موقوفة

الرؤوس

مقسم

عناصر القائمة معطلة

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

تتطلب تلميحات الأدوات والعناصر المنبثقة في مجموعات الأزرار إعدادًا خاصًا

تأكد من صحة roleوضع الملصق

مثال أساسي

شريط أدوات الزر

تحجيم

التعشيش

الاختلاف العمودي

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

التعامل مع الحدود

IE8 والحدود

مع <a>العناصر

تعمل الروابط كأزرار

مع <button>العناصر

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

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

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

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

تحجيم

تباين إسقاط

مجموعات الإدخال

نصية <input>فقط

تتطلب تلميحات الأدوات والعروض المنبثقة في مجموعات الإدخال إعدادًا خاصًا

لا تخلط مع المكونات الأخرى

أضف تسميات دائمًا

مثال أساسي

تحجيم

مربعات الاختيار وملحقات الراديو

الإضافات زر

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

أزرار مجزأة

أزرار متعددة

نافس

يتطلب استخدام التنقل للوحات علامات التبويب المكون الإضافي لعلامات تبويب جافا سكريبت

جعل الملاحة تستخدم للتنقل يمكن الوصول إليها

نوافذ التبويب

حبوب الدواء

مبرر

سفاري وملاح مبرر سريع الاستجابة

الروابط المعطلة

لم تتأثر وظيفة الارتباط

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

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

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

نافبار

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

فائض المحتوى

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

تغيير نقطة توقف شريط التنقل المطوي

اجعل نافارات الوصول إليها متاحة

صورة العلامة التجارية

نماذج

محاذير الجهاز المحمول

أضف تسميات دائمًا

أزرار

استخدام خاص بالسياق

نص

روابط غير ملاحية

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

محاذاة مكونات متعددة لليمين

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

الحشوة المطلوبة للجسم

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

`.pull-right`محاذاة موقوفة

تأكد من صحة `role`وضع الملصق

مع `<a>`العناصر

مع `<button>`العناصر

نصية `<input>`فقط