عناصر
تم تصميم أكثر من عشرة مكونات قابلة لإعادة الاستخدام لتوفير الأيقونات والقوائم المنسدلة ومجموعات الإدخال والتنقل والتنبيهات وغير ذلك الكثير.
تم تصميم أكثر من عشرة مكونات قابلة لإعادة الاستخدام لتوفير الأيقونات والقوائم المنسدلة ومجموعات الإدخال والتنقل والتنبيهات وغير ذلك الكثير.
يتضمن أكثر من 250 صورة رمزية بتنسيق خط من مجموعة Glyphicon Halflings. لا تتوفر عادةً Glyphicons Halflings مجانًا ، ولكن منشئها جعلها متاحة لـ Bootstrap مجانًا. كتعبير عن الشكر ، نطلب منك فقط تضمين رابط يعود إلى Glyphicons كلما أمكن ذلك.
لأسباب تتعلق بالأداء ، تتطلب جميع الرموز فئة أساسية وفئة رمز فردية. للاستخدام ، ضع الكود التالي في أي مكان تقريبًا. تأكد من ترك مسافة بين الرمز والنص لتوفير مساحة متروكة مناسبة.
لا يمكن دمج فئات الرموز مباشرة مع المكونات الأخرى. لا ينبغي استخدامها مع الفئات الأخرى في نفس العنصر. بدلاً من ذلك ، قم بإضافة فئة متداخلة <span>
وتطبيق فئات الأيقونات على ملف <span>
.
يجب استخدام فئات الرموز فقط في العناصر التي لا تحتوي على محتوى نصي ولا تحتوي على عناصر فرعية.
يفترض Bootstrap أن ملفات خطوط الرموز ستكون موجودة في ../fonts/
الدليل ، بالنسبة إلى ملفات CSS المترجمة. يعني نقل ملفات الخطوط هذه أو إعادة تسميتها تحديث CSS بإحدى الطرق الثلاث:
@icon-font-path
و / أو @icon-font-name
المتغيرات في الملفات الأقل المصدر.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 ، قد ترغب في إزالة الحدود أو إعادة تلوينها.
لا يعرض Internet Explorer 8 حدودًا على الأزرار في مجموعة أزرار مضبوطة ، سواء كانت قيد التشغيل <a>
أو <button>
عناصر. للتغلب على ذلك ، لف كل زر في الآخر .btn-group
.
راجع # 12476 لمزيد من المعلومات.
<a>
العناصرمجرد لف سلسلة من .btn
s في .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
إذا <a>
تم استخدام العناصر للعمل كأزرار - تشغيل وظيفة في الصفحة ، بدلاً من التنقل إلى مستند أو قسم آخر داخل الصفحة الحالية - فيجب أيضًا إعطاؤها مناسبة role="button"
.
<button>
العناصرلاستخدام مجموعات الأزرار المضبوطة مع <button>
العناصر ، يجب عليك التفاف كل زر في مجموعة أزرار . لا تطبق معظم المتصفحات CSS بشكل صحيح لتبرير <button>
العناصر ، ولكن نظرًا لأننا ندعم القوائم المنسدلة للأزرار ، فيمكننا التغلب على ذلك.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
استخدم أي زر لتشغيل قائمة منسدلة عن طريق وضعها داخل علامة .btn-group
قائمة مناسبة وتوفير الترميز المناسب لها.
تتطلب القوائم المنسدلة للأزرار تضمين المكون الإضافي المنسدل في إصدار Bootstrap الخاص بك.
حوّل زرًا إلى قائمة منسدلة للتبديل مع بعض التغييرات الأساسية في الترميز.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
وبالمثل ، قم بإنشاء قوائم منسدلة لأزرار الانقسام بنفس تغييرات الترميز ، فقط باستخدام زر منفصل.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
تعمل القوائم المنسدلة للأزرار مع الأزرار من جميع الأحجام.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
تشغيل القوائم المنسدلة فوق العناصر من خلال إضافتها .dropup
إلى العنصر الرئيسي.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
قم بتوسيع عناصر التحكم في النموذج عن طريق إضافة نص أو أزرار قبل أو بعد أو على جانبي أي مستند إلى نص <input>
. استخدم .input-group
مع .input-group-addon
أو .input-group-btn
لإضافة عناصر قبلية أو إلحاقها بمفردها .form-control
.
<input>
فقطتجنب استخدام <select>
العناصر هنا حيث لا يمكن تصميمها بالكامل في متصفحات WebKit.
تجنب استخدام <textarea>
العناصر هنا حيث rows
لن يتم احترام سماتها في بعض الحالات.
عند استخدام تلميحات الأدوات أو العناصر المنبثقة على عناصر داخل .input-group
، سيتعين عليك تحديد الخيار container: 'body'
لتجنب الآثار الجانبية غير المرغوب فيها (مثل زيادة اتساع العنصر و / أو فقدان زواياه الدائرية عند تشغيل التلميح أو المنبثقة).
لا تخلط مجموعات النماذج أو فئات أعمدة الشبكة مباشرة مع مجموعات الإدخال. بدلاً من ذلك ، قم بتداخل مجموعة الإدخال داخل مجموعة النموذج أو العنصر المرتبط بالشبكة.
ستواجه برامج قراءة الشاشة مشكلة في النماذج الخاصة بك إذا لم تقم بتضمين تسمية لكل إدخال. بالنسبة لمجموعات الإدخال هذه ، تأكد من نقل أي تسمية أو وظيفة إضافية إلى التقنيات المساعدة.
ستختلف التقنية الدقيقة التي سيتم استخدامها ( <label>
العناصر المرئية أو <label>
العناصر المخفية باستخدام .sr-only
الفئة أو استخدام aria-label
، aria-labelledby
أو aria-describedby
، title
أو placeholder
السمة) والمعلومات الإضافية التي يجب نقلها اعتمادًا على النوع الدقيق لعنصر واجهة المستخدم الذي تقوم بتطبيقه. توفر الأمثلة في هذا القسم بعض الأساليب المقترحة الخاصة بكل حالة.
ضع وظيفة إضافية أو زرًا واحدًا على جانبي الإدخال. يمكنك أيضًا وضع أحدهما على جانبي الإدخال.
نحن لا ندعم الوظائف الإضافية المتعددة ( .input-group-addon
أو .input-group-btn
) على جانب واحد.
نحن لا ندعم عدة عناصر تحكم في النموذج في مجموعة إدخال واحدة.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
أضف فئات تحجيم النموذج النسبية إلى .input-group
نفسها وسيتم تغيير حجم المحتويات داخل تلقائيًا - لا حاجة لتكرار فئات حجم التحكم في النموذج على كل عنصر.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
ضع أي مربع اختيار أو خيار راديو داخل الوظيفة الإضافية لمجموعة الإدخال بدلاً من النص.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
تختلف الأزرار في مجموعات الإدخال قليلاً وتتطلب مستوى إضافيًا واحدًا من التداخل. بدلاً من ذلك .input-group-addon
، ستحتاج إلى .input-group-btn
التفاف الأزرار. هذا مطلوب بسبب أنماط المتصفح الافتراضية التي لا يمكن تجاوزها.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
بينما لا يمكنك الحصول إلا على وظيفة إضافية واحدة لكل جانب ، يمكنك الحصول على عدة أزرار داخل واحد .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
تحتوي Navs المتوفرة في Bootstrap على ترميز مشترك ، بدءًا من .nav
الفئة الأساسية ، بالإضافة إلى الحالات المشتركة. فئات معدل التبديل للتبديل بين كل نمط.
لاحظ أن .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
. على الشاشات الأصغر ، تكون روابط التنقل مكدسة.
روابط تنقل شريط التنقل المضبوطة غير مدعومة حاليًا.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
.disabled
بالنسبة إلى أي مكون تنقل (علامات تبويب أو أقراص) ، أضف روابط رمادية ولا توجد تأثيرات تحوم .
<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 مكونات تعريفية سريعة الاستجابة تعمل كرؤوس تنقل لتطبيقك أو موقعك. تبدأ مطوية (وقابلة للتبديل) في طرق عرض الجوال وتصبح أفقية مع زيادة عرض إطار العرض المتاح.
روابط تنقل شريط التنقل المضبوطة غير مدعومة حاليًا.
<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>
أضف .navbar-btn
الفئة إلى <button>
العناصر غير المقيمة في a <form>
لتوسيطها رأسياً في شريط التنقل.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
التفاف سلاسل النص في عنصر .navbar-text
ما ، عادةً على <p>
علامة من أجل المسافة البادئة واللون المناسبين.
<p class="navbar-text">Signed in as Mark Otto</p>
بالنسبة للأشخاص الذين يستخدمون ارتباطات قياسية ليست ضمن مكون التنقل العادي في شريط التنقل ، استخدم .navbar-link
الفئة لإضافة الألوان المناسبة لخيارات شريط التنقل الافتراضية والعكسية.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
قم بمحاذاة روابط التنقل ، أو النماذج ، أو الأزرار ، أو النص ، باستخدام فئات .navbar-left
أو الأداة المساعدة. .navbar-right
كلا الفئتين سيضيفان CSS float في الاتجاه المحدد. على سبيل المثال ، لمحاذاة روابط التنقل ، ضعها في مكان منفصل <ul>
باستخدام فئة الأداة المساعدة المطبقة.
هذه الفئات عبارة عن إصدارات مختلطة من .pull-left
و .pull-right
، ولكن يتم تحديد نطاقها لاستعلامات الوسائط لتسهيل التعامل مع مكونات شريط التنقل عبر أحجام الأجهزة.
إضافة .navbar-fixed-top
وتضمين .container
أو .container-fluid
إلى مركز ولوحة شريط التنقل محتوى.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
إضافة .navbar-fixed-bottom
وتضمين .container
أو .container-fluid
إلى مركز ولوحة شريط التنقل محتوى.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
قم بإنشاء شريط تنقل كامل العرض يتنقل بعيدًا مع الصفحة عن طريق إضافة .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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
تستخدم روابط النداء أيضًا .disabled
فئة المرافق العامة من ترقيم الصفحات.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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>
لجعل الجامبوترون بالعرض الكامل ، وبدون زوايا دائرية ، ضعه خارج كل .container
s وبدلاً من ذلك أضف .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 مثل العناوين أو الفقرات أو الأزرار إلى الصور المصغرة.
<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 الإضافي للتنبيهات .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</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) التي لا تسمح بذلك style-src 'unsafe-inline'
، فلن تتمكن من استخدام style
السمات المضمنة لتعيين عروض شريط التقدم كما هو موضح في الأمثلة أدناه. تتضمن الطرق البديلة لتعيين العروض المتوافقة مع CSPs الصارمة استخدام القليل من JavaScript المخصص (الذي يعين element.style.width
) أو استخدام فئات CSS مخصصة.
شريط التقدم الافتراضي.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
قم بإزالة الفئة <span>
مع .sr-only
من داخل شريط التقدم لإظهار النسبة المئوية المرئية.
<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>
تستخدم أشرطة التقدم بعضًا من نفس فئات التنبيه والأزرار للأنماط المتناسقة.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
يستخدم التدرج اللوني لإنشاء تأثير مخطط. غير متوفر في IE9 وما دونه.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
أضف .active
لتحريك .progress-bar-striped
المشارب من اليمين إلى اليسار. غير متوفر في IE9 وما دونه.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
ضع عدة أشرطة في نفس .progress
لتكديسها.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
أنماط كائن مجردة لإنشاء أنواع مختلفة من المكونات (مثل تعليقات المدونة والتغريدات وما إلى ذلك) التي تتميز بمحاذاة الصورة إلى اليمين أو اليسار جنبًا إلى جنب مع المحتوى النصي.
تعرض الوسائط الافتراضية كائن وسائط (صور ، فيديو ، صوت) على يسار أو يمين كتلة المحتوى.
<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.
<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 الخاص بك حسب الحاجة.
<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>
أضف مكون الشارات إلى أي عنصر مجموعة قائمة وسيتم وضعه تلقائيًا على اليمين.
<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
الولاية.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
أضف ما يقرب من أي HTML داخل ، حتى بالنسبة لمجموعات القوائم المرتبطة مثل المجموعة أدناه.
Donec id elit non mi porta gravida at eget metus. Maecenas sed Diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed Diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed Diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
على الرغم من أنه ليس ضروريًا دائمًا ، فأنت بحاجة أحيانًا إلى وضع DOM في صندوق. لتلك المواقف ، جرب مكون اللوحة.
بشكل افتراضي ، كل ما .panel
يفعله هو تطبيق بعض الحدود الأساسية والحشو لاحتواء بعض المحتوى.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
يمكنك بسهولة إضافة حاوية عنوان إلى اللوحة الخاصة بك باستخدام ملفات .panel-heading
. يمكنك أيضًا تضمين أي <h1>
- <h6>
مع .panel-title
فئة لإضافة عنوان مصمم مسبقًا. ومع ذلك ، يتم تجاوز أحجام خطوط <h1>
- <h6>
بواسطة .panel-heading
.
لتلوين الارتباط الصحيح ، تأكد من وضع الروابط في العناوين بداخلها .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
أزرار التفاف أو نص ثانوي بتنسيق .panel-footer
. لاحظ أن تذييلات اللوحة لا ترث الألوان والحدود عند استخدام الاختلافات السياقية حيث لا يُقصد بها أن تكون في المقدمة.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
مثل المكونات الأخرى ، يمكنك بسهولة جعل اللوحة أكثر وضوحًا لسياق معين عن طريق إضافة أي من فئات الحالة السياقية.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
أضف أي .table
لوحة لا حدود لها للحصول على تصميم سلس. إذا كان هناك a .panel-body
، نضيف حدًا إضافيًا إلى أعلى الجدول للفصل.
بعض محتويات اللوحة الافتراضية هنا. Nulla vitae elit libero ، augue pharetra. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.
# | الاسم الاول | الكنية | اسم المستخدم |
---|---|---|---|
1 | علامة | أوتو | mdo |
2 | يعقوب | ثورنتون | @سمين |
3 | لاري | الطائر | @تويتر |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
في حالة عدم وجود جسم لوحة ، ينتقل المكون من رأس اللوحة إلى الجدول دون انقطاع.
# | الاسم الاول | الكنية | اسم المستخدم |
---|---|---|---|
1 | علامة | أوتو | mdo |
2 | يعقوب | ثورنتون | @سمين |
3 | لاري | الطائر | @تويتر |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
قم بتضمين مجموعات قائمة كاملة العرض بسهولة داخل أي لوحة.
بعض محتويات اللوحة الافتراضية هنا. Nulla vitae elit libero ، augue pharetra. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.
<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>