تم تصميم أكثر من عشرة مكونات قابلة لإعادة الاستخدام لتوفير الأيقونات والقوائم المنسدلة ومجموعات الإدخال والتنقل والتنبيهات وغير ذلك الكثير.
الحروف الرسومية
الحروف الرسومية المتاحة
يتضمن أكثر من 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المتغيرات في الملفات الأقل المصدر.
ستعلن الإصدارات الحديثة من التقنيات المساعدة عن محتوى CSS الذي تم إنشاؤه ، بالإضافة إلى أحرف Unicode محددة. لتجنب الإخراج غير المقصود والمربك في برامج قراءة الشاشة (خاصةً عند استخدام الرموز فقط للزينة) ، نقوم بإخفائها aria-hidden="true"بالسمة.
إذا كنت تستخدم رمزًا لنقل المعنى (وليس فقط كعنصر زخرفي) ، فتأكد من نقل هذا المعنى أيضًا إلى التقنيات المساعدة - على سبيل المثال ، تضمين محتوى إضافي ، مخفي بصريًا مع .sr-onlyالفصل.
إذا كنت تقوم بإنشاء عناصر تحكم بدون نص آخر (مثل <button>الذي يحتوي على رمز فقط) ، فيجب عليك دائمًا توفير محتوى بديل لتحديد الغرض من عنصر التحكم ، بحيث يكون مفيدًا لمستخدمي التقنيات المساعدة. في هذه الحالة ، يمكنك إضافة aria-labelسمة على عنصر التحكم نفسه.
أمثلة
استخدمها في الأزرار أو مجموعات الأزرار لشريط الأدوات أو التنقل أو مدخلات النموذج المسبق.
رمز مستخدم في التنبيه لنقل أنه رسالة خطأ ، مع .sr-onlyنص إضافي لنقل هذا التلميح إلى مستخدمي التقنيات المساعدة.
بشكل افتراضي ، يتم وضع القائمة المنسدلة تلقائيًا بنسبة 100٪ من أعلى وعلى طول الجانب الأيسر من القائمة الرئيسية. أضف .dropdown-menu-rightإلى .dropdown-menuاليمين محاذاة القائمة المنسدلة.
قد يتطلب تحديد المواقع الإضافية
يتم وضع القوائم المنسدلة تلقائيًا عبر CSS ضمن التدفق العادي للمستند. وهذا يعني أنه قد يتم اقتصاص القوائم المنسدلة بواسطة الآباء الذين لديهم overflowخصائص معينة أو تظهر خارج حدود إطار العرض. عالج هذه المشكلات بنفسك عند ظهورها.
.pull-rightمحاذاة موقوفة
اعتبارًا من الإصدار 3.1.0 ، تم إيقاف العمل .pull-rightبالقوائم المنسدلة. لمحاذاة قائمة إلى اليمين ، استخدم .dropdown-menu-right. تستخدم مكونات التنقل المحاذاة لليمين في شريط التنقل إصدارًا مختلطًا من هذه الفئة لمحاذاة القائمة تلقائيًا. لتجاوز ذلك ، استخدم .dropdown-menu-left.
الرؤوس
أضف رأسًا لتسمية أقسام الإجراءات في أي قائمة منسدلة.
قم بتجميع سلسلة من الأزرار معًا في سطر واحد باستخدام مجموعة الأزرار. أضف سلوك نمط مربع الاختيار وراديو 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">في a <div class="btn-toolbar">للحصول على مكونات أكثر تعقيدًا.
تحجيم
بدلاً من تطبيق فئات تغيير حجم الأزرار على كل زر في مجموعة ، ما عليك سوى الإضافة .btn-group-*إلى كل زر .btn-group، بما في ذلك عند دمج مجموعات متعددة.
التعشيش
ضع علامة .btn-groupداخل أخرى .btn-groupعندما تريد أن تختلط القوائم المنسدلة بسلسلة من الأزرار.
اجعل مجموعة من الأزرار تمتد بأحجام متساوية لتمتد بالعرض الكامل لأصلها. يعمل أيضًا مع القوائم المنسدلة للأزرار داخل مجموعة الأزرار.
التعامل مع الحدود
نظرًا لاستخدام HTML و CSS المحدد لضبط الأزرار (أي display: table-cell) ، يتم مضاعفة الحدود بينهما. في مجموعات الأزرار العادية ، margin-left: -1pxتُستخدم لتكديس الحدود بدلاً من إزالتها. ومع ذلك ، marginلا يعمل مع display: table-cell. نتيجة لذلك ، بناءً على تخصيصاتك في Bootstrap ، قد ترغب في إزالة الحدود أو إعادة تلوينها.
IE8 والحدود
لا يعرض Internet Explorer 8 حدودًا على الأزرار في مجموعة أزرار مضبوطة ، سواء كانت قيد التشغيل <a>أو <button>عناصر. للتغلب على ذلك ، لف كل زر في الآخر .btn-group.
إذا <a>تم استخدام العناصر للعمل كأزرار - تشغيل وظيفة في الصفحة ، بدلاً من التنقل إلى مستند أو قسم آخر داخل الصفحة الحالية - فيجب أيضًا إعطاؤها مناسبة role="button".
مع <button>العناصر
لاستخدام مجموعات الأزرار المضبوطة مع <button>العناصر ، يجب عليك التفاف كل زر في مجموعة أزرار . لا تطبق معظم المتصفحات CSS بشكل صحيح لتبرير <button>العناصر ، ولكن نظرًا لأننا ندعم القوائم المنسدلة للأزرار ، فيمكننا التغلب على ذلك.
القوائم المنسدلة للأزرار
استخدم أي زر لتشغيل قائمة منسدلة عن طريق وضعها داخل علامة .btn-groupقائمة مناسبة وتوفير الترميز المناسب لها.
قم بتوسيع عناصر التحكم في النموذج عن طريق إضافة نص أو أزرار قبل أو بعد أو على جانبي أي مستند إلى نص <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) على جانب واحد.
نحن لا ندعم عدة عناصر تحكم في النموذج في مجموعة إدخال واحدة.
تحجيم
أضف فئات تحجيم النموذج النسبية إلى .input-groupنفسها وسيتم تغيير حجم المحتويات داخل تلقائيًا - لا حاجة لتكرار فئات حجم التحكم في النموذج على كل عنصر.
مربعات الاختيار وملحقات الراديو
ضع أي مربع اختيار أو خيار راديو داخل الوظيفة الإضافية لمجموعة الإدخال بدلاً من النص.
الإضافات زر
تختلف الأزرار في مجموعات الإدخال قليلاً وتتطلب مستوى إضافيًا واحدًا من التداخل. بدلاً من ذلك .input-group-addon، ستحتاج إلى .input-group-btnالتفاف الأزرار. هذا مطلوب بسبب أنماط المتصفح الافتراضية التي لا يمكن تجاوزها.
الأزرار مع القوائم المنسدلة
أزرار مجزأة
أزرار متعددة
بينما لا يمكنك الحصول إلا على وظيفة إضافية واحدة لكل جانب ، يمكنك الحصول على عدة أزرار داخل واحد .input-group-btn.
نافس
تحتوي Navs المتوفرة في Bootstrap على ترميز مشترك ، بدءًا من .navالفئة الأساسية ، بالإضافة إلى الحالات المشتركة. فئات معدل التبديل للتبديل بين كل نمط.
يتطلب استخدام التنقل للوحات علامات التبويب المكون الإضافي لعلامات تبويب جافا سكريبت
بالنسبة إلى علامات التبويب التي تحتوي على مناطق قابلة للجدولة ، يجب عليك استخدام البرنامج المساعد لعلامات التبويب JavaScript . سيتطلب الترميز أيضًا سمات إضافية roleوخصائص ARIA - راجع مثال ترميز المكون الإضافي للحصول على مزيد من التفاصيل.
جعل الملاحة تستخدم للتنقل يمكن الوصول إليها
إذا كنت تستخدم التنقلات لتوفير شريط تنقل ، فتأكد من إضافة role="navigation"الحاوية الرئيسية الأكثر منطقية لـ <ul>، أو قم بلف <nav>عنصر حول التنقل بالكامل. لا تضف الدور إلى <ul>نفسه ، لأن هذا سيمنع الإعلان عنه كقائمة فعلية بواسطة التقنيات المساعدة.
اجعل علامات التبويب أو الحبوب بعرض متساوٍ بسهولة لوالديهم على شاشات أكبر من 768 بكسل .nav-justified. على الشاشات الأصغر ، تكون روابط التنقل مكدسة.
روابط تنقل شريط التنقل المضبوطة غير مدعومة حاليًا.
سفاري وملاح مبرر سريع الاستجابة
اعتبارًا من الإصدار 9.1.2 ، يعرض Safari خطأً يتسبب فيه تغيير حجم المتصفح أفقيًا في حدوث أخطاء في العرض في التنقل المبرر الذي يتم مسحه عند التحديث. يظهر هذا الخطأ أيضًا في مثال التنقل المبرر .
تعد Navbars مكونات تعريفية سريعة الاستجابة تعمل كرؤوس تنقل لتطبيقك أو موقعك. تبدأ مطوية (وقابلة للتبديل) في طرق عرض الجوال وتصبح أفقية مع زيادة عرض إطار العرض المتاح.
روابط تنقل شريط التنقل المضبوطة غير مدعومة حاليًا.
فائض المحتوى
نظرًا لأن Bootstrap لا يعرف مقدار المساحة التي يحتاجها المحتوى في شريط التنقل الخاص بك ، فقد تواجه مشكلات في التفاف المحتوى في الصف الثاني. لحل هذه المشكلة ، يمكنك:
قم بتغيير النقطة التي ينتقل عندها شريط التنقل بين الوضع المطوي والوضع الأفقي. خصص @grid-float-breakpointالمتغير أو أضف استعلام الوسائط الخاص بك.
يتطلب البرنامج المساعد جافا سكريبت
إذا تم تعطيل JavaScript وكان منفذ العرض ضيقًا بدرجة كافية بحيث ينهار شريط التنقل ، فسيكون من المستحيل توسيع شريط التنقل وعرض المحتوى داخل ملف .navbar-collapse.
يتطلب شريط التنقل سريع الاستجابة تضمين ملحق الطي في إصدار Bootstrap الخاص بك.
تغيير نقطة توقف شريط التنقل المنهارة
ينهار شريط التنقل في عرضه الرأسي على الهاتف المحمول عندما يكون إطار العرض أضيق من @grid-float-breakpoint، ويتوسع إلى العرض الأفقي غير المحمول عندما يكون عرض إطار العرض على الأقل @grid-float-breakpoint. اضبط هذا المتغير في Less source للتحكم عند انهيار / توسيع شريط التنقل. القيمة الافتراضية هي 768px(أصغر شاشة "صغيرة" أو شاشة "كمبيوتر لوحي").
جعل نافبارز للوصول
تأكد من استخدام <nav>عنصر ، أو إذا كنت تستخدم عنصرًا أكثر عمومية مثل a ، فقم <div>بإضافة a role="navigation"إلى كل شريط تنقل لتعريفه بوضوح كمنطقة مميزة لمستخدمي التقنيات المساعدة.
صورة العلامة التجارية
استبدل العلامة التجارية navbar بصورتك الخاصة عن طريق تبديل النص بملف <img>. نظرًا لأن .navbar-brandالحشو والارتفاع الخاصين به ، فقد تحتاج إلى تجاوز بعض CSS اعتمادًا على صورتك.
نماذج
ضع محتوى النموذج في الداخل .navbar-formمن أجل المحاذاة الرأسية المناسبة والسلوك المطوي في إطارات العرض الضيقة. استخدم خيارات المحاذاة لتحديد مكان وجودها داخل محتوى شريط التنقل.
كرؤساء ، .navbar-formيشارك الكثير من التعليمات البرمجية الخاصة به مع .form-inlineعبر mixin. قد تتطلب بعض عناصر التحكم في النموذج ، مثل مجموعات الإدخال ، عروض ثابتة لتظهر بشكل صحيح داخل شريط التنقل.
محاذير الجهاز المحمول
هناك بعض المحاذير المتعلقة باستخدام عناصر التحكم في النموذج داخل العناصر الثابتة على الأجهزة المحمولة. راجع مستندات دعم المتصفح للحصول على التفاصيل.
أضف تسميات دائمًا
ستواجه برامج قراءة الشاشة مشكلة في النماذج الخاصة بك إذا لم تقم بتضمين تسمية لكل إدخال. بالنسبة لهذه النماذج المضمنة ، يمكنك إخفاء التسميات باستخدام .sr-onlyالفئة. هناك طرق بديلة أخرى لتوفير تسمية للتقنيات المساعدة ، مثل aria-label، aria-labelledbyأو titleالسمة. في حالة عدم وجود أي منها ، قد تلجأ برامج قراءة الشاشة إلى استخدام placeholderالسمة ، إن وجدت ، ولكن لاحظ أنه placeholderلا يُنصح باستخدامها كبديل لطرق وضع العلامات الأخرى.
أزرار
أضف .navbar-btnالفئة إلى <button>العناصر غير المقيمة في a <form>لتوسيطها رأسياً في شريط التنقل.
استخدام خاص بالسياق
مثل فئات الأزرار القياسية ، .navbar-btnيمكن استخدامها على <a>والعناصر <input>. ومع ذلك ، لا .navbar-btnيجب استخدام ولا فئات الأزرار القياسية على <a>العناصر الموجودة داخل .navbar-nav.
نص
التفاف سلاسل النص في عنصر .navbar-textما ، عادةً على <p>علامة من أجل المسافة البادئة واللون المناسبين.
روابط غير ملاحية
بالنسبة للأشخاص الذين يستخدمون ارتباطات قياسية ليست ضمن مكون التنقل العادي في شريط التنقل ، استخدم .navbar-linkالفئة لإضافة الألوان المناسبة لخيارات شريط التنقل الافتراضية والعكسية.
محاذاة المكونات
قم بمحاذاة روابط التنقل ، أو النماذج ، أو الأزرار ، أو النص ، باستخدام فئات .navbar-leftأو الأداة المساعدة. .navbar-rightكلا الفئتين سيضيفان CSS float في الاتجاه المحدد. على سبيل المثال ، لمحاذاة روابط التنقل ، ضعها في مكان منفصل <ul>باستخدام فئة الأداة المساعدة المطبقة.
هذه الفئات عبارة عن إصدارات مختلطة من .pull-leftو .pull-right، ولكن يتم تحديد نطاقها لاستعلامات الوسائط لتسهيل التعامل مع مكونات شريط التنقل عبر أحجام الأجهزة.
محاذاة مكونات متعددة لليمين
توجد قيود على Navbars حاليًا مع .navbar-rightفئات متعددة. لفراغ المحتوى بشكل صحيح ، نستخدم الهامش السالب على .navbar-rightالعنصر الأخير. عندما تكون هناك عناصر متعددة تستخدم هذه الفئة ، فإن هذه الهوامش لا تعمل على النحو المنشود.
سنعيد النظر في هذا عندما نتمكن من إعادة كتابة هذا المكون في v4.
ثابت في الأعلى
إضافة .navbar-fixed-topوتضمين .containerأو .container-fluidإلى مركز ولوحة شريط التنقل محتوى.
الحشوة المطلوبة للجسم
سيغطي شريط التنقل الثابت المحتوى الآخر الخاص بك ، ما لم تقم بإضافته paddingإلى الجزء العلوي من ملف <body>. جرب القيم الخاصة بك أو استخدم المقتطف أدناه. نصيحة: بشكل افتراضي ، يبلغ ارتفاع شريط التنقل 50 بكسل.
تأكد من تضمين ذلك بعد Bootstrap CSS الأساسي.
ثابت في الأسفل
إضافة .navbar-fixed-bottomوتضمين .containerأو .container-fluidإلى مركز ولوحة شريط التنقل محتوى.
الحشوة المطلوبة للجسم
سيغطي شريط التنقل الثابت المحتوى الآخر الخاص بك ، ما لم تقم بإضافته paddingإلى الجزء السفلي من ملف <body>. جرب القيم الخاصة بك أو استخدم المقتطف أدناه. نصيحة: بشكل افتراضي ، يبلغ ارتفاع شريط التنقل 50 بكسل.
تأكد من تضمين ذلك بعد Bootstrap CSS الأساسي.
قمة ثابتة
قم بإنشاء شريط تنقل كامل العرض يتنقل بعيدًا مع الصفحة عن طريق إضافة .navbar-static-topأو تضمين محتوى شريط التنقل .containerأو .container-fluidإلى المركز ولوحة التنقل.
على عكس .navbar-fixed-*الفئات ، لا تحتاج إلى تغيير أي مساحة متروكة على ملف body.
نافبار معكوس
قم بتعديل مظهر شريط التنقل عن طريق الإضافة .navbar-inverse.
فتات الخبز
حدد موقع الصفحة الحالية داخل التسلسل الهرمي للتنقل.
تتم إضافة الفواصل تلقائيًا في CSS من خلال :beforeو content.
قم بتوفير روابط ترقيم الصفحات لموقعك أو تطبيقك باستخدام مكون ترقيم الصفحات متعدد الصفحات ، أو البديل الأبسط للصفحة .
ترقيم الصفحات الافتراضي
ترقيم صفحات بسيط مستوحى من Rdio ، وهو رائع للتطبيقات ونتائج البحث. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.
وسم مكون ترقيم الصفحات
يجب أن يتم لف مكون ترقيم الصفحات في <nav>عنصر لتحديده كقسم تنقل لقارئات الشاشة والتقنيات المساعدة الأخرى. بالإضافة إلى ذلك ، نظرًا لأنه من المحتمل أن تحتوي الصفحة على أكثر من قسم تنقل واحد بالفعل (مثل التنقل الأساسي في العنوان ، أو التنقل في الشريط الجانبي) ، فمن المستحسن توفير وصف وصفي يعكس الغرض منه aria-label. <nav>على سبيل المثال ، إذا تم استخدام مكون ترقيم الصفحات للتنقل بين مجموعة من نتائج البحث ، فيمكن أن تكون التسمية المناسبة aria-label="Search results pages".
نوصي باستبدال نقاط الارتساء النشطة أو المعطلة <span>، أو حذف الرابط في حالة الأسهم السابقة / التالية ، لإزالة وظيفة النقر مع الاحتفاظ بالأنماط المقصودة.
تحجيم
يتوهم ترقيم الصفحات أكبر أو أصغر؟ أضف .pagination-lgأو .pagination-smلأحجام إضافية.
بيجر
روابط سريعة سابقة وتالية لعمليات ترقيم صفحات بسيطة مع ترميز وأنماط خفيفة. إنه رائع للمواقع البسيطة مثل المدونات أو المجلات.
المثال الافتراضي
بشكل افتراضي ، يقوم جهاز الاستدعاء بتوسيط الروابط.
الروابط المحاذاة
بدلاً من ذلك ، يمكنك محاذاة كل رابط بالجوانب:
حالة تعطيل اختيارية
تستخدم روابط النداء أيضًا .disabledفئة المرافق العامة من ترقيم الصفحات.
ملصقات
مثال
مثال عنوان جديد
مثال عنوان جديد
مثال عنوان جديد
مثال عنوان جديد
مثال عنوان جديد
مثال عنوان جديد
الاختلافات المتاحة
أضف أيًا من فئات التعديل المذكورة أدناه لتغيير مظهر الملصق.
تحذير معلومات النجاح الأولية الافتراضية خطر
هل لديك الكثير من الملصقات؟
يمكن أن تظهر مشاكل التقديم عندما يكون لديك عشرات التسميات المضمنة داخل حاوية ضيقة ، كل منها يحتوي على inline-blockعنصره الخاص (مثل رمز). الطريقة حول هذا هو الإعداد display: inline-block;. للسياق ومثال ، انظر # 13219 .
شارات
قم بتمييز العناصر الجديدة أو غير المقروءة بسهولة عن طريق إضافة <span class="badge">روابط إلى روابط Bootstrap والمزيد.
لجعل الجامبوترون بالعرض الكامل ، وبدون زوايا دائرية ، ضعه خارج كل .containers وبدلاً من ذلك أضف .containerالداخل.
رأس الصفحة
غلاف بسيط لـ a h1لتقسيم أقسام المحتوى على الصفحة بشكل مناسب وتقسيمها. يمكنه استخدام العنصر h1الافتراضي الخاص بـ " small، بالإضافة إلى معظم المكونات الأخرى (مع أنماط إضافية).
مثال على رأس الصفحة نص فرعي للرأس
المصغرات
قم بتوسيع نظام شبكة Bootstrap بمكون الصورة المصغرة لعرض شبكات الصور ومقاطع الفيديو والنصوص والمزيد بسهولة.
إذا كنت تبحث عن عرض تقديمي يشبه Pinterest لصور مصغرة ذات ارتفاعات و / أو عروض مختلفة ، فستحتاج إلى استخدام مكون إضافي تابع لجهة خارجية مثل Masonry أو Isotope أو Salvattore .
المثال الافتراضي
بشكل افتراضي ، تم تصميم الصور المصغرة لـ Bootstrap لعرض الصور المرتبطة بالحد الأدنى من العلامات المطلوبة.
محتوى مخصص
مع القليل من الترميز الإضافي ، من الممكن إضافة أي نوع من محتوى HTML مثل العناوين أو الفقرات أو الأزرار إلى الصور المصغرة.
تسمية الصورة المصغرة
Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.
Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.
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.
قم بتوفير رسائل ملاحظات سياقية لإجراءات المستخدم النموذجية مع عدد قليل من رسائل التنبيه المتاحة والمرنة.
أمثلة
قم بلف أي نص وزر رفض اختياري في .alertواحدة من الفئات السياقية الأربعة (على سبيل المثال ، .alert-success) لرسائل التنبيه الأساسية.
لا توجد فئة افتراضية
التنبيهات لا تحتوي على فئات افتراضية ، فقط فئات أساسية وفئات معدلة. التنبيه الرمادي الافتراضي ليس له معنى كبير ، لذا فأنت مطالب بتحديد نوع عبر فئة السياقية. اختر من بين النجاح أو المعلومات أو التحذير أو الخطر.
أحسنت! لقد نجحت في قراءة رسالة التنبيه المهمة هذه.
انتباه! يحتاج هذا التنبيه إلى انتباهك ، لكنه ليس بالغ الأهمية.
تحذير! تحقق بشكل أفضل من نفسك ، فأنت لا تبدو جيدًا جدًا.
أوه المفاجئة! غيّر بعض الأشياء وحاول الإرسال مرة أخرى.
تنبيهات غير مقبولة
بناء على أي تنبيه عن طريق إضافة زر اختياري .alert-dismissibleوإغلاق.
قدم ملاحظات محدثة حول تقدم سير العمل أو الإجراء باستخدام أشرطة تقدم بسيطة ومرنة.
التوافق عبر المستعرضات
تستخدم أشرطة التقدم انتقالات CSS3 والرسوم المتحركة لتحقيق بعض تأثيراتها. هذه الميزات غير مدعومة في Internet Explorer 9 والإصدارات الأقدم أو الإصدارات الأقدم من Firefox. لا يدعم Opera 12 الرسوم المتحركة.
التوافق مع نهج أمان المحتوى (CSP)
إذا كان موقع الويب الخاص بك يحتوي على سياسة أمان المحتوى (CSP) التي لا تسمح بذلك style-src 'unsafe-inline'، فلن تتمكن من استخدام styleالسمات المضمنة لتعيين عروض شريط التقدم كما هو موضح في الأمثلة أدناه. تتضمن الطرق البديلة لتعيين العروض المتوافقة مع CSPs الصارمة استخدام القليل من JavaScript المخصص (الذي يعين element.style.width) أو استخدام فئات CSS مخصصة.
للتأكد من أن نص التسمية يظل مقروءًا حتى بالنسبة للنسب المئوية المنخفضة ، ضع في اعتبارك إضافة a min-widthإلى شريط التقدم.
0٪
2٪
البدائل السياقية
تستخدم أشرطة التقدم بعضًا من نفس فئات التنبيه والأزرار للأنماط المتناسقة.
40٪ مكتمل (نجاح)
20٪ اكتمل
60٪ مكتمل (تحذير)
80٪ مكتمل (خطر)
مخطط
يستخدم التدرج اللوني لإنشاء تأثير مخطط. غير متوفر في IE9 وما دونه.
40٪ مكتمل (نجاح)
20٪ اكتمل
60٪ مكتمل (تحذير)
80٪ مكتمل (خطر)
مفعم بالحيوية
أضف .activeلتحريك .progress-bar-stripedالمشارب من اليمين إلى اليسار. غير متوفر في IE9 وما دونه.
45٪ اكتمل
مرصوصة
ضع عدة أشرطة في نفس .progressلتكديسها.
35٪ مكتمل (نجاح)
20٪ اكتمل (تحذير)
10٪ أكمل (خطر)
كائن الوسائط
أنماط كائن مجردة لإنشاء أنواع مختلفة من المكونات (مثل تعليقات المدونة والتغريدات وما إلى ذلك) التي تتميز بمحاذاة الصورة إلى اليمين أو اليسار جنبًا إلى جنب مع المحتوى النصي.
الوسائط الافتراضية
تعرض الوسائط الافتراضية كائن وسائط (صور ، فيديو ، صوت) على يسار أو يمين كتلة المحتوى.
عنوان الوسائط
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.
الفئات موجودة أيضًا .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.
قائمة الوسائط
مع القليل من الترميز الإضافي ، يمكنك استخدام الوسائط داخل القائمة (مفيدة لسلاسل التعليقات أو قوائم المقالات).
عنوان الوسائط
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.
مجموعة القائمة
تعد مجموعات القوائم مكونًا مرنًا وقويًا لعرض ليس فقط قوائم بسيطة من العناصر ، ولكن أيضًا لعرض قوائم معقدة ذات محتوى مخصص.
مثال أساسي
مجموعة القائمة الأساسية هي ببساطة قائمة غير مرتبة تحتوي على عناصر قائمة ، والفئات المناسبة. قم بالبناء عليه بالخيارات التالية ، أو CSS الخاص بك حسب الحاجة.
كراس جوستو أوديو
Dapibus ac facilisis في
موربي ليو ريسوس
Porta ac consectetur ac
الدهليز في إيروس
شارات
أضف مكون الشارات إلى أي عنصر مجموعة قائمة وسيتم وضعه تلقائيًا على اليمين.
14كراس جوستو أوديو
2Dapibus ac facilisis في
1موربي ليو ريسوس
العناصر المرتبطة
ربط عناصر مجموعة القائمة باستخدام علامات الإرساء بدلاً من عناصر القائمة (وهذا يعني أيضًا أصلًا <div>بدلاً من <ul>). لا حاجة للآباء الفرديين حول كل عنصر.
قد تكون عناصر مجموعة القائمة عبارة عن أزرار بدلاً من عناصر قائمة (وهذا يعني أيضًا أصلًا <div>بدلاً من عنصر <ul>). لا حاجة للآباء الفرديين حول كل عنصر. لا تستخدم .btnالفصول القياسية هنا.
على الرغم من أنه ليس ضروريًا دائمًا ، فأنت بحاجة أحيانًا إلى وضع DOM في صندوق. لتلك المواقف ، جرب مكون اللوحة.
مثال أساسي
بشكل افتراضي ، كل ما .panelيفعله هو تطبيق بعض الحدود الأساسية والحشو لاحتواء بعض المحتوى.
مثال على اللوحة الأساسية
لوحة مع العنوان
يمكنك بسهولة إضافة حاوية عنوان إلى اللوحة الخاصة بك باستخدام ملفات .panel-heading. يمكنك أيضًا تضمين أي <h1>- <h6>مع .panel-titleفئة لإضافة عنوان مصمم مسبقًا. ومع ذلك ، يتم تجاوز أحجام خطوط <h1>- <h6>بواسطة .panel-heading.
لتلوين الارتباط الصحيح ، تأكد من وضع الروابط في العناوين بداخلها .panel-title.
عنوان اللوحة بدون عنوان
محتوى اللوحة
عنوان اللوحة
محتوى اللوحة
لوحة مع تذييل
أزرار التفاف أو نص ثانوي بتنسيق .panel-footer. لاحظ أن تذييلات اللوحة لا ترث الألوان والحدود عند استخدام الاختلافات السياقية حيث لا يُقصد بها أن تكون في المقدمة.
محتوى اللوحة
البدائل السياقية
مثل المكونات الأخرى ، يمكنك بسهولة جعل اللوحة أكثر وضوحًا لسياق معين عن طريق إضافة أي من فئات الحالة السياقية.
عنوان اللوحة
محتوى اللوحة
عنوان اللوحة
محتوى اللوحة
عنوان اللوحة
محتوى اللوحة
عنوان اللوحة
محتوى اللوحة
عنوان اللوحة
محتوى اللوحة
مع الجداول
أضف أي .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
لاري
الطائر
@تويتر
في حالة عدم وجود جسم لوحة ، ينتقل المكون من رأس اللوحة إلى الجدول دون انقطاع.
بعض محتويات اللوحة الافتراضية هنا. 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
الدهليز في إيروس
تضمين استجابة
اسمح للمتصفحات بتحديد أبعاد الفيديو أو عرض الشرائح بناءً على عرض الكتلة التي تحتوي عليها عن طريق إنشاء نسبة جوهرية من شأنها أن تتدرج بشكل صحيح على أي جهاز.
يتم تطبيق القواعد مباشرة على <iframe>، <embed>و <video>، <object>والعناصر ؛ استخدم اختياريًا فئة فرعية صريحة .embed-responsive-itemعندما تريد مطابقة نمط السمات الأخرى.
نصيحة محترف! لست بحاجة إلى تضمينها frameborder="0"في حساباتك <iframe>لأننا نتجاوز ذلك نيابةً عنك.
آبار
الافتراضي جيدا
استخدم أيضًا تأثيرًا بسيطًا على عنصر ما لإعطائه تأثيرًا داخليًا.
انظر ، أنا في بئر!
فصول اختيارية
التحكم في الحشو والزوايا الدائرية مع فئتين من فئات التعديل الاختيارية.