mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
v5: Redo blockquote attributions (#30814)
* v5: Redo blockquote attributions - Renames -small-* variables to -footer-* - Updates blockquote demos with attribution to place it outside the blockquote with a figure wrapper * Updated class name * docs(examples): refactor blockquotes in masonry example Co-authored-by: Gaël Poupard <gael.poupard@orange.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto
GitHub
parent
594e5fd071
commit
286f16b92c
@ -84,14 +84,19 @@
|
||||
|
||||
// Blockquotes
|
||||
.blockquote {
|
||||
margin-bottom: $spacer;
|
||||
margin-bottom: $blockquote-margin-y;
|
||||
@include font-size($blockquote-font-size);
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
display: block;
|
||||
@include font-size($blockquote-small-font-size);
|
||||
color: $blockquote-small-color;
|
||||
margin-top: -$blockquote-margin-y;
|
||||
margin-bottom: $blockquote-margin-y;
|
||||
@include font-size($blockquote-footer-font-size);
|
||||
color: $blockquote-footer-color;
|
||||
|
||||
&::before {
|
||||
content: "\2014\00A0"; // em dash, nbsp
|
||||
|
||||
@ -447,9 +447,10 @@ $text-muted: $gray-600 !default;
|
||||
|
||||
$initialism-font-size: $small-font-size !default;
|
||||
|
||||
$blockquote-small-color: $gray-600 !default;
|
||||
$blockquote-small-font-size: $small-font-size !default;
|
||||
$blockquote-margin-y: $spacer !default;
|
||||
$blockquote-font-size: $font-size-base * 1.25 !default;
|
||||
$blockquote-footer-color: $gray-600 !default;
|
||||
$blockquote-footer-font-size: $small-font-size !default;
|
||||
|
||||
$hr-margin-y: $spacer !default;
|
||||
$hr-color: inherit !default;
|
||||
|
||||
@ -397,8 +397,8 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
|
||||
<div class="bd-example">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
<p>Someone famous in <cite title="Source Title">Source Title</cite></p>
|
||||
</div>
|
||||
|
||||
### Inline elements
|
||||
|
||||
@ -188,19 +188,23 @@ For quoting blocks of content from another source within your document. Wrap `<b
|
||||
|
||||
{{< example >}}
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
{{< /example >}}
|
||||
|
||||
### Naming a source
|
||||
|
||||
Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
|
||||
The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well.
|
||||
|
||||
{{< example >}}
|
||||
<figure>
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
{{< /example >}}
|
||||
|
||||
### Alignment
|
||||
@ -208,17 +212,25 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
|
||||
Use text utilities as needed to change the alignment of your blockquote.
|
||||
|
||||
{{< example >}}
|
||||
<blockquote class="blockquote text-center">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
<figure class="text-center">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<blockquote class="blockquote text-right">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
<figure class="text-right">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
{{< /example >}}
|
||||
|
||||
## Lists
|
||||
|
||||
@ -33,14 +33,14 @@ extra_js:
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3">
|
||||
<blockquote class="blockquote mb-0 card-body">
|
||||
<figure class="p-3 mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
@ -55,21 +55,21 @@ extra_js:
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card bg-primary text-white text-center p-3">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<figure class="mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer class="blockquote-footer text-white">
|
||||
<small>
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-white">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
|
||||
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -81,14 +81,14 @@ extra_js:
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3 text-right">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<figure class="mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">
|
||||
<small class="text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user