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

* 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>
2025-08-31 00:59:51 +02:00 · 2023-05-17 18:39:05 +02:00
parent 42ec3773d3
commit 87498ceeb2
812 changed files with 3788 additions and 1445 deletions
--- a/docs/5.2/about/team/index.html
+++ b/docs/5.2/about/team/index.html
@@ -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="bd-navbar-toggle">
@@ -158,9 +162,9 @@
    </a>

    <div class="d-flex">
-      
+
        <div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-      
+

      <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>
@@ -218,7 +222,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">
@@ -254,7 +258,7 @@
 </header>


-    
+
  <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
    <aside class="bd-sidebar">
      <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,10 +484,10 @@

      </div>

-      
+

      <div class="bd-content ps-lg-2">
-        
+

        <p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>

@@ -494,70 +498,70 @@
        <strong>Mark Otto</strong> @mdo
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/fat">
      <img src="https://github.com/fat.png" alt="@fat" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>Jacob Thornton</strong> @fat
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/xhmikosr">
      <img src="https://github.com/xhmikosr.png" alt="@xhmikosr" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>XhmikosR</strong> @xhmikosr
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/geosot">
      <img src="https://github.com/geosot.png" alt="@geosot" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>GeoSot</strong> @geosot
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/rohit2sharma95">
      <img src="https://github.com/rohit2sharma95.png" alt="@rohit2sharma95" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>Rohit Sharma</strong> @rohit2sharma95
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/alpadev">
      <img src="https://github.com/alpadev.png" alt="@alpadev" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>alpadev</strong> @alpadev
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/ffoodd">
      <img src="https://github.com/ffoodd.png" alt="@ffoodd" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>Gaël Poupard</strong> @ffoodd
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/patrickhlauke">
      <img src="https://github.com/patrickhlauke.png" alt="@patrickhlauke" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>Patrick H. Lauke</strong> @patrickhlauke
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/martijncuppens">
      <img src="https://github.com/martijncuppens.png" alt="@martijncuppens" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>Martijn Cuppens</strong> @martijncuppens
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/johann-s">
      <img src="https://github.com/johann-s.png" alt="@johann-s" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
        <strong>Johann-S</strong> @johann-s
      </span>
    </a>
-  
+
    <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/glebm">
      <img src="https://github.com/glebm.png" alt="@glebm" width="32" height="32" class="rounded me-2" loading="lazy">
      <span>
@@ -642,12 +646,12 @@
 <script src="/docs/5.2/assets/js/docs.min.js"></script>

 <script>
-  
+
  document.querySelectorAll('.btn-edit').forEach(btn => {
    btn.addEventListener('click', event => {
      const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML

-      
+
      const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')

      const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -691,7 +695,7 @@ ${htmlSnippet.replace(/^/gm, '    ')}
 </script>


-    
+
  <div class="position-fixed"><input type="text" tabindex="-1"></div>

  </body>