From b2d7d29f6da44468d5f75185a60048b9046f46e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 10 Sep 2020 11:39:29 +0200 Subject: [PATCH] docs(examples): ensure content sits in landmarks (#31579) --- .../content/docs/5.0/examples/blog/index.html | 22 +- .../docs/5.0/examples/checkout/index.html | 376 +++++----- .../docs/5.0/examples/dashboard/index.html | 4 +- .../5.0/examples/floating-labels/index.html | 46 +- .../content/docs/5.0/examples/grid/index.html | 338 ++++----- .../docs/5.0/examples/masonry/index.html | 4 +- .../5.0/examples/navbar-bottom/index.html | 4 +- .../docs/5.0/examples/navbars/index.html | 708 +++++++++--------- .../docs/5.0/examples/offcanvas/index.html | 10 +- .../docs/5.0/examples/pricing/index.html | 18 +- .../docs/5.0/examples/product/index.html | 130 ++-- .../docs/5.0/examples/product/product.css | 2 +- .../docs/5.0/examples/sign-in/index.html | 32 +- 13 files changed, 853 insertions(+), 841 deletions(-) diff --git a/site/content/docs/5.0/examples/blog/index.html b/site/content/docs/5.0/examples/blog/index.html index 7e8d71fbf1..a6a3fc770a 100644 --- a/site/content/docs/5.0/examples/blog/index.html +++ b/site/content/docs/5.0/examples/blog/index.html @@ -41,7 +41,9 @@ include_js: false Travel + +

Title of a longer featured blog post

@@ -80,16 +82,14 @@ include_js: false
- -

From the Firehose

-
+

Sample blog post

January 1, 2014 by Mark

@@ -120,9 +120,9 @@ include_js: false
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

    • Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

    -
    + -
    +

    Another blog post

    December 23, 2013 by Jacob

    @@ -132,9 +132,9 @@ include_js: false

    Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    -
    + -
    +

    New feature

    December 14, 2013 by Chris

    @@ -146,16 +146,16 @@ include_js: false

    Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

    Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

    -
    + -
    - +
    diff --git a/site/content/docs/5.0/examples/checkout/index.html b/site/content/docs/5.0/examples/checkout/index.html index 4638535c01..bc7db17690 100644 --- a/site/content/docs/5.0/examples/checkout/index.html +++ b/site/content/docs/5.0/examples/checkout/index.html @@ -9,215 +9,217 @@ body_class: "bg-light" ---
    -
    - -

    Checkout form

    -

    Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

    -
    - -
    -
    -

    - Your cart - 3 -

    -
      -
    • -
      -
      Product name
      - Brief description -
      - $12 -
      • -
    • -
      -
      Second product
      - Brief description -
      - $8 -
      • -
    • -
      -
      Third item
      - Brief description -
      - $5 -
      • -
    • -
      -
      Promo code
      - EXAMPLECODE -
      - −$5 -
      • -
    • - Total (USD) - $20 -
      • -
    - -
    -
    - - -
    -
    +
    +
    + +

    Checkout form

    +

    Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

    -
    -

    Billing address

    -
    -
    -
    - - -
    - Valid first name is required. -
    -
    -
    - - -
    - Valid last name is required. +
    +
    +

    + Your cart + 3 +

    +
      +
    • +
      +
      Product name
      + Brief description
      -
    + $12 + +
  • +
    +
    Second product
    + Brief description +
    + $8 +
    • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
    • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + −$5 +
    • +
  • + Total (USD) + $20 +
    • + -
    - -
    - @ - -
    - Your username is required. + +
    + + +
    + +
    +
    +

    Billing address

    +
    +
    +
    + + +
    + Valid first name is required. +
    +
    + +
    + + +
    + Valid last name is required. +
    +
    + +
    + +
    + @ + +
    + Your username is required. +
    +
    +
    + +
    + + +
    + Please enter a valid email address for shipping updates. +
    +
    + +
    + + +
    + Please enter your shipping address. +
    +
    + +
    + + +
    + +
    + + +
    + Please select a valid country. +
    +
    + +
    + + +
    + Please provide a valid state. +
    +
    + +
    + + +
    + Zip code required.
    -
    - - -
    - Please enter a valid email address for shipping updates. -
    -
    +
    -
    - - -
    - Please enter your shipping address. -
    -
    - -
    - - -
    - -
    - - -
    - Please select a valid country. -
    -
    - -
    - - -
    - Please provide a valid state. -
    -
    - -
    - - -
    - Zip code required. -
    -
    -
    - -
    - -
    - - -
    - -
    - - -
    - -
    - -

    Payment

    - -
    - - + +
    +
    - - + +
    -
    - - -
    -
    -
    -
    - - - Full name as displayed on card -
    - Name on card is required +
    + +

    Payment

    + +
    +
    + + +
    +
    + + +
    +
    + +
    -
    - - -
    - Credit card number is required +
    +
    + + + Full name as displayed on card +
    + Name on card is required +
    +
    + +
    + + +
    + Credit card number is required +
    +
    + +
    + + +
    + Expiration date required +
    +
    + +
    + + +
    + Security code required +
    -
    - - -
    - Expiration date required -
    -
    +
    -
    - - -
    - Security code required -
    -
    -
    - -
    - - - + + +
    -
    +

    © 2017–{{< year >}} Company Name

    diff --git a/site/content/docs/5.0/examples/dashboard/index.html b/site/content/docs/5.0/examples/dashboard/index.html index 433294e698..0f0db30576 100644 --- a/site/content/docs/5.0/examples/dashboard/index.html +++ b/site/content/docs/5.0/examples/dashboard/index.html @@ -11,7 +11,7 @@ extra_js: - src: "dashboard.js" --- - +
    diff --git a/site/content/docs/5.0/examples/floating-labels/index.html b/site/content/docs/5.0/examples/floating-labels/index.html index e46ede7a71..e0e5320bc4 100644 --- a/site/content/docs/5.0/examples/floating-labels/index.html +++ b/site/content/docs/5.0/examples/floating-labels/index.html @@ -6,28 +6,30 @@ extra_css: include_js: false --- - diff --git a/site/content/docs/5.0/examples/grid/index.html b/site/content/docs/5.0/examples/grid/index.html index 9c01604be5..f26829b4f9 100644 --- a/site/content/docs/5.0/examples/grid/index.html +++ b/site/content/docs/5.0/examples/grid/index.html @@ -7,180 +7,182 @@ body_class: "py-4" include_js: false --- -
    +
    +
    -

    Bootstrap grid examples

    -

    Basic grid layouts to get you familiar with building within the Bootstrap grid system.

    -

    In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

    +

    Bootstrap grid examples

    +

    Basic grid layouts to get you familiar with building within the Bootstrap grid system.

    +

    In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

    -

    Five grid tiers

    -

    There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

    +

    Five grid tiers

    +

    There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

    -
    -
    .col-4
    -
    .col-4
    -
    .col-4
    -
    - -
    -
    .col-sm-4
    -
    .col-sm-4
    -
    .col-sm-4
    -
    - -
    -
    .col-md-4
    -
    .col-md-4
    -
    .col-md-4
    -
    - -
    -
    .col-lg-4
    -
    .col-lg-4
    -
    .col-lg-4
    -
    - -
    -
    .col-xl-4
    -
    .col-xl-4
    -
    .col-xl-4
    -
    - -
    -
    .col-xxl-4
    -
    .col-xxl-4
    -
    .col-xxl-4
    -
    - -

    Three equal columns

    -

    Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

    -
    -
    .col-md-4
    -
    .col-md-4
    -
    .col-md-4
    -
    - -

    Three equal columns alternative

    -

    By using the .row-cols-* classes, you can easily create a grid with equal columns.

    -
    -
    .col child of .row-cols-md-3
    -
    .col child of .row-cols-md-3
    -
    .col child of .row-cols-md-3
    -
    - -

    Three unequal columns

    -

    Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

    -
    -
    .col-md-3
    -
    .col-md-6
    -
    .col-md-3
    -
    - -

    Two columns

    -

    Get two columns starting at desktops and scaling to large desktops.

    -
    -
    .col-md-8
    -
    .col-md-4
    -
    - -

    Full width, single column

    -

    - No grid classes are necessary for full-width elements. -

    - -
    - -

    Two columns with two nested columns

    -

    Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

    -

    At mobile device sizes, tablets and down, these columns and their nested columns will stack.

    -
    -
    -
    - .col-md-8 -
    -
    -
    .col-md-6
    -
    .col-md-6
    -
    +
    +
    .col-4
    +
    .col-4
    +
    .col-4
    +
    + +
    +
    .col-sm-4
    +
    .col-sm-4
    +
    .col-sm-4
    +
    + +
    +
    .col-md-4
    +
    .col-md-4
    +
    .col-md-4
    +
    + +
    +
    .col-lg-4
    +
    .col-lg-4
    +
    .col-lg-4
    +
    + +
    +
    .col-xl-4
    +
    .col-xl-4
    +
    .col-xl-4
    +
    + +
    +
    .col-xxl-4
    +
    .col-xxl-4
    +
    .col-xxl-4
    +
    + +

    Three equal columns

    +

    Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

    +
    +
    .col-md-4
    +
    .col-md-4
    +
    .col-md-4
    +
    + +

    Three equal columns alternative

    +

    By using the .row-cols-* classes, you can easily create a grid with equal columns.

    +
    +
    .col child of .row-cols-md-3
    +
    .col child of .row-cols-md-3
    +
    .col child of .row-cols-md-3
    +
    + +

    Three unequal columns

    +

    Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

    +
    +
    .col-md-3
    +
    .col-md-6
    +
    .col-md-3
    +
    + +

    Two columns

    +

    Get two columns starting at desktops and scaling to large desktops.

    +
    +
    .col-md-8
    +
    .col-md-4
    +
    + +

    Full width, single column

    +

    + No grid classes are necessary for full-width elements. +

    + +
    + +

    Two columns with two nested columns

    +

    Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

    +

    At mobile device sizes, tablets and down, these columns and their nested columns will stack.

    +
    +
    +
    + .col-md-8 +
    +
    +
    .col-md-6
    +
    .col-md-6
    +
    +
    +
    .col-md-4
    +
    + +
    + +

    Mixed: mobile and desktop

    +

    The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

    +

    Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

    +
    +
    .col-md-8
    +
    .col-6 .col-md-4
    +
    +
    +
    .col-6 .col-md-4
    +
    .col-6 .col-md-4
    +
    .col-6 .col-md-4
    +
    +
    +
    .col-6
    +
    .col-6
    +
    + +
    + +

    Mixed: mobile, tablet, and desktop

    +
    +
    .col-sm-6 .col-lg-8
    +
    .col-6 .col-lg-4
    +
    +
    +
    .col-6 .col-sm-4
    +
    .col-6 .col-sm-4
    +
    .col-6 .col-sm-4
    +
    + +
    + +

    Gutters

    +

    With .gx-* classes, the horizontal gutters can be adjusted.

    +
    +
    .col with .gx-4 gutters
    +
    .col with .gx-4 gutters
    +
    .col with .gx-4 gutters
    +
    .col with .gx-4 gutters
    +
    .col with .gx-4 gutters
    +
    .col with .gx-4 gutters
    +
    +

    Use the .gy-* classes to control the vertical gutters.

    +
    +
    .col with .gy-4 gutters
    +
    .col with .gy-4 gutters
    +
    .col with .gy-4 gutters
    +
    .col with .gy-4 gutters
    +
    .col with .gy-4 gutters
    +
    .col with .gy-4 gutters
    +
    +

    With .g-* classes, the gutters in both directions can be adjusted.

    +
    +
    .col with .g-3 gutters
    +
    .col with .g-3 gutters
    +
    .col with .g-3 gutters
    +
    .col with .g-3 gutters
    +
    .col with .g-3 gutters
    +
    .col with .g-3 gutters
    -
    .col-md-4
    -
    +
    +
    -

    Mixed: mobile and desktop

    -

    The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

    -

    Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

    -
    -
    .col-md-8
    -
    .col-6 .col-md-4
    -
    -
    -
    .col-6 .col-md-4
    -
    .col-6 .col-md-4
    -
    .col-6 .col-md-4
    -
    -
    -
    .col-6
    -
    .col-6
    +

    Containers

    +

    Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

    -
    - -

    Mixed: mobile, tablet, and desktop

    -
    -
    .col-sm-6 .col-lg-8
    -
    .col-6 .col-lg-4
    -
    -
    -
    .col-6 .col-sm-4
    -
    .col-6 .col-sm-4
    -
    .col-6 .col-sm-4
    -
    - -
    - -

    Gutters

    -

    With .gx-* classes, the horizontal gutters can be adjusted.

    -
    -
    .col with .gx-4 gutters
    -
    .col with .gx-4 gutters
    -
    .col with .gx-4 gutters
    -
    .col with .gx-4 gutters
    -
    .col with .gx-4 gutters
    -
    .col with .gx-4 gutters
    -
    -

    Use the .gy-* classes to control the vertical gutters.

    -
    -
    .col with .gy-4 gutters
    -
    .col with .gy-4 gutters
    -
    .col with .gy-4 gutters
    -
    .col with .gy-4 gutters
    -
    .col with .gy-4 gutters
    -
    .col with .gy-4 gutters
    -
    -

    With .g-* classes, the gutters in both directions can be adjusted.

    -
    -
    .col with .g-3 gutters
    -
    .col with .g-3 gutters
    -
    .col with .g-3 gutters
    -
    .col with .g-3 gutters
    -
    .col with .g-3 gutters
    -
    .col with .g-3 gutters
    -
    -
    - -
    -
    - -

    Containers

    -

    Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new xxl breakpoint.

    -
    - -
    .container
    -
    .container-sm
    -
    .container-md
    -
    .container-lg
    -
    .container-xl
    -
    .container-xxl
    -
    .container-fluid
    +
    .container
    +
    .container-sm
    +
    .container-md
    +
    .container-lg
    +
    .container-xl
    +
    .container-xxl
    +
    .container-fluid
    +
    diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.0/examples/masonry/index.html index 046a800919..ceb3790ec9 100644 --- a/site/content/docs/5.0/examples/masonry/index.html +++ b/site/content/docs/5.0/examples/masonry/index.html @@ -7,7 +7,7 @@ extra_js: async: true --- -
    +

    Bootstrap and Masonry

    Integrate Masonry with the Bootstrap grid system and cards component.

    @@ -102,4 +102,4 @@ extra_js:
    -
    +
    diff --git a/site/content/docs/5.0/examples/navbar-bottom/index.html b/site/content/docs/5.0/examples/navbar-bottom/index.html index 68c247f859..49833a6867 100644 --- a/site/content/docs/5.0/examples/navbar-bottom/index.html +++ b/site/content/docs/5.0/examples/navbar-bottom/index.html @@ -3,13 +3,13 @@ layout: examples title: Bottom navbar example --- -
    +

    Bottom Navbar example

    This example is a quick exercise to illustrate how the bottom navbar works.

    }}" role="button">View navbar docs »
    -
    +