mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Replace holder.js with SVGs.

Browse Source
This commit is contained in:
Martijn Cuppens
2018-11-08 19:33:02 +02:00
committed by XhmikosR
parent b04f97f60b
commit 072b5ab7fd
12 changed files with 130 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/docs/4.1/components/card.md
+21 -21
View File
@@ -18,7 +18,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
{% capture example %}
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -70,7 +70,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
{% 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">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="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>
@@ -113,7 +113,7 @@ Mix and match multiple content types to create the card you need, or throw every
{% 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">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -358,7 +358,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
{% capture example %}
<div class="card mb-3">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -371,7 +371,7 @@ Similar to headers and footers, cards can 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/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" title="Card image cap" %}
</div>
{% endcapture %}
{% include example.html content=example %}
@@ -382,7 +382,7 @@ Turn an image into a card background and overlay your card's text. Depending on
{% capture example %}
<div class="card bg-dark text-white">
<img class="card-img" data-src="holder.js/100px270?text=Card image" alt="Card image">
{% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" title="Card image" %}
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<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>
@@ -462,7 +462,7 @@ Use card groups to render cards as a single, attached element with equal width a
{% capture example %}
<div class="card-group">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -470,7 +470,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/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -478,7 +478,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/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -494,7 +494,7 @@ When using card groups with footers, their content will automatically line up.
{% capture example %}
<div class="card-group">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -504,7 +504,7 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -514,7 +514,7 @@ When using card groups with footers, their content will automatically line up.
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -534,7 +534,7 @@ Need a set of equal width and height cards that aren't attached to one another?
{% capture example %}
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -542,7 +542,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/100px200/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -550,7 +550,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/100px200/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -566,7 +566,7 @@ Just like with card groups, card footers in decks will automatically line up.
{% capture example %}
<div class="card-deck">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -576,7 +576,7 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -586,7 +586,7 @@ Just like with card groups, card footers in decks will automatically line up.
</div>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
@@ -608,7 +608,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
{% capture example %}
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<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>
@@ -625,7 +625,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</blockquote>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -650,7 +650,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
</div>
</div>
<div class="card">
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
{% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" title="Card image" %}
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">