rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

v5: Redo blockquote attributions (#30814)

Browse Source 
* 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 2020-06-12 14:26:37 -07:00 committed by GitHub
parent 594e5fd071
commit 286f16b92c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_type.scss
View File

@ -84,14 +84,19 @@
// Blockquotes // Blockquotes
.blockquote { .blockquote {
margin-bottom: $spacer; margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-font-size); @include font-size($blockquote-font-size);
> :last-child {
margin-bottom: 0;
}
} }
.blockquote-footer { .blockquote-footer {
display: block; margin-top: -$blockquote-margin-y;
@include font-size($blockquote-small-font-size); margin-bottom: $blockquote-margin-y;
color: $blockquote-small-color; @include font-size($blockquote-footer-font-size);
color: $blockquote-footer-color;
&::before { &::before {
content: "\2014\00A0"; // em dash, nbsp content: "\2014\00A0"; // em dash, nbsp

5
scss/_variables.scss
View File

@ -447,9 +447,10 @@ $text-muted: $gray-600 !default;
$initialism-font-size: $small-font-size !default; $initialism-font-size: $small-font-size !default;
$blockquote-small-color: $gray-600 !default; $blockquote-margin-y: $spacer !default;
$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: $font-size-base * 1.25 !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-margin-y: $spacer !default;
$hr-color: inherit !default; $hr-color: inherit !default;

2
site/content/docs/5.0/content/reboot.md
View File

@ -397,8 +397,8 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
<div class="bd-example"> <div class="bd-example">
<blockquote class="blockquote"> <blockquote class="blockquote">
<p>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>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
<p>Someone famous in <cite title="Source Title">Source Title</cite></p>
</div> </div>
### Inline elements ### Inline elements

40
site/content/docs/5.0/content/typography.md
View File

@ -188,19 +188,23 @@ For quoting blocks of content from another source within your document. Wrap `<b
{{< example >}} {{< example >}}
<blockquote class="blockquote"> <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> </blockquote>
{{< /example >}} {{< /example >}}
### Naming a source ### 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 >}} {{< example >}}
<blockquote class="blockquote"> <figure>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="blockquote">
<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> </blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
{{< /example >}} {{< /example >}}
### Alignment ### 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. Use text utilities as needed to change the alignment of your blockquote.
{{< example >}} {{< example >}}
<blockquote class="blockquote text-center"> <figure class="text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="blockquote">
<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> </blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
{{< /example >}} {{< /example >}}
{{< example >}} {{< example >}}
<blockquote class="blockquote text-right"> <figure class="text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <blockquote class="blockquote">
<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> </blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
{{< /example >}} {{< /example >}}
## Lists ## Lists

38
site/content/docs/5.0/examples/masonry/index.html
View File

@ -33,14 +33,14 @@ extra_js:
</div> </div>
<div class="col-sm-6 col-lg-4 mb-4"> <div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-3"> <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> <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> </blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div> </div>
</div> </div>
<div class="col-sm-6 col-lg-4 mb-4"> <div class="col-sm-6 col-lg-4 mb-4">
@ -55,21 +55,21 @@ extra_js:
</div> </div>
<div class="col-sm-6 col-lg-4 mb-4"> <div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white text-center p-3"> <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> <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> </blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div> </div>
</div> </div>
<div class="col-sm-6 col-lg-4 mb-4"> <div class="col-sm-6 col-lg-4 mb-4">
<div class="card text-center"> <div class="card text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <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> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
@ -81,14 +81,14 @@ extra_js:
</div> </div>
<div class="col-sm-6 col-lg-4 mb-4"> <div class="col-sm-6 col-lg-4 mb-4">
<div class="card p-3 text-right"> <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> <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> </blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div> </div>
</div> </div>
<div class="col-sm-6 col-lg-4 mb-4"> <div class="col-sm-6 col-lg-4 mb-4">