From 7bbf6d9ad3299ec0dd5818c1028e761bde3039ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Fri, 30 Apr 2021 00:19:07 +0200 Subject: Improve overall new examples' accessibility (#33772) --- site/content/docs/5.0/examples/features/index.html | 359 +++++++------ site/content/docs/5.0/examples/headers/index.html | 435 +++++++-------- site/content/docs/5.0/examples/heroes/index.html | 178 +++--- site/content/docs/5.0/examples/pricing/index.html | 34 +- site/content/docs/5.0/examples/sidebars/index.html | 598 +++++++++++---------- .../docs/5.0/examples/sidebars/sidebars.css | 4 +- .../docs/5.0/examples/starter-template/index.html | 53 +- 7 files changed, 840 insertions(+), 821 deletions(-) (limited to 'site/content/docs') diff --git a/site/content/docs/5.0/examples/features/index.html b/site/content/docs/5.0/examples/features/index.html index 3c174a0100..1e331f00af 100644 --- a/site/content/docs/5.0/examples/features/index.html +++ b/site/content/docs/5.0/examples/features/index.html @@ -64,222 +64,225 @@ body_class: "" +
+

Features examples

- - -
- -
-

Hanging icons

-
-
-
- -
-
+
diff --git a/site/content/docs/5.0/examples/headers/index.html b/site/content/docs/5.0/examples/headers/index.html index 2a4585e9d5..e15b47e5f5 100644 --- a/site/content/docs/5.0/examples/headers/index.html +++ b/site/content/docs/5.0/examples/headers/index.html @@ -30,261 +30,266 @@ body_class: "" -
-
- - - Simple header - - - -
-
- -
- -
-
- -
-
- -
- -
-
- - - - - - -
- - -
-
-
- -
+
+

Headers examples

-
-
- +
+ + Simple header -
+
-
- -
+
-
- - -
-
+
+
+ +
-
-
+
-
-
- - +
+ + -
+
+ +
-
-
+ -
-
-
+ -
+
-
-
-
- - +
+
+
+ + + + + + +
+ +
+ +
+ + +
+
+
-
-
- -
+
-
-
-
-
-
-
-
-
-
-









-
-
-









+
+
+ +
+ +
+ + +
+
-
-
+ -
- - -
-
- - - Double header - -
- -
+
+
+
+









+
+
+









+
+
-
-
+
-
-
-
- + +
+
+ + Double header - - +
+ +
-
-
+ -
-
-
- -
+
-
- - +
+
+
+
+ + + + + +
+
-
-
+
+
+
+ +
+ +
+ + +
+
+
+ -
+
+
diff --git a/site/content/docs/5.0/examples/heroes/index.html b/site/content/docs/5.0/examples/heroes/index.html index 7d553a16ba..4d97292a8d 100644 --- a/site/content/docs/5.0/examples/heroes/index.html +++ b/site/content/docs/5.0/examples/heroes/index.html @@ -6,118 +6,122 @@ extra_css: body_class: "" --- -
- -

Centered hero

-
-

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

-
- - +
+

Heroes examples

+ +
+ +

Centered hero

+
+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
-
-
+
-
-

Centered screenshot

-
-

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

-
- - +
+

Centered screenshot

+
+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
-
-
-
- Example image +
+
+ Example image +
-
-
+
-
-
-
- Bootstrap Themes -
-
-

Responsive left-aligned hero with image

-

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

-
- - +
+
+
+ Bootstrap Themes +
+
+

Responsive left-aligned hero with image

+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
-
-
+
-
-
-
-

Vertically centered hero sign-up 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.

-
-
-
-
- - -
-
- - -
-
- -
- -
- By clicking Sign up, you agree to the terms of use. -
+
+
+
+

Vertically centered hero sign-up 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.

+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+ By clicking Sign up, you agree to the terms of use. +
+
-
-
+
-
-
-
-

Border hero with cropped image and shadows

-

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

-
- - +
+
+
+

Border hero with cropped image and shadows

+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
-
-
-
- +
+
+ +
-
-
+
-
-
-

Dark mode hero

-
-

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

-
- - +
+
+

Dark mode hero

+
+

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

+
+ + +
-
-
+
+ diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html index 5f09c529fd..c62c68c70a 100644 --- a/site/content/docs/5.0/examples/pricing/index.html +++ b/site/content/docs/5.0/examples/pricing/index.html @@ -14,24 +14,26 @@ include_js: false
-
- - Bootstrap - Pricing example - +
+
+ + Bootstrap + Pricing example + - -
+ +
-
-

Pricing

-

Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

-
+
+

Pricing

+

Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.

+
+
diff --git a/site/content/docs/5.0/examples/sidebars/index.html b/site/content/docs/5.0/examples/sidebars/index.html index 76feca9170..cdb7d8eace 100644 --- a/site/content/docs/5.0/examples/sidebars/index.html +++ b/site/content/docs/5.0/examples/sidebars/index.html @@ -67,321 +67,325 @@ body_class: "" -
- - - Sidebar - -
- -
-
-
+ + Sidebar -
-
-
+
-
- - - Sidebar - -
- -
-
-
+ + Sidebar -
-
-
+
-
- - - - - -
-
+ + -
-
-
+
-
- - - Collapsible - - -
+
+ + + Collapsible + + +
-
+
-
- - - List group - -
- -
- List group item heading - Wed -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Tues -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Mon -
-
Some placeholder content in a paragraph below the heading and date.
+
+ + + List group +
+ +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ - -
- List group item heading - Wed -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Tues -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Mon -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Wed -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Tues -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Mon -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Wed -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Tues -
-
Some placeholder content in a paragraph below the heading and date.
- - -
- List group item heading - Mon -
-
Some placeholder content in a paragraph below the heading and date.
- + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Wed +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Tues +
+
Some placeholder content in a paragraph below the heading and date.
+ + +
+ List group item heading + Mon +
+
Some placeholder content in a paragraph below the heading and date.
+ +
-
-
+
+
diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.css b/site/content/docs/5.0/examples/sidebars/sidebars.css index d034f3af15..22678b93a0 100644 --- a/site/content/docs/5.0/examples/sidebars/sidebars.css +++ b/site/content/docs/5.0/examples/sidebars/sidebars.css @@ -1,4 +1,4 @@ -body { +main { display: flex; flex-wrap: nowrap; height: 100vh; @@ -6,7 +6,7 @@ body { overflow-x: auto; overflow-y: hidden; } -body > * { +main > * { flex-shrink: 0; min-height: -webkit-fill-available; } diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html index fdd233b7c3..48a5cbfad5 100644 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ b/site/content/docs/5.0/examples/starter-template/index.html @@ -13,37 +13,38 @@ extra_css: -

Get started with Bootstrap

-

Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.

+
+

Get started with Bootstrap

+

Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.

-
- }}" class="btn btn-primary btn-lg px-4">Download examples -
+
+ }}" class="btn btn-primary btn-lg px-4">Download examples +
-
+
-
-
-

Starter projects

-

Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.

- -
+
+
+

Starter projects

+

Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.

+ +
-
-

Guides

-

Read more detailed instructions and documentation on using or contributing to Bootstrap.

- +
+

Guides

+

Read more detailed instructions and documentation on using or contributing to Bootstrap.

+ +
-
- +
-- cgit v1.2.3