From 1ef862542186be31090bb3a67fc186426263e7fe Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 19 Jul 2023 10:26:10 +0200 Subject: [PATCH 01/10] Introduce `skip` in examples + change the CSS + introduce 4 examples --- site/assets/js/code-examples.js | 13 +++-- site/assets/scss/_component-examples.scss | 18 ++++-- site/content/docs/5.3/components/buttons.md | 4 +- site/content/docs/5.3/components/dropdowns.md | 58 +++++++++++++++++++ site/content/docs/5.3/components/navs-tabs.md | 31 ++++++++++ site/content/docs/5.3/docsref.md | 16 +++-- site/layouts/shortcodes/example.html | 33 ++++++----- site/layouts/shortcodes/js-docs.html | 2 +- site/layouts/shortcodes/scss-docs.html | 2 +- 9 files changed, 144 insertions(+), 33 deletions(-) diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 3b03b17c49ca..08a9203eba19 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -20,10 +20,13 @@ const btnHtml = [ '
', - '
', - ' ', + '
', + ' html', + '
', + ' ', + '
', '
', '
' ].join('') @@ -33,7 +36,7 @@ .forEach(element => { // Ignore examples made by shortcode if (!element.closest('.bd-example-snippet')) { - element.insertAdjacentHTML('beforebegin', btnHtml) + element.insertAdjacentHTML('beforebegin', btnHtml.replace('html', element.querySelector('pre > code').getAttribute('data-lang'))) element.previousElementSibling.append(element) } }) diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 1d8caed666cc..636be4fa0672 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -12,6 +12,19 @@ margin-left: 0; border-width: 1px; @include border-radius(var(--bs-border-radius)); + + > :first-child { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } + + > :last-child { + @include border-bottom-radius(calc(var(--bs-border-radius) - 1px)); + } + + // stylelint-disable-next-line selector-max-universal + > * + * { + border-top: 1px solid var(--bs-border-color); + } } } @@ -353,7 +366,6 @@ @include media-breakpoint-up(md) { padding: .75rem 1.25rem; - @include border-radius(calc(var(--bs-border-radius) - 1px)); } @include media-breakpoint-up(lg) { @@ -381,10 +393,6 @@ .highlight-toolbar { background-color: var(--bd-pre-bg); - - + .highlight { - @include border-top-radius(0); - } } .bd-file-ref { diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 83a61382a310..967bd0f84e40 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -243,9 +243,9 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables. -
+{{< example show_markup=false >}} -
+{{< /example >}} {{< scss-docs name="btn-css-vars-example" file="site/assets/scss/_buttons.scss" >}} diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 6e3811f1f132..dd39054cdd19 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -246,6 +246,35 @@ We use this extra class to reduce the horizontal `padding` on either side of the Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. +{{< example skip="ul" >}} + +
+ + +
+
+ + + +
+{{< /example >}} +
``` +{{< example skip="ul" >}} + +
+ + +
+
+ + + +
+{{< /example >}} +
+ + + + + +
+ + + + +
+{{< /example >}} +
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html index 8eed4a0eb18e..0b5e3574d262 100644 --- a/site/layouts/shortcodes/js-docs.html +++ b/site/layouts/shortcodes/js-docs.html @@ -33,7 +33,7 @@ {{- end -}}
-
+
{{- $file -}} diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html index 6e7c129f4c29..6fb1571a71a3 100644 --- a/site/layouts/shortcodes/scss-docs.html +++ b/site/layouts/shortcodes/scss-docs.html @@ -46,7 +46,7 @@ {{- end -}}
-
+
{{- $file -}} From f270e8ec2ad29f326d6138dbc4022203549b5646 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 19 Jul 2023 10:44:56 +0200 Subject: [PATCH 02/10] Add modal example --- site/content/docs/5.3/components/modal.md | 26 +++++++++++++++++++++++ site/layouts/shortcodes/example.html | 3 +-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md index ba2a51a6e320..5840c0860e85 100644 --- a/site/content/docs/5.3/components/modal.md +++ b/site/content/docs/5.3/components/modal.md @@ -86,6 +86,32 @@ In the above static example, we use `
`, to avoid issues with the heading hie Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. +{{< example >}} + + + + + +{{< /example >}} + - -```html - - - - - -``` +
+ +{{< /example >}} ## Containers diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md index 3117b595462f..eb66d6f078fd 100644 --- a/site/content/docs/5.3/components/navs-tabs.md +++ b/site/content/docs/5.3/components/navs-tabs.md @@ -390,90 +390,11 @@ Use the tab JavaScript plugin—include it individually or through the compiled
{{< /example >}} -
- -
-
-

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

-
-
-

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

-
-
-

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

-
-
-

This is some placeholder content the Disabled tab's associated content.

-
-
-
- -```html - -
-
...
-
...
-
...
-
...
-
-``` - To help fit your needs, this works with `
    `-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using `
-``` +{{< /example >}} ### List group Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change. -
-
-
- -
-
-
-

Item 1

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Item 2

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Item 3

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Item 4

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-
-
-
-
- -```html +{{< example skip=p >}}
@@ -256,51 +141,23 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group

Item 1

-

...

+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

-

...

+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3

-

...

+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 4

-

...

+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
-``` +{{< /example >}} ### Simple anchors Scrollspy is not limited to nav components and list groups, so it will work on any `` anchor elements in the current document. Scroll the area and watch the `.active` class change. -
-
-
-
- Item 1 - Item 2 - Item 3 - Item 4 - Item 5 -
-
-
-
-

Item 1

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Item 2

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Item 3

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Item 4

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Item 5

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-
-
-
-
- -```html +{{< example skip=p >}}
@@ -314,19 +171,19 @@ Scrollspy is not limited to nav components and list groups, so it will work on a

Item 1

-

...

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

-

...

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3

-

...

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 4

-

...

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 5

-

...

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-``` +{{< /example >}} ## Non-visible elements diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md index a7d1cb7130e2..e837112243d6 100644 --- a/site/content/docs/5.3/components/toasts.md +++ b/site/content/docs/5.3/components/toasts.md @@ -49,31 +49,13 @@ Previously, our scripts dynamically added the `.hide` class to completely hide a Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default. -
- -
- -
- -
- -```html +{{< example stackblitz_add_js=true >}}
-``` +{{}} We use the following JavaScript to trigger our live toast demo: diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index 91adacc7f121..88ac8cf795d0 100644 --- a/site/content/docs/5.3/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -75,49 +75,26 @@ You can customize the appearance of tooltips using [CSS variables](#variables). Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. -
-
- - - - - -
-
- -```html - - - - -``` - -And with custom HTML added: - -```html - -``` +{{< example class=tooltip-demo stackblitz_add_js=true >}} + + + + + + + +{{< /example >}} With an SVG: -
- - - - - - -
+{{< example class=tooltip-demo stackblitz_add_js=true >}} + + + + + + +{{< /example >}} ## CSS diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md index 066e3a9608d7..db845a48734f 100644 --- a/site/content/docs/5.3/docsref.md +++ b/site/content/docs/5.3/docsref.md @@ -44,6 +44,10 @@ sitemap_exclude: true
This is a test.
{{< /example >}} +{{< example class=bg-warning >}} +
This is a test.
+{{< /example >}} + {{< example show_preview=false >}}
This is a markup only test.
{{< /example >}} From 239c59b2a6a81008c0276bf61db9ffc4630a1f4a Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 24 Jul 2023 14:44:41 +0200 Subject: [PATCH 06/10] Add miscellaneous examples over the doc + add table examples --- site/content/docs/5.3/content/reboot.md | 94 +-- site/content/docs/5.3/content/tables.md | 630 +++++++----------- .../5.3/examples/cheatsheet-rtl/index.html | 66 +- .../docs/5.3/examples/cheatsheet/index.html | 62 +- site/content/docs/5.3/utilities/flex.md | 560 +++++++--------- site/content/docs/5.3/utilities/opacity.md | 22 +- site/content/docs/5.3/utilities/overflow.md | 113 ++-- site/content/docs/5.3/utilities/spacing.md | 12 +- site/layouts/shortcodes/table.html | 26 +- 9 files changed, 669 insertions(+), 916 deletions(-) diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md index ef2bd13bcfbd..892a0507895d 100644 --- a/site/content/docs/5.3/content/reboot.md +++ b/site/content/docs/5.3/content/reboot.md @@ -143,7 +143,7 @@ The `
` element has been simplified. Similar to browser defaults, `
`s are All lists—`
    `, `
      `, and `
      `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `
        ` and `
          ` elements. -
          +{{< example show_markup=false >}} {{< markdown >}} * All lists have their top margin removed * And their bottom margin normalized @@ -157,21 +157,21 @@ All lists—`
            `, `
              `, and `
              `—have their `margin-top` removed and a ` 3. It has the same overall look 4. As the previous unordered list {{< /markdown >}} -
          +{{< /example >}} For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `
          `s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
          `s are **bolded**. -
          -
          -
          Description lists
          -
          A description list is perfect for defining terms.
          -
          Term
          -
          Definition for the term.
          -
          A second definition for the same term.
          -
          Another term
          -
          Definition for this other term.
          -
          -
          +{{< example show_markup=false >}} +
          +
          Description lists
          +
          A description list is perfect for defining terms.
          +
          Term
          +
          Definition for the term.
          +
          A second definition for the same term.
          +
          Another term
          +
          Definition for this other term.
          +
          +{{< /example >}} ## Inline code @@ -273,7 +273,8 @@ These changes, and more, are demonstrated below. {{< partial "callouts/warning-input-support.md" >}} {{< /callout >}} -
          +{{< example show_markup=false >}} +
          Example legend

          @@ -394,6 +395,7 @@ These changes, and more, are demonstrated below.

          +{{< /example >}} ### Pointers on buttons @@ -409,54 +411,54 @@ Reboot includes an enhancement for `role="button"` to change the default cursor The `
          ` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `
          `s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `
          `. -
          -
          - ACME Corporation
          - 1123 Fictional St,
          - San Francisco, CA 94103
          - P: (123) 456-7890 -
          - -
          - Full Name
          - first.last@example.com -
          -
          +{{< example show_markup=false >}} +
          + ACME Corporation
          + 1123 Fictional St,
          + San Francisco, CA 94103
          + P: (123) 456-7890 +
          + +
          + Full Name
          + first.last@example.com +
          +{{< /example >}} ### Blockquote The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. -
          -
          -

          A well-known quote, contained in a blockquote element.

          -
          -

          Someone famous in Source Title

          -
          +{{< example show_markup=false >}} +
          +

          A well-known quote, contained in a blockquote element.

          +
          +

          Someone famous in Source Title

          +{{< /example >}} ### Inline elements The `` element receives basic styling to make it stand out amongst paragraph text. -
          - The HTML abbreviation element. -
          +{{< example show_markup=false >}} +The HTML abbreviation element. +{{< /example >}} ### Summary The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it. -
          -
          - Some details -

          More info about the details.

          -
          +{{< example show_markup=false >}} +
          + Some details +

          More info about the details.

          +
          -
          - Even more details -

          Here are even more details about the details.

          -
          -
          +
          + Even more details +

          Here are even more details about the details.

          +
          +{{< /example >}} ## HTML5 `[hidden]` attribute diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index c783fc890d96..e9df941b1b6c 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -116,50 +116,29 @@ These hoverable rows can also be combined with the striped rows variant: Highlight a table row or cell by adding a `.table-active` class. -
          - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          #FirstLastHandle
          1MarkOtto@mdo
          2JacobThornton@fat
          3Larry the Bird@twitter
          -
          - -```html +{{< example skip=tr >}} - ... + + + + + + - - ... - - - ... - + + + + + + + + + + + + @@ -167,52 +146,31 @@ Highlight a table row or cell by adding a `.table-active` class.
          #FirstLastHandle
          1MarkOtto@mdo2JacobThornton@fat
          3 Larry the Bird
          -``` - -
          - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          #FirstLastHandle
          1MarkOtto@mdo
          2JacobThornton@fat
          3Larry the Bird@twitter
          -
          +{{< /example >}} -```html +{{< example skip=tr >}} - ... + + + + + + - - ... - - - ... - + + + + + + + + + + + + @@ -220,7 +178,7 @@ Highlight a table row or cell by adding a `.table-active` class.
          #FirstLastHandle
          1MarkOtto@mdo2JacobThornton@fat
          3 Larry the Bird
          -``` +{{< /example >}} ## How do the variants and accented tables work? @@ -268,34 +226,34 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` Add a thicker border, darker between table groups—``, ``, and ``—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time). -{{< example >}} +{{< example skip=tr >}} - + - + - + - - + + - - + + - +
          # First Last Handle
          1 Mark Otto @mdo
          2 Jacob Thornton @fat
          3 Larry the Bird @twitter
          {{< /example >}} @@ -303,147 +261,101 @@ Add a thicker border, darker between table groups—``, ``, and `< ## Vertical alignment Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. - -
          -
          -
          - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          Heading 1Heading 2Heading 3Heading 4
          This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
          This cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
          This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell is aligned to the top.This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
          -
-
- -```html +{{< example skip=tr >}}
- - ... - + + + + + + + + + + + + + + + + + + - ... - - - ... - - - - + + - +
Heading 1Heading 2Heading 3Heading 4
This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the tableThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.This cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis cell inherits vertical-align: bottom; from the table rowThis here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
......This cell inherits vertical-align: middle; from the tableThis cell inherits vertical-align: middle; from the table This cell is aligned to the top....This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
-``` +{{< /example >}} ## Nesting Border styles, active styles, and table variants are not inherited by nested tables. -
+{{< example skip=tr >}} - + - + - + - + - + - +
# First Last Handle
1 Mark Otto @mdo
- + - + - + - - + + - - + + - +
Header Header Header
A First Last
B First Last
C First Last
3 Larry the Bird @twitter
-
- -```html - - - ... - - - ... - - - - ... - -
- - ... -
-
-``` +{{< /example >}} ## How nesting works @@ -457,173 +369,125 @@ Note that if you add ``s as direct children of a table, those `` will be Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make ``s appear light or dark gray. -
+{{< example skip=tr >}} - + - + - + - - + + - - + + - - -
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
-
- -```html - - - ... - - - ... +
-``` +{{< /example >}} -
+{{< example skip=tr >}} - + - + - + - - + + - - + + - - -
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
-
- -```html - - - ... - - - ... +
-``` +{{< /example >}} ### Table foot -
+{{< example skip=tr >}} - + - + - + - - + + - - + + - + - + - +
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer
-
- -```html - - - ... - - - ... - - - ... - -
-``` +{{< /example >}} ### Captions A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. -
- - - {{< partial "table-content" >}} -
List of users
-
- -```html - +{{< example >}} +
- - ... - - - ... - +{{< partial "table-content" >}}
List of users
-``` +{{< /example >}} You can also put the `` on the top of the table with `.caption-top`. @@ -675,72 +539,64 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCellCell
-
-
- -```html +{{< example skip=table >}}
- - ... -
+ + + + # + Heading + Heading + Heading + Heading + Heading + Heading + Heading + Heading + Heading + + + + + 1 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 2 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 3 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + +
-``` +{{< /example >}} ### Breakpoint specific @@ -748,80 +604,66 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab **These tables may appear broken until their responsive styles apply at specific viewport widths.** -{{< tables.inline >}} +{{< example skip=table >}} +{{< table.inline >}} {{ range $.Site.Data.breakpoints }} -{{ if not (eq . "xs") }} -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCellCell
2CellCellCellCellCellCellCellCell
3CellCellCellCellCellCellCellCell
-
-
-{{ end -}} -{{- end -}} -{{< /tables.inline >}} - -{{< highlight html >}} -{{< tables.inline >}} -{{- range $.Site.Data.breakpoints -}} -{{- if not (eq . "xs") }} -
- - ... -
+{{ if not (eq .breakpoint "xs") }} +
+ + + + # + Heading + Heading + Heading + Heading + Heading + Heading + Heading + Heading + + + + + 1 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 2 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + + 3 + Cell + Cell + Cell + Cell + Cell + Cell + Cell + Cell + + +
{{ end -}} {{- end -}} -{{< /tables.inline >}} -{{< /highlight >}} +{{< /table.inline >}} +{{< /example >}} ## CSS diff --git a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html index 9fd24e2e0b96..f17ad1cb4137 100644 --- a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html @@ -1433,40 +1433,38 @@

المخطوطة

-
- -
-

@fat

-

محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.

-

@mdo

-

بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

-

واحد

-

وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

-

اثنان

-

مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

-

ثلاثة

-

وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

-

ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

-
+ +
+

@fat

+

محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.

+

@mdo

+

بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

+

واحد

+

وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

+

اثنان

+

مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

+

ثلاثة

+

وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

+

ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html index 4c96bc0ae6e4..5ea47dcc1c7c 100644 --- a/site/content/docs/5.3/examples/cheatsheet/index.html +++ b/site/content/docs/5.3/examples/cheatsheet/index.html @@ -1430,39 +1430,37 @@

Scrollspy

-
- +
-

First heading

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Second heading

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Third heading

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Fourth heading

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-

Fifth heading

-

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

-
+

First heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Second heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Third heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Fourth heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

+

Fifth heading

+

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

diff --git a/site/content/docs/5.3/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md index d0a92e5b5539..23deb93f6126 100644 --- a/site/content/docs/5.3/utilities/flex.md +++ b/site/content/docs/5.3/utilities/flex.md @@ -80,47 +80,38 @@ Responsive variations also exist for `flex-direction`. Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`. -
-
-
Justify
-
Content
-
Start
-
-
-
Justify
-
Content
-
End
-
-
-
Justify
-
Content
-
Center
-
-
-
Justify
-
Content
-
Between
-
-
-
Justify
-
Content
-
Around
-
-
-
Justify
-
Content
-
Evenly
-
-
- -```html -
...
-
...
-
...
-
...
-
...
-
...
-``` +{{< example class=bd-example-flex >}} + +
Justify
+
Content
+
Start
+ + +
Justify
+
Content
+
End
+ + +
Justify
+
Content
+
Center
+ + +
Justify
+
Content
+
Between
+ + +
Justify
+
Content
+
Around
+ + +
Justify
+
Content
+
Evenly
+ +{{< /example >}} Responsive variations also exist for `justify-content`. @@ -141,41 +132,33 @@ Responsive variations also exist for `justify-content`. Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default). -
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
- -```html -
...
-
...
-
...
-
...
-
...
-``` +{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+ + +
Flex item
+
Flex item
+
Flex item
+ + +
Flex item
+
Flex item
+
Flex item
+ + +
Flex item
+
Flex item
+
Flex item
+ + +
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} Responsive variations also exist for `align-items`. @@ -195,41 +178,37 @@ Responsive variations also exist for `align-items`. Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default). -
-
-
Flex item
-
Aligned flex item
-
Flex item
-
-
-
Flex item
-
Aligned flex item
-
Flex item
-
-
-
Flex item
-
Aligned flex item
-
Flex item
-
-
-
Flex item
-
Aligned flex item
-
Flex item
-
-
-
Flex item
-
Aligned flex item
-
Flex item
-
+{{< example class=bd-example-flex >}} +
+
Flex item
+
Aligned flex item
+
Flex item
+
+ +
+
Flex item
+
Aligned flex item
+
Flex item
+
+ +
+
Flex item
+
Aligned flex item
+
Flex item
+
+ +
+
Flex item
+
Aligned flex item
+
Flex item
-```html -
Aligned flex item
-
Aligned flex item
-
Aligned flex item
-
Aligned flex item
-
Aligned flex item
-``` +
+
Flex item
+
Aligned flex item
+
Flex item
+
+{{< /example >}} Responsive variations also exist for `align-self`. @@ -345,72 +324,53 @@ Vertically move one flex item to the top or bottom of a container by mixing `ali Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`. -
-
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-
- -```html -
- ... -
-``` - -
-
-
Flex item 1
-
Flex item 2
-
Flex item 3
-
Flex item 4
-
Flex item 5
-
Flex item 6
-
Flex item 7
-
Flex item 8
-
Flex item 9
-
Flex item 10
-
Flex item 11
-
Flex item 12
-
Flex item 13
-
Flex item 14
-
-
- -```html -
- ... -
-``` - -
-
-
Flex item 1
-
Flex item 2
-
Flex item 3
-
Flex item 4
-
Flex item 5
-
Flex item 6
-
Flex item 7
-
Flex item 8
-
Flex item 9
-
Flex item 10
-
Flex item 11
-
Flex item 12
-
Flex item 13
-
Flex item 14
-
-
+{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} -```html -
- ... -
-``` +{{< example class=bd-example-flex >}} + +
Flex item 1
+
Flex item 2
+
Flex item 3
+
Flex item 4
+
Flex item 5
+
Flex item 6
+
Flex item 7
+
Flex item 8
+
Flex item 9
+
Flex item 10
+
Flex item 11
+
Flex item 12
+
Flex item 13
+
Flex item 14
+ +{{< /example >}} +{{< example class=bd-example-flex >}} + +
Flex item 1
+
Flex item 2
+
Flex item 3
+
Flex item 4
+
Flex item 5
+
Flex item 6
+
Flex item 7
+
Flex item 8
+
Flex item 9
+
Flex item 10
+
Flex item 11
+
Flex item 12
+
Flex item 13
+
Flex item 14
+ +{{< /example >}} Responsive variations also exist for `flex-wrap`. @@ -466,151 +426,125 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe **Heads up!** This property has no effect on single rows of flex items. -
-
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-
- -```html -
- ... -
-``` - -
-
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-
+{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} -```html -
...
-``` - -
-
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-
+{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} -```html -
...
-``` - -
-
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-
+{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} -```html -
...
-``` - -
-
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-
+{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} -```html -
...
-``` - -
-
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-
+{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} -```html -
...
-``` +{{< example class=bd-example-flex >}} + +
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+ +{{< /example >}} Responsive variations also exist for `align-content`. diff --git a/site/content/docs/5.3/utilities/opacity.md b/site/content/docs/5.3/utilities/opacity.md index 891b46b8fb39..b5ec52a8e8f2 100644 --- a/site/content/docs/5.3/utilities/opacity.md +++ b/site/content/docs/5.3/utilities/opacity.md @@ -10,21 +10,13 @@ The `opacity` property sets the opacity level for an element. The opacity level Set the `opacity` of an element using `.opacity-{value}` utilities. -
-
100%
-
75%
-
50%
-
25%
-
0%
-
- -```html -
...
-
...
-
...
-
...
-
...
-``` +{{< example class=d-sm-flex >}} +
100%
+
75%
+
50%
+
25%
+
0%
+{{< /example>}} ## CSS diff --git a/site/content/docs/5.3/utilities/overflow.md b/site/content/docs/5.3/utilities/overflow.md index 9c8573c3332c..cfd474b4b8fb 100644 --- a/site/content/docs/5.3/utilities/overflow.md +++ b/site/content/docs/5.3/utilities/overflow.md @@ -10,83 +10,62 @@ toc: true Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default. -
-
- This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll. -
-
- This is an example of using .overflow-hidden on an element with set width and height dimensions. -
-
- This is an example of using .overflow-visible on an element with set width and height dimensions. -
-
- This is an example of using .overflow-scroll on an element with set width and height dimensions. -
-
- -```html -
...
-
...
-
...
-
...
-``` +{{< example class=d-md-flex >}} + + This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll. + + + This is an example of using .overflow-hidden on an element with set width and height dimensions. + + + This is an example of using .overflow-visible on an element with set width and height dimensions. + + + This is an example of using .overflow-scroll on an element with set width and height dimensions. + +{{< /example >}} ### `overflow-x` Adjust the `overflow-x` property to affect the overflow of content horizontally. -
-
-
.overflow-x-auto example on an element
-
with set width and height dimensions.
-
-
-
.overflow-x-hidden example
-
on an element with set width and height dimensions.
-
-
-
.overflow-x-visible example
-
on an element with set width and height dimensions.
-
-
-
.overflow-x-scroll example on an element
-
with set width and height dimensions.
-
-
- -```html -
...
-
...
-
...
-
...
-``` +{{< example class=d-md-flex >}} + +
.overflow-x-auto example on an element
+
with set width and height dimensions.
+ + +
.overflow-x-hidden example
+
on an element with set width and height dimensions.
+ + +
.overflow-x-visible example
+
on an element with set width and height dimensions.
+ + +
.overflow-x-scroll example on an element
+
with set width and height dimensions.
+ +{{< /example >}} ### `overflow-y` Adjust the `overflow-y` property to affect the overflow of content vertically. -
-
- .overflow-y-auto example on an element with set width and height dimensions. -
-
- .overflow-y-hidden example on an element with set width and height dimensions. -
-
- .overflow-y-visible example on an element with set width and height dimensions. -
-
- .overflow-y-scroll example on an element with set width and height dimensions. -
-
- -```html -
...
-
...
-
...
-
...
-``` +{{< example class=d-md-flex >}} + + .overflow-y-auto example on an element with set width and height dimensions. + + + .overflow-y-hidden example on an element with set width and height dimensions. + + + .overflow-y-visible example on an element with set width and height dimensions. + + + .overflow-y-scroll example on an element with set width and height dimensions. + +{{< /example >}} Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. diff --git a/site/content/docs/5.3/utilities/spacing.md b/site/content/docs/5.3/utilities/spacing.md index 2562b8d43e4a..8d87b1e3b7a2 100644 --- a/site/content/docs/5.3/utilities/spacing.md +++ b/site/content/docs/5.3/utilities/spacing.md @@ -74,17 +74,11 @@ Here are some representative examples of these classes: Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`. -
-
- Centered element -
-
- -```html -
+{{< example >}} +
Centered element
-``` +{{< /example >}} ## Negative margin diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html index a98b5eb899e7..dbf6c5e5ae71 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -22,10 +22,24 @@ {{- $table := printf "\n%s" $table_attributes $table_content -}} -
- - {{ partialCached "table-content" . }} - +
+
+ + {{ partialCached "table-content" . }} + +
+ +
+ html +
+ + +
+
+ + {{- highlight $table "html" "" -}}
- -{{- highlight $table "html" "" -}} From 0f44b3f8bd9a28282b9c40d1893d340ae5d1f398 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 24 Jul 2023 15:31:27 +0200 Subject: [PATCH 07/10] Small fixes for js + additions in docsref01~ --- site/assets/js/code-examples.js | 3 +- site/content/docs/5.3/content/tables.md | 49 +++++++++++++++++++------ site/content/docs/5.3/docsref.md | 32 +++++++++++++--- site/layouts/shortcodes/example.html | 1 + 4 files changed, 67 insertions(+), 18 deletions(-) diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 08a9203eba19..9a45427e21c2 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -36,8 +36,9 @@ .forEach(element => { // Ignore examples made by shortcode if (!element.closest('.bd-example-snippet')) { - element.insertAdjacentHTML('beforebegin', btnHtml.replace('html', element.querySelector('pre > code').getAttribute('data-lang'))) + element.insertAdjacentHTML('beforebegin', btnHtml) element.previousElementSibling.append(element) + element.previousElementSibling.querySelector('small').innerHTML = element.querySelector('pre > code').getAttribute('data-lang') } }) diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index e9df941b1b6c..5e7d589deb06 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -482,45 +482,72 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `. A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. -{{< example >}} +{{< example skip=tr >}} -{{< partial "table-content" >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + +
List of users
#FirstLastHandle
1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
{{< /example >}} You can also put the `` on the top of the table with `.caption-top`. -{{< example >}} +{{< example skip=tr >}} - + - + - + - - + + - - + + - +
List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{{< /example >}} diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md index db845a48734f..f401405c50d6 100644 --- a/site/content/docs/5.3/docsref.md +++ b/site/content/docs/5.3/docsref.md @@ -31,7 +31,7 @@ sitemap_exclude: true ## Code example
- The HTML abbreviation element. +
This is a test.
```scss @@ -40,20 +40,40 @@ sitemap_exclude: true } ``` +```html +
This is a markup only test.
+``` + +{{< highlight html >}} +
This is a markup only test.
+{{< /highlight >}} + +{{< example show_preview=false >}} +
This is a markup only test.
+{{< /example >}} + +{{< example show_markup=false >}} +
This is a preview only test.
+{{< /example >}} + {{< example >}}
This is a test.
{{< /example >}} -{{< example class=bg-warning >}} +{{< example class=bg-body-secondary >}}
This is a test.
{{< /example >}} -{{< example show_preview=false >}} -
This is a markup only test.
+{{< example >}} + + This is a skip test. + {{< /example >}} -{{< example show_markup=false >}} -
This is a preview only test.
+{{< example skip=p >}} + + This is a skip test with p. + {{< /example >}} {{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}} diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index 2d2451dc68dd..dfe66e65f752 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -7,6 +7,7 @@ * lang: language used to display the code - default: "html" * show_markup: if the markup should be output in the HTML - default: `true` * show_preview: if the preview should be output in the HTML - default: `true` + * skip_tag: the tag that should replace the `skip` - default: `div` * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false` */ -}} From ca40cc0e43af530f60cef71f584f297878023920 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 24 Jul 2023 15:46:04 +0200 Subject: [PATCH 08/10] CI fix --- site/assets/js/code-examples.js | 2 +- site/content/docs/5.3/content/tables.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 9a45427e21c2..0805aee9e839 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -38,7 +38,7 @@ if (!element.closest('.bd-example-snippet')) { element.insertAdjacentHTML('beforebegin', btnHtml) element.previousElementSibling.append(element) - element.previousElementSibling.querySelector('small').innerHTML = element.querySelector('pre > code').getAttribute('data-lang') + element.previousElementSibling.querySelector('small').textContent = element.querySelector('pre > code').getAttribute('data-lang') } }) diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index 5e7d589deb06..10caa92400e0 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -261,6 +261,7 @@ Add a thicker border, darker between table groups—``, ``, and `< ## Vertical alignment Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. + {{< example skip=tr >}}
From 625ca18cb6eb0cd511a9b25874c9c98ac6f1b39b Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 25 Jul 2023 10:29:58 +0200 Subject: [PATCH 09/10] Fix review + re align home highlight --- site/assets/scss/_masthead.scss | 20 +++++++++++++++++++ .../content/docs/5.3/components/list-group.md | 2 +- site/content/docs/5.3/components/navbar.md | 4 ++-- site/layouts/partials/scripts.html | 2 +- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 951064df1b44..32df8a49f81a 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -23,16 +23,36 @@ .bd-code-snippet { --bs-border-radius: .5rem; + position: relative; margin: 0; border-width: 1px; } + .highlight-toolbar { + padding: 0 !important; // stylelint-disable-line declaration-no-important + + > :first-child { + display: none; + } + + > :last-child { + position: absolute; + top: 50%; + right: .75rem; + z-index: 1; + transform: translateY(-50%); + } + } + .highlight { width: 100%; padding: .5rem 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + background-color: rgba(var(--bs-body-color-rgb), .075); + border: 0; + @include border-radius(subtract(var(--bs-border-radius), 1px)); @include media-breakpoint-up(lg) { padding-right: 4rem; diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 184d1d5b05e3..10418e036c7c 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -362,7 +362,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled - {{< /example >}} +{{< /example >}} ### Using data attributes diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md index 6ecdb24bc465..6777ab395058 100644 --- a/site/content/docs/5.3/components/navbar.md +++ b/site/content/docs/5.3/components/navbar.md @@ -109,7 +109,7 @@ You can replace the text within the `.navbar-brand` with an ``. @@ -123,7 +123,7 @@ You can also make use of some additional utilities to add an image and text at t