Bootstrap CSS Helper Classes Verwysing
Teks
Voeg betekenis by deur tekskleure met die klasse hieronder. Skakels sal donkerder word as jy beweeg:
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | |
| .text-primary | Text styled with class "text-primary" | |
| .text-success | Text styled with class "text-success" | |
| .text-info | Text styled with class "text-info" | |
| .text-warning | Text styled with class "text-warning" | |
| .text-danger | Text styled with class "text-danger" |
Agtergrond
Voeg betekenis toe deur agtergrondkleure met die klasse hieronder. Skakels sal donkerder word wanneer jy beweeg, net soos teksklasse:
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | |
| .bg-success | Table cell is styled with class "bg-success" | |
| .bg-info | Table cell is styled with class "bg-info" | |
| .bg-warning | Table cell is styled with class "bg-warning" | |
| .bg-danger | Table cell is styled with class "bg-danger" |
Ander
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | |
| .pull-right | Floats an element to the right | |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | |
| .clearfix | Clears floats | |
| .show | Forces an element to be shown (display:block) | |
| .hidden | Forces an element to be hidden (display:none) | |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | |
| .sr-only | Hides an element to all devices except screen readers | |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | |
| .text-hide | Helps replace an element's text content with a background image | |
| .close | Indicates a close icon | |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) |
Responsiewe nutsprogramme
Hierdie klasse word gebruik om inhoud per toestel via medianavrae te wys en/of te versteek.
Gebruik een of 'n kombinasie van die beskikbare klasse om inhoud oor kykpoort-breekpunte te wissel:
| Klasse | Ekstra klein toestelle Fone (<768px) | Klein toestelle Tablette (≥768px) | Medium toestelle Werkskerms (≥992px) | Groot toestelle rekenaars (≥1200px) |
|---|---|---|---|---|
| .sigbare-xs-* | Sigbaar | Versteek | Versteek | Versteek |
| .sigbare-sm-* | Versteek | Sigbaar | Versteek | Versteek |
| .sigbare-md-* | Versteek | Versteek | Sigbaar | Versteek |
| .sigbare-lg-* | Versteek | Versteek | Versteek | Sigbaar |
| .verborge-xs | Versteek | Sigbaar | Sigbaar | Sigbaar |
| .versteekte-sm | Sigbaar | Versteek | Sigbaar | Sigbaar |
| .verborge-md | Sigbaar | Sigbaar | Versteek | Sigbaar |
| .verborge-lg | Sigbaar | Sigbaar | Sigbaar | Versteek |
Versteek
Versteek elemente na gelang van skermgrootte:
Voorbeeld
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
Resultaat:
Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
Vanaf v3.2.0 kom die .visible-*-*klasse vir in drie variasies, een vir elke CSS -eiendomwaarde display
:
| Groep klasse | CSS vertoon |
|---|---|
| sigbare-*-blok | vertoon: blok; |
| .sigbaar-*-inlyn | vertoon: inlyn; |
| .sigbare-*-inlyn-blok | vertoon: inlyn-blok; |
Bv. vir klein ( sm) skerms is die beskikbare .visible-*-*klasse: .visible-sm-block, .visible-sm-inline, en .visible-sm-inline-block.
Die klasse .visible-xs, .visible-sm, .visible-mden .visible-lgword vanaf v3.2.0 opgeskort .
Voorbeeld
<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>
Resultaat:
Example
Resize this page to see how the text below changes: