نص
إضافة المعنى من خلال النص الألوان مع الفئات أدناه. الروابط سوف تلقي بظلالها على التحويم:
| صف مدرسي | وصف | مثال |
|---|---|---|
| .text-muted | نص على غرار مع الطبقة "text-muted" | جربها |
| .text-primary | النص غرار مع الطبقة "text-primary" | جربها |
| .text-success | نص على غرار مع الطبقة "text-success" | جربها |
| .text-info | نص على غرار مع الطبقة "text-info" | جربها |
| .text-warning | نص على غرار مع الطبقة "text-warning" | جربها |
| .text-danger | نص على غرار مع الطبقة "text-danger" | جربها |
خلفية
إضافة المعنى من خلال الخلفية الألوان مع الفئات أدناه. وصلات تلقي بظلالها على تحوم تماما مثل طبقات النص:
| صف مدرسي | وصف | مثال |
|---|---|---|
| .bg-primary | وعلى غرار خلية الجدول مع الطبقة "bg-primary" | جربها |
| .bg-success | وعلى غرار خلية الجدول مع الطبقة "bg-success" | جربها |
| .bg-info | وعلى غرار خلية الجدول مع الطبقة "bg-info" | جربها |
| .bg-warning | وعلى غرار خلية الجدول مع الطبقة "bg-warning" | جربها |
| .bg-danger | وعلى غرار خلية الجدول مع الطبقة "bg-danger" | جربها |
آخر
| صف مدرسي | وصف | مثال |
|---|---|---|
| .pull-left | يطفو عنصر إلى اليسار | جربها |
| .pull-right | يطفو عنصر إلى اليمين | جربها |
| .center-block | يحدد عنصر ل display:block مع margin-right:auto و margin-left:auto | جربها |
| .clearfix | مسح يطفو | جربها |
| .show | قوات عنصر ليتم عرضها | جربها |
| .hidden | قوات عنصر لتكون مخفية | جربها |
| .sr-only | يخفي عنصر لجميع الأجهزة باستثناء قارئات الشاشة | جربها |
| .sr-only-focusable | تتحد مع .sr فقط لإظهار العنصر مرة أخرى عندما تركز عليه (على سبيل المثال من قبل مستخدم لوحة المفاتيح فقط) | جربها |
| .text-hide | يساعد استبدال محتوى النص عنصر مع صورة خلفية | جربها |
| .close | يشير رمز وثيق | جربها |
| .caret | يشير ظائف المنسدلة (سوف ينعكس تلقائيا في القوائم dropup) | جربها |
المرافق تستجيب
وتستخدم هذه الفئات لإظهار و / أو إخفاء المحتوى من قبل الجهاز عن طريق استفسارات وسائل الإعلام.
استخدام واحد أو مجموعة من الطبقات المتاحة لتبديل المحتوى عبر viewport نقاط:
| فصول | أجهزة إضافية الهواتف الصغيرة (<768px) | أجهزة لوحية صغيرة (≥768px) | الأجهزة المكتبية المتوسطة (≥992px) | أجهزة الكمبيوتر المكتبية أجهزة كبيرة (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
اعتبارا من v3.2.0 ، و .visible-*-* الطبقات لتأتي في ثلاثة أشكال، واحد لكل CSS display قيمة العقار:
| مجموعة من الطبقات | عرض CSS |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
مثلا: (صغيرة sm ) الشاشات، المتاحة .visible-*-* فصول هي: .visible-sm-block ، .visible-sm-inline ، و .visible-sm-inline-block .
الطبقات .visible-xs ، .visible-sm ، .visible-md ، و .visible-lg ومستنكر حتى v3.2.0 لل.
مثال
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>نتيجة:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
انها محاولة لنفسك »