diff options
Diffstat (limited to 'docs/components/card.md')
| -rw-r--r-- | docs/components/card.md | 42 |
1 files changed, 23 insertions, 19 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index d6413672d..516367e65 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -19,7 +19,7 @@ Cards require a small amount of markup and classes to provide you with as much c {% example html %} <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <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> @@ -34,7 +34,7 @@ Cards support a wide variety of content, including images, text, list groups, li {% example html %} <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <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> @@ -53,7 +53,7 @@ Cards support a wide variety of content, including images, text, list groups, li {% example html %} <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <div class="card-block"> <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> @@ -75,7 +75,7 @@ Cards support a wide variety of content, including images, text, list groups, li <h4 class="card-title">Card title</h4> <h6 class="card-subtitle text-muted">Support card subtitle</h6> </div> - <img data-src="holder.js/100%x180/?text=Image" alt="Card image"> + <img data-src="holder.js/100px180/?text=Image" alt="Card image"> <div class="card-block"> <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> <a href="#" class="card-link">Card link</a> @@ -86,7 +86,7 @@ Cards support a wide variety of content, including images, text, list groups, li ## Sizing -Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins. +Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins. Using the grid: @@ -112,7 +112,7 @@ Using the grid: Using custom widths: {% example html %} -<div class="card card-block" style="width: 20rem;"> +<div class="card card-block" style="width: 18rem;"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> @@ -196,7 +196,7 @@ Similar to headers and footers, cards include top and bottom image caps. {% example html %} <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> @@ -209,7 +209,7 @@ Similar to headers and footers, cards include top and bottom image caps. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> - <img class="card-img-bottom" data-src="holder.js/100%x180/" alt="Card image cap"> + <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap"> </div> {% endexample %} @@ -219,7 +219,7 @@ Turn an image into a card background and overlay your card's text. Depending on {% example html %} <div class="card card-inverse"> - <img class="card-img" data-src="holder.js/100%x270/#55595c:#373a3c/text:Card image" alt="Card image"> + <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> @@ -295,10 +295,12 @@ Cards include their own variant classes for quickly changing the `background-col Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect. +Only applies to small devices and above. + {% example html %} <div class="card-group"> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> @@ -306,7 +308,7 @@ Use card groups to render cards as a single, attached element with equal width a </div> </div> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> @@ -314,7 +316,7 @@ Use card groups to render cards as a single, attached element with equal width a </div> </div> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">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.</p> @@ -328,13 +330,15 @@ Use card groups to render cards as a single, attached element with equal width a Need a set of equal width and height cards that aren't attached to one another? Use card decks. By default, card decks require two wrapping elements: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`. +Only applies to small devices and above. + **ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`. {% example html %} <div class="card-deck-wrapper"> <div class="card-deck"> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> @@ -342,7 +346,7 @@ Need a set of equal width and height cards that aren't attached to one another? </div> </div> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> @@ -350,7 +354,7 @@ Need a set of equal width and height cards that aren't attached to one another? </div> </div> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">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.</p> @@ -363,14 +367,14 @@ Need a set of equal width and height cards that aren't attached to one another? ## Columns -Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. +Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns with just CSS by wrapping them in `.card-columns`. Only applies to small devices and above. **Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts). {% example html %} <div class="card-columns"> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> @@ -387,7 +391,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns </blockquote> </div> <div class="card"> - <img class="card-img-top" data-src="holder.js/100%x160/" alt="Card image cap"> + <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> @@ -410,7 +414,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <div class="card"> - <img class="card-img" data-src="holder.js/100%x260/" alt="Card image"> + <img class="card-img" data-src="holder.js/100px260/" alt="Card image"> </div> <div class="card card-block text-right"> <blockquote class="card-blockquote"> |