Metin
Aşağıdaki sınıfları ile metin renkleri ile anlam ekleyin. Üzerine giderek kararacak Bağlantılar:
| Sınıf | Açıklama | Örnek |
|---|---|---|
| .text-muted | Sınıfla tarz Metin "text-muted" | Dene |
| .text-primary | Metin sınıfı ile tarz "text-primary" | Dene |
| .text-success | Metin sınıfı ile tarz "text-success" | Dene |
| .text-info | Metin sınıfı ile tarz "text-info" | Dene |
| .text-warning | Metin sınıfı ile tarz "text-warning" | Dene |
| .text-danger | Metin sınıfı ile tarz "text-danger" | Dene |
Arka fon
Aşağıdaki sınıfları ile background-renklerle anlam ekleyin. Linkler sadece metin sınıfları gibi vurgulu üzerinde kararacak:
| Sınıf | Açıklama | Örnek |
|---|---|---|
| .bg-primary | Tablo hücre sınıfı ile biçim verilir "bg-primary" | Dene |
| .bg-success | Tablo hücre sınıfı ile biçim verilir "bg-success" | Dene |
| .bg-info | Tablo hücre sınıfı ile biçim verilir "bg-info" | Dene |
| .bg-warning | Tablo hücre sınıfı ile biçim verilir "bg-warning" | Dene |
| .bg-danger | Tablo hücre sınıfı ile biçim verilir "bg-danger" | Dene |
Diğer
| Sınıf | Açıklama | Örnek |
|---|---|---|
| .pull-left | Soldaki bir öğe Şamandıralar | Dene |
| .pull-right | sağa bir öğe Şamandıralar | Dene |
| .center-block | Bir üzere eleman ayarlar display:block ile margin-right:auto ve margin-left:auto | Dene |
| .clearfix | yüzen temizler | Dene |
| .show | gösterilecek olan bir eleman zorlar | Dene |
| .hidden | gizlenmesine bir eleman zorlar | Dene |
| .sr-only | Ekran okuyucuları hariç tüm cihazlara unsurunu gizler | Dene |
| .sr-only-focusable | o odaklanmıştır tekrar öğeyi görüntüleme .sr salt ile birleştirin (bir klavye-yalnızca kullanıcı ile) | Dene |
| .text-hide | bir arka plan resmiyle Bir elemanın metin içeriğini değiştirmek yardımcı olur | Dene |
| .close | yakın bir simge gösterir | Dene |
| .caret | Açılan işlevselliği gösterir (will reverse automatically in dropup menus) | Dene |
duyarlı Araçları
Bu sınıflar göstermek ve / veya ortam sorgu ile cihaz tarafından içeriği gizlemek için kullanılır.
Bir veya üzerinde içerik geçiş için uygun sınıflar bir arada kullanın viewport kesme noktaları:
| Sınıflar | Ekstra küçük cihazlar Telefonlar (<768px) | Küçük cihazlar Tabletler (≥768px) | Orta cihazlar Masaüstü (≥992px) | Büyük cihazlar Masaüstü (≥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 |
Itibariyle v3.2.0 , .visible-*-* sınıfları üç varyasyon, her CSS için bir tane gelir için display özelliği değeri:
| sınıfların Grubu | CSS ekran |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Küçük örneğin ( sm ) ekranlar, mevcut .visible-*-* sınıfları şunlardır: .visible-sm-block , .visible-sm-inline ve .visible-sm-inline-block .
Sınıflar .visible-xs , .visible-sm , .visible-md ve .visible-lg v3.2.0 olarak önerilmemektedir.
Örnek
<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>Sonuç:
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.
Kendin dene "