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

Improve overall new examples' accessibility (#33772)

Browse Source
This commit is contained in:
Gaël Poupard 2021-04-30 00:19:07 +02:00 committed by GitHub
parent 3bcb9e7df7
commit 7bbf6d9ad3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 901 additions and 882 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
site/content/docs/5.0/examples/features/index.html
View File

@ -64,8 +64,10 @@ body_class: ""
<path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
</symbol> </symbol>
</svg> </svg>
<main>
<h1 class="visually-hidden">Features examples</h1>
<div class="container px-4 py-5" id="featured-3"> <div class="container px-4 py-5" id="featured-3">
<h2 class="pb-2 border-bottom">Columns with icons</h2> <h2 class="pb-2 border-bottom">Columns with icons</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col"> <div class="feature col">
@ -102,11 +104,11 @@ body_class: ""
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container px-4 py-5" id="hanging-icons"> <div class="container px-4 py-5" id="hanging-icons">
<h2 class="pb-2 border-bottom">Hanging icons</h2> <h2 class="pb-2 border-bottom">Hanging icons</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
@ -146,11 +148,11 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container px-4 py-5" id="custom-cards"> <div class="container px-4 py-5" id="custom-cards">
<h2 class="pb-2 border-bottom">Custom cards</h2> <h2 class="pb-2 border-bottom">Custom cards</h2>
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5"> <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
@ -217,11 +219,11 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container px-4 py-5" id="icon-grid"> <div class="container px-4 py-5" id="icon-grid">
<h2 class="pb-2 border-bottom">Icon grid</h2> <h2 class="pb-2 border-bottom">Icon grid</h2>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
@ -282,4 +284,5 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main>

93
site/content/docs/5.0/examples/headers/index.html
View File

@ -30,7 +30,10 @@ body_class: ""
</symbol> </symbol>
</svg> </svg>
<div class="container"> <main>
<h1 class="visually-hidden">Headers examples</h1>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
@ -38,35 +41,35 @@ body_class: ""
</a> </a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li> <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Features</a></li> <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul> </ul>
</header> </header>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container"> <div class="container">
<header class="d-flex justify-content-center py-3"> <header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li> <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Features</a></li> <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul> </ul>
</header> </header>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container"> <div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"> <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
@ -82,15 +85,15 @@ body_class: ""
<button type="button" class="btn btn-primary">Sign-up</button> <button type="button" class="btn btn-primary">Sign-up</button>
</div> </div>
</header> </header>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<header class="p-3 bg-dark text-white"> <header class="p-3 bg-dark text-white">
<div class="container"> <div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
@ -102,7 +105,7 @@ body_class: ""
</ul> </ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search..."> <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
</form> </form>
<div class="text-end"> <div class="text-end">
@ -111,15 +114,15 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<header class="p-3 mb-3 border-bottom"> <header class="p-3 mb-3 border-bottom">
<div class="container"> <div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
@ -130,7 +133,7 @@ body_class: ""
</ul> </ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control" placeholder="Search..."> <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form> </form>
<div class="dropdown text-end"> <div class="dropdown text-end">
@ -147,18 +150,18 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<header class="py-3 mb-3 border-bottom"> <header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink"> <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink">
<li><a class="dropdown-item active" href="#">Overview</a></li> <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
<li><a class="dropdown-item" href="#">Inventory</a></li> <li><a class="dropdown-item" href="#">Inventory</a></li>
<li><a class="dropdown-item" href="#">Customers</a></li> <li><a class="dropdown-item" href="#">Customers</a></li>
<li><a class="dropdown-item" href="#">Products</a></li> <li><a class="dropdown-item" href="#">Products</a></li>
@ -170,7 +173,7 @@ body_class: ""
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<form class="w-100 me-3"> <form class="w-100 me-3">
<input type="search" class="form-control" placeholder="Search..."> <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form> </form>
<div class="flex-shrink-0 dropdown"> <div class="flex-shrink-0 dropdown">
@ -187,9 +190,9 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<main class="container-fluid pb-3"> <div class="container-fluid pb-3">
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;"> <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="bg-light border rounded-3"> <div class="bg-light border rounded-3">
<br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>
@ -198,14 +201,14 @@ body_class: ""
<br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>
</div> </div>
</div> </div>
</main> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<nav class="py-2 bg-light border-bottom"> <nav class="py-2 bg-light border-bottom">
<div class="container d-flex flex-wrap"> <div class="container d-flex flex-wrap">
<ul class="nav me-auto"> <ul class="nav me-auto">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Home</a></li> <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
@ -216,26 +219,27 @@ body_class: ""
<li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
<header class="py-3 mb-4 border-bottom"> <header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Double header</span> <span class="fs-4">Double header</span>
</a> </a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0"> <form class="col-12 col-lg-auto mb-3 mb-lg-0">
<input type="search" class="form-control" placeholder="Search..."> <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form> </form>
</div> </div>
</header> </header>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<header class="px-3 py-2 bg-dark text-white"> <header>
<div class="px-3 py-2 bg-dark text-white">
<div class="container"> <div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
@ -272,12 +276,11 @@ body_class: ""
</ul> </ul>
</div> </div>
</div> </div>
</header> </div>
<div class="px-3 py-2 border-bottom mb-3">
<div class="px-3 py-2 border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"> <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
<input type="search" class="form-control" placeholder="Search..."> <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form> </form>
<div class="text-end"> <div class="text-end">
@ -285,6 +288,8 @@ body_class: ""
<button type="button" class="btn btn-primary">Sign-up</button> <button type="button" class="btn btn-primary">Sign-up</button>
</div> </div>
</div> </div>
</div> </div>
</header>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
</main>

40
site/content/docs/5.0/examples/heroes/index.html
View File

@ -6,7 +6,10 @@ extra_css:
body_class: "" body_class: ""
--- ---
<div class="px-4 py-5 my-5 text-center"> <main>
<h1 class="visually-hidden">Heroes examples</h1>
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="display-5 fw-bold">Centered hero</h1> <h1 class="display-5 fw-bold">Centered hero</h1>
<div class="col-lg-6 mx-auto"> <div class="col-lg-6 mx-auto">
@ -16,11 +19,11 @@ body_class: ""
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="px-4 pt-5 my-5 text-center border-bottom"> <div class="px-4 pt-5 my-5 text-center border-bottom">
<h1 class="display-4 fw-bold">Centered screenshot</h1> <h1 class="display-4 fw-bold">Centered screenshot</h1>
<div class="col-lg-6 mx-auto"> <div class="col-lg-6 mx-auto">
<p class="lead mb-4">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.</p> <p class="lead mb-4">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.</p>
@ -34,11 +37,11 @@ body_class: ""
<img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy"> <img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container col-xxl-8 px-4 py-5"> <div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5"> <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6"> <div class="col-10 col-sm-8 col-lg-6">
<img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
@ -52,11 +55,11 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container col-xl-10 col-xxl-8 px-4 py-5"> <div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5"> <div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start"> <div class="col-lg-7 text-center text-lg-start">
<h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1> <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
@ -83,11 +86,11 @@ body_class: ""
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="container my-5"> <div class="container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1> <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
@ -103,11 +106,11 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="bg-dark text-secondary px-4 py-5 text-center"> <div class="bg-dark text-secondary px-4 py-5 text-center">
<div class="py-5"> <div class="py-5">
<h1 class="display-5 fw-bold text-white">Dark mode hero</h1> <h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
<div class="col-lg-6 mx-auto"> <div class="col-lg-6 mx-auto">
@ -118,6 +121,7 @@ body_class: ""
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="b-example-divider mb-0"></div> <div class="b-example-divider mb-0"></div>
</main>

6
site/content/docs/5.0/examples/pricing/index.html
View File

@ -14,7 +14,8 @@ include_js: false
</svg> </svg>
<div class="container py-3"> <div class="container py-3">
<header class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"> <header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none"> <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4">Pricing example</span> <span class="fs-4">Pricing example</span>
@ -26,12 +27,13 @@ include_js: false
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a> <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
</nav> </nav>
</header> </div>
<div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<h1 class="display-4 fw-normal">Pricing</h1> <h1 class="display-4 fw-normal">Pricing</h1>
<p class="fs-5 text-muted">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.</p> <p class="fs-5 text-muted">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.</p>
</div> </div>
</header>
<main> <main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">

46
site/content/docs/5.0/examples/sidebars/index.html
View File

@ -67,7 +67,10 @@ body_class: ""
</symbol> </symbol>
</svg> </svg>
<div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;"> <main>
<h1 class="visually-hidden">Sidebars examples</h1>
<div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
@ -75,7 +78,7 @@ body_class: ""
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
@ -108,7 +111,7 @@ body_class: ""
<hr> <hr>
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong> <strong>mdo</strong>
</a> </a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
@ -119,11 +122,11 @@ body_class: ""
<li><a class="dropdown-item" href="#">Sign out</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="d-flex flex-column p-3 bg-light" style="width: 280px;"> <div class="d-flex flex-column p-3 bg-light" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
@ -131,7 +134,7 @@ body_class: ""
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
@ -164,7 +167,7 @@ body_class: ""
<hr> <hr>
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong> <strong>mdo</strong>
</a> </a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
@ -175,19 +178,19 @@ body_class: ""
<li><a class="dropdown-item" href="#">Sign out</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="d-flex flex-column bg-light" style="width: 4.5rem;"> <div class="d-flex flex-column bg-light" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span> <span class="visually-hidden">Icon-only</span>
</a> </a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active py-3 border-bottom" title="Home" data-bs-toggle="tooltip" data-bs-placement="right"> <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi" width="24" height="24"><use xlink:href="#home"/></svg> <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
</a> </a>
</li> </li>
<li> <li>
@ -223,11 +226,11 @@ body_class: ""
<li><a class="dropdown-item" href="#">Sign out</a></li> <li><a class="dropdown-item" href="#">Sign out</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="p-3 bg-white" style="width: 280px;"> <div class="p-3 bg-white" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span> <span class="fs-5 fw-semibold">Collapsible</span>
@ -286,11 +289,11 @@ body_class: ""
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
<div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;"> <div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
<svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span> <span class="fs-5 fw-semibold">List group</span>
@ -382,6 +385,7 @@ body_class: ""
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
</div> </div>
</div> </div>
<div class="b-example-divider"></div> <div class="b-example-divider"></div>
</main>

4
site/content/docs/5.0/examples/sidebars/sidebars.css
View File

@ -1,4 +1,4 @@
body { main {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 100vh; height: 100vh;
@ -6,7 +6,7 @@ body {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
} }
body > * { main > * {
flex-shrink: 0; flex-shrink: 0;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
} }

3
site/content/docs/5.0/examples/starter-template/index.html
View File

@ -13,6 +13,7 @@ extra_css:
</a> </a>
</header> </header>
<main>
<h1>Get started with Bootstrap</h1> <h1>Get started with Bootstrap</h1>
<p class="fs-5 col-md-8">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.</p> <p class="fs-5 col-md-8">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.</p>
@ -43,7 +44,7 @@ extra_css:
</ul> </ul>
</div> </div>
</div> </div>
</main>
<footer class="pt-5 my-5 text-muted border-top"> <footer class="pt-5 my-5 text-muted border-top">
Created by the Bootstrap team &middot; &copy; {{< year >}} Created by the Bootstrap team &middot; &copy; {{< year >}}
</footer> </footer>