Bootstrap-Cards bieten einen flexiblen und erweiterbaren Content-Container mit mehreren Varianten und Optionen. Es enthält Optionen für Kopf- und Fußzeilen, eine Vielzahl von Inhalten, kontextbezogene Hintergrundfarben und leistungsstarke Anzeigeoptionen.
Backend
Flexform Settings
eine Auswahl
| Card Hover Effect | Derzeit ist nur ein Hover-Effekt verfügbar. (zoom and border) |
| Card Title on top | nur in Verbindung mit „image overlay“ |
| Enable button with header_link | ... Stretched link, Predefined button styles , Button text, Button Outline, Block level button |
| Custom Border | Rand mit "Predefined border styles" |
| Horizontal | Karten können horizontal in einer mobilfreundlichen und responsiven Weise erstellt werden. |
| Enable Profile Card | ... Social Media Links, Breite für Profil Bild, Schatten u.a. |
Nicht für Cards im Card Wrapper
| Card max-width == image width | Hilfreich für einzelne Cards - ohne card wrapper |
| Image overlay | Der "card body" überlagert das Bild. |
| Image overlay - mobile view only | Der "card body" überlagert das Bild nur auf Mobilgeräten. |
| Flip Card with Text or Image | ... Frontside with image - Backside with text (if "Text Top" available) or image (second image) |
Einige Beispiele
Default Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Hover Effect
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Image overlay
Profile Card
Button & "Stretched link"
Some quick example text to build on the card title and make up the bulk of the card's content.
With supporting text below as a natural lead-in to additional content.
Horizontal
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Custom Border
Some quick example text to build on the card title and make up the bulk of the card's content.
Card mit "ListGroup"
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- List Item 1
- List Item 2
- List Item 3
With supporting text below as a natural lead-in to additional content.
Background & Border
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Flip Card
Text Top
Card-Layouts
Die drei klassischen Bootstrap Card-Layouts
| Layout-Klasse | Verhalten | Besonderheit |
|---|---|---|
.card-group | Cards werden direkt aneinandergefügt. | Alle Cards haben die gleiche Höhe und Footer schließen bündig ab. |
.card-deck | Cards stehen mit Abstand (Gutter) nebeneinander. | Ebenfalls gleiche Höhe für alle Cards in einer Reihe (optional). |
.card-columns | Ein Masonry-ähnliches Layout. | Cards werden von oben nach unten in Spalten sortiert. |
Card Group
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Grid Cards
Card tite
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Masonry Wrapper
In Version 4 wurde eine reine CSS-Technik verwendet, um das Verhalten von Masonry-ähnlichen Spalten nachzuahmen, aber diese Technik hatte viele unangenehme Nebenwirkungen.
Wenn du diese Art von Layout in Version 5 verwenden möchten, kannst du einfach das Masonry-Plugin verwenden.
Custom Card-Layouts
Slider (Swiper)
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card Flipper
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
This is a longer card with supporting text below as a natural lead-in to additional content.