mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 03:41:19 +02:00
Code Issues Releases Wiki Activity

Add newer version 5 alert on top of v4 and v5 pages (#38410)

Browse Source 
* Change newer version label of v3.3

* Change newer version label of v3.4

* Change newer version label of v4.0/v4.1/v4.2

* Add newer version alert for v4.3

* Add newer version alert for v4.4

* Add newer version alert for v4.5/v4.6 (using `.skippy` bg color)

* Add newer version alert for v5.0 (using `.skippy` bg color)

* Add newer version alert for v5.1 (using `.skippy` bg color)

* Add newer version alert for v5.2 (using `.skippy` bg color)

* Change some copy

- v4 gets 'Bootstrap 5 is here'
- v5 gets 'Theres a newer version of Bootstrap 5'

* Unique message: 'There\'s a newer version of Bootstrap!'

* Change HTML structure for focus visible

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
Julien Déramond
2023-05-17 18:39:05 +02:00
committed by GitHub
parent 42ec3773d3
commit 87498ceeb2
812 changed files with 3788 additions and 1445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
docs/5.2/examples/index.html
View File

@@ -63,7 +63,7 @@
<div class="skippy visually-hidden-focusable overflow-hidden">
<div class="container-xl">
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
</div>
</div>
@@ -141,6 +141,10 @@
</svg>
<div class="d-block px-3 py-2 text-center text-bold skippy">
<a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
</div>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="d-lg-none" style="width: 1.5rem;"></div>
@@ -150,7 +154,7 @@
</a>
<div class="d-flex">
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -208,7 +212,7 @@
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
</li>
<li class="nav-item dropdown">
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -244,14 +248,14 @@
</header>
<header class="py-5 border-bottom">
<div class="container-xxl bd-gutter pt-md-1 pb-md-4">
<div class="row">
<div class="col-xl-8">
<h1 class="bd-title mt-0">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
<div class="d-flex flex-column flex-md-row gap-3">
<a href="https://github.com/twbs/bootstrap/releases/download/v5.2.3/bootstrap-5.2.3-examples.zip" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
@@ -261,7 +265,7 @@
Download source code
</a>
</div>
</div>
<div class="col-xl-4 d-lg-flex justify-content-xl-end">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
@@ -273,7 +277,7 @@
<main class="bd-content order-1 py-5" id="content">
<div class="container-xxl bd-gutter">
<div class="row g-lg-5 mb-5">
<div class="bd-content col-lg-3">
<h2 id="snippets">Snippets</h2>
@@ -294,8 +298,8 @@
</a>
<p class="text-muted">Display your branding, navigation, search, and more with these header components</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/heroes/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/heroes.png,
@@ -308,8 +312,8 @@
</a>
<p class="text-muted">Set the stage on your homepage with heroes that feature clear calls to action.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/features/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/features.png,
@@ -322,8 +326,8 @@
</a>
<p class="text-muted">Explain the features, benefits, or other details in your marketing content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sidebars/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sidebars.png,
@@ -336,8 +340,8 @@
</a>
<p class="text-muted">Common navigation patterns ideal for offcanvas or multi-column layouts.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/footers/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/footers.png,
@@ -350,8 +354,8 @@
</a>
<p class="text-muted">Finish every page strong with an awesome footer, big or small.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dropdowns/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dropdowns.png,
@@ -364,8 +368,8 @@
</a>
<p class="text-muted">Enhance your dropdowns with filters, icons, custom styles, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/list-groups/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/list-groups.png,
@@ -378,8 +382,8 @@
</a>
<p class="text-muted">Extend list groups with utilities and custom styles for any content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/modals/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/modals.png,
@@ -415,8 +419,8 @@
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/pricing/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/pricing.png,
@@ -429,8 +433,8 @@
</a>
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/checkout/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/checkout.png,
@@ -443,8 +447,8 @@
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/product/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/product.png,
@@ -457,8 +461,8 @@
</a>
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cover/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cover.png,
@@ -471,8 +475,8 @@
</a>
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/carousel/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/carousel.png,
@@ -485,8 +489,8 @@
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/blog/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/blog.png,
@@ -499,8 +503,8 @@
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dashboard/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dashboard.png,
@@ -513,8 +517,8 @@
</a>
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sign-in/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sign-in.png,
@@ -527,8 +531,8 @@
</a>
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sticky-footer/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sticky-footer.png,
@@ -541,8 +545,8 @@
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/sticky-footer-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/sticky-footer-navbar.png,
@@ -555,8 +559,8 @@
</a>
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/jumbotron/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/jumbotron.png,
@@ -592,8 +596,8 @@
</a>
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/grid/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/grid.png,
@@ -606,8 +610,8 @@
</a>
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cheatsheet/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cheatsheet.png,
@@ -620,8 +624,8 @@
</a>
<p class="text-muted">Kitchen sink of Bootstrap components.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/cheatsheet-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/cheatsheet-rtl.png,
@@ -657,8 +661,8 @@
</a>
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbars-offcanvas/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbars-offcanvas.png,
@@ -671,8 +675,8 @@
</a>
<p class="text-muted">Same as the Navbars example, but with our offcanvas component.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-static/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-static.png,
@@ -685,8 +689,8 @@
</a>
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-fixed/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-fixed.png,
@@ -699,8 +703,8 @@
</a>
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/navbar-bottom/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/navbar-bottom.png,
@@ -713,8 +717,8 @@
</a>
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/offcanvas-navbar/">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/offcanvas-navbar.png,
@@ -756,8 +760,8 @@
</a>
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/checkout-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/checkout-rtl.png,
@@ -770,8 +774,8 @@
</a>
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/carousel-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/carousel-rtl.png,
@@ -784,8 +788,8 @@
</a>
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/blog-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/blog-rtl.png,
@@ -798,8 +802,8 @@
</a>
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
</div>
<div class="col-sm-6 col-md-4 mb-3">
<a class="d-block" href="/docs/5.2/examples/dashboard-rtl/" hreflang="ar">
<img class="img-thumbnail mb-3" srcset="/docs/5.2/assets/img/examples/dashboard-rtl.png,
@@ -841,7 +845,7 @@
<hr class="my-5">
<div class="container">
<div class="text-center">
@@ -862,7 +866,7 @@
src="/docs/5.2/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
</div>
</main>
@@ -937,7 +941,7 @@
</body>
</html>