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

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

يتضمن أكثر من 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-sunglasses
  • حجم النص 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اليمين محاذاة القائمة المنسدلة.

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

يتم وضع القوائم المنسدلة تلقائيًا عبر CSS ضمن التدفق العادي للمستند. وهذا يعني أنه قد يتم اقتصاص القوائم المنسدلة بواسطة الآباء الذين لديهم overflowخصائص معينة أو تظهر خارج حدود إطار العرض. عالج هذه المشكلات بنفسك عند ظهورها.

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

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

<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) على جانب واحد.

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

@

@ example.com

$ .00

https://example.com/users/
<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 لا يعرف مقدار المساحة التي يحتاجها المحتوى في شريط التنقل الخاص بك ، فقد تواجه مشكلات في التفاف المحتوى في الصف الثاني. لحل هذه المشكلة ، يمكنك:

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

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

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

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

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

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

جعل نافبارز للوصول

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

<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-btnيمكن استخدامها على <a>والعناصر <input>. ومع ذلك ، لا .navbar-btnيجب استخدام ولا فئات الأزرار القياسية على <a>العناصر الموجودة داخل .navbar-nav.

التفاف سلاسل النص في عنصر .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 والمزيد.

<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 مخصصة.

مثال أساسي

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

60٪ اكتمل
<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إلى شريط التقدم.

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

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

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

40٪ مكتمل (نجاح)
20٪ اكتمل
60٪ مكتمل (تحذير)
80٪ مكتمل (خطر)
<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 وما دونه.

40٪ مكتمل (نجاح)
20٪ اكتمل
60٪ مكتمل (تحذير)
80٪ مكتمل (خطر)
<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 وما دونه.

45٪ اكتمل
<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لتكديسها.

35٪ مكتمل (نجاح)
20٪ اكتمل (تحذير)
10٪ أكمل (خطر)
<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>). لا حاجة للآباء الفرديين حول كل عنصر.

<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اللون الرمادي لتظهر معطلاً.

<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
  • الدهليز في إيروس
<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 داخل ، حتى بالنسبة لمجموعات القوائم المرتبطة مثل المجموعة أدناه.

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