mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Remove custom example plugin. (#25784)
This commit is contained in:
m5o
+81
-54
@@ -16,7 +16,7 @@ Cards are built with as little markup and styles as possible, but still manage t
|
||||
|
||||
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
@@ -25,7 +25,8 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Content types
|
||||
|
||||
@@ -35,13 +36,14 @@ Cards support a wide variety of content, including images, text, list groups, li
|
||||
|
||||
The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Titles, text, and links
|
||||
|
||||
@@ -49,7 +51,7 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
|
||||
|
||||
Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@@ -59,26 +61,28 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Images
|
||||
|
||||
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### List groups
|
||||
|
||||
Create lists of content in a card with a flush list group.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
@@ -86,9 +90,10 @@ Create lists of content in a card with a flush list group.
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
@@ -99,13 +104,14 @@ Create lists of content in a card with a flush list group.
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Kitchen sink
|
||||
|
||||
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
@@ -122,13 +128,14 @@ Mix and match multiple content types to create the card you need, or throw every
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Header and footer
|
||||
|
||||
Add an optional header and/or footer within a card.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
@@ -139,11 +146,12 @@ Add an optional header and/or footer within a card.
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card">
|
||||
<h5 class="card-header">Featured</h5>
|
||||
<div class="card-body">
|
||||
@@ -152,9 +160,10 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Quote
|
||||
@@ -166,9 +175,10 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
@@ -182,7 +192,8 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
||||
2 days ago
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Sizing
|
||||
|
||||
@@ -192,7 +203,7 @@ Cards assume no specific `width` to start, so they'll be 100% wide unless otherw
|
||||
|
||||
Using the grid, wrap cards in columns and rows as needed.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="card">
|
||||
@@ -213,13 +224,14 @@ Using the grid, wrap cards in columns and rows as needed.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Using utilities
|
||||
|
||||
Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/) to quickly set a card's width.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card w-75">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
@@ -235,13 +247,14 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Using custom CSS
|
||||
|
||||
Use custom CSS in your stylesheets or as inline styles to set a width.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
@@ -249,13 +262,14 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
@@ -279,13 +293,14 @@ You can quickly change the text alignment of any card—in its entirety or speci
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Navigation
|
||||
|
||||
Add some navigation to a card's header (or block) with Bootstrap's [nav components]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/).
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
@@ -306,9 +321,10 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills">
|
||||
@@ -329,7 +345,8 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Images
|
||||
|
||||
@@ -339,7 +356,7 @@ Cards include a few options for working with images. Choose from appending "imag
|
||||
|
||||
Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
@@ -356,13 +373,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
|
||||
</div>
|
||||
<img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Image overlays
|
||||
|
||||
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card bg-dark text-white">
|
||||
<img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
|
||||
<div class="card-img-overlay">
|
||||
@@ -371,7 +389,8 @@ Turn an image into a card background and overlay your card's text. Depending on
|
||||
<p class="card-text">Last updated 3 mins ago</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Card styles
|
||||
|
||||
@@ -381,7 +400,7 @@ Cards include various options for customizing their backgrounds, borders, and co
|
||||
|
||||
Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to change the appearance of a card.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
{% for color in site.data.theme-colors %}
|
||||
<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
@@ -390,7 +409,8 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>{% endfor %}
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
{% include callout-warning-color-assistive-technologies.md %}
|
||||
|
||||
@@ -398,7 +418,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version
|
||||
|
||||
Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
{% for color in site.data.theme-colors %}
|
||||
<div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header">Header</div>
|
||||
@@ -407,13 +427,14 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>{% endfor %}
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Mixins utilities
|
||||
|
||||
You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card border-success mb-3" style="max-width: 18rem;">
|
||||
<div class="card-header bg-transparent border-success">Header</div>
|
||||
<div class="card-body text-success">
|
||||
@@ -422,7 +443,8 @@ You can also change the borders on the card header and footer as needed, and eve
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-success">Footer</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
## Card layout
|
||||
|
||||
@@ -432,7 +454,7 @@ In addition to styling the content within cards, Bootstrap includes a few option
|
||||
|
||||
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
@@ -459,11 +481,12 @@ Use card groups to render cards as a single, attached element with equal width a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
When using card groups with footers, their content will automatically line up.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
@@ -496,13 +519,14 @@ When using card groups with footers, their content will automatically line up.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Card decks
|
||||
|
||||
Need a set of equal width and height cards that aren't attached to one another? Use card decks.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
|
||||
@@ -529,11 +553,12 @@ Need a set of equal width and height cards that aren't attached to one another?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Just like with card groups, card footers in decks will automatically line up.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
|
||||
@@ -566,7 +591,8 @@ Just like with card groups, card footers in decks will automatically line up.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
### Card columns
|
||||
|
||||
@@ -574,7 +600,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
|
||||
|
||||
**Heads up!** Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn't a bulletproof solution yet.
|
||||
|
||||
{% example html %}
|
||||
{% capture example %}
|
||||
<div class="card-columns">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
|
||||
@@ -639,7 +665,8 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
|
||||
Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user