rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #19476 from delftswa2016/v4-card-docs

Browse Source 
Added explicit commentary to .card-* classes
This commit is contained in:
Mark Otto 2016-05-08 14:20:12 -07:00
commit 80341bf709
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/card.md
View File

@ -51,6 +51,8 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
Lists can be added to a card by adding a list group.
{% example html %}
<div class="card">
<ul class="list-group list-group-flush">
@ -61,6 +63,8 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
`.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 %}
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
@ -70,6 +74,8 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `<a>` tag.
{% example html %}
<div class="card card-block">
<h4 class="card-title">Card title</h4>
@ -79,6 +85,10 @@ Cards support a wide variety of content, including images, text, list groups, li
</div>
{% endexample %}
Subtitles are used by adding a `.card-subtitle` to an `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely.
The multiple content types can be easily combined to create the card you need. See below for an example.
{% example html %}
<div class="card">
<div class="card-block">
@ -170,6 +180,8 @@ Add an optional header and/or footer within a card.
</div>
{% endexample %}
Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% example html %}
<div class="card">
<h3 class="card-header">Featured</h3>