Add v5.2.1 docs (#37099)

2025-08-30 16:50:00 +02:00 · 2022-09-07 18:36:43 +03:00
parent c2b4f59e0c
commit 1510239c8f
188 changed files with 4103 additions and 3875 deletions
--- a/docs/5.2/components/toasts/index.html
+++ b/docs/5.2/components/toasts/index.html
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

 <link href="/docs/5.2/assets/css/docs.css" rel="stylesheet">

@@ -31,23 +31,21 @@
 <link rel="icon" href="/docs/5.2/assets/img/favicons/favicon.ico">
 <meta name="theme-color" content="#712cf9">

-<!-- Twitter -->
-<meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@getbootstrap">
 <meta name="twitter:creator" content="@getbootstrap">
 <meta name="twitter:title" content="Toasts">
 <meta name="twitter:description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
-<meta name="twitter:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
+<meta name="twitter:image" content="/docs/5.2/assets/brand/bootstrap-social.png">

-<!-- Facebook -->
 <meta property="og:url" content="https://getbootstrap.com/docs/5.2/components/toasts/">
 <meta property="og:title" content="Toasts">
 <meta property="og:description" content="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.">
 <meta property="og:type" content="article">
-<meta property="og:image" content="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-social.png">
 <meta property="og:image:type" content="image/png">
 <meta property="og:image:width" content="1000">
 <meta property="og:image:height" content="500">
+<meta property="og:image" content="/docs/5.2/assets/brand/bootstrap-social.png">

 <script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>

@@ -145,6 +143,7 @@

    <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">
      <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
@@ -152,14 +151,21 @@

        <span class="d-none fs-6 pe-1">Browse</span>
      </button>
+    </div>

    <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" 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"/></svg>
    </a>

-    <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>
-    </button>
+    <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>
+      </button>
+    </div>

    <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
      <div class="offcanvas-header px-4 pb-0">
@@ -189,12 +195,6 @@

        <hr class="d-lg-none text-white-50">

-
-        <div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-
-        <hr class="d-lg-none text-white-50">
-
-
        <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
          <li class="nav-item col-6 col-lg-auto">
            <a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
@@ -218,7 +218,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 +254,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,7 +480,7 @@

      </div>

-
+      
        <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
          <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
            On this page
@@ -522,10 +522,10 @@
 </nav>
          </div>
        </div>
-
+      

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

        <p>Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They&rsquo;re built with flexbox, so they&rsquo;re easy to align and position.</p>
 <h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
@@ -1073,7 +1073,8 @@ Previously, our scripts dynamically added the <code>.hide</code> class to comple
 <small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v5.2.0</small>

 <p>As part of Bootstrap&rsquo;s evolving CSS variables approach, toasts now use local CSS variables on <code>.toast</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>
-<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl">  <span class="na">--#{$prefix}toast-padding-x</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$toast-padding-x</span><span class="si">}</span><span class="p">;</span>
+<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl">  <span class="na">--#{$prefix}toast-zindex</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$zindex-toast</span><span class="si">}</span><span class="p">;</span>
+</span></span><span class="line"><span class="cl">  <span class="na">--#{$prefix}toast-padding-x</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$toast-padding-x</span><span class="si">}</span><span class="p">;</span>
 </span></span><span class="line"><span class="cl">  <span class="na">--#{$prefix}toast-padding-y</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$toast-padding-y</span><span class="si">}</span><span class="p">;</span>
 </span></span><span class="line"><span class="cl">  <span class="na">--#{$prefix}toast-spacing</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$toast-spacing</span><span class="si">}</span><span class="p">;</span>
 </span></span><span class="line"><span class="cl">  <span class="na">--#{$prefix}toast-max-width</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$toast-max-width</span><span class="si">}</span><span class="p">;</span>
@@ -1132,19 +1133,19 @@ Previously, our scripts dynamically added the <code>.hide</code> class to comple
 <td><code>animation</code></td>
 <td>boolean</td>
 <td><code>true</code></td>
-<td>Apply a CSS fade transition to the toast</td>
+<td>Apply a CSS fade transition to the toast.</td>
 </tr>
 <tr>
 <td><code>autohide</code></td>
 <td>boolean</td>
 <td><code>true</code></td>
-<td>Automatically hide the toast after the delay</td>
+<td>Automatically hide the toast after the delay.</td>
 </tr>
 <tr>
 <td><code>delay</code></td>
 <td>number</td>
 <td><code>5000</code></td>
-<td>Delay in milliseconds before hiding the toast</td>
+<td>Delay in milliseconds before hiding the toast.</td>
 </tr>
 </tbody>
 </table></div>
@@ -1171,11 +1172,11 @@ Previously, our scripts dynamically added the <code>.hide</code> class to comple
 </tr>
 <tr>
 <td><code>getInstance</code></td>
-<td><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element. <br> For example: <code>const myToastEl = document.getElementById('myToastEl')</code> <code>const myToast = bootstrap.Toast.getInstance(myToastEl)</code> Returns a Bootstrap toast instance</td>
+<td><em>Static</em> method which allows you to get the toast instance associated with a DOM element. <br> For example: <code>const myToastEl = document.getElementById('myToastEl')</code> <code>const myToast = bootstrap.Toast.getInstance(myToastEl)</code> Returns a Bootstrap toast instance.</td>
 </tr>
 <tr>
 <td><code>getOrCreateInstance</code></td>
-<td><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn&rsquo;t initialized.  <br><code>const myToastEl = document.getElementById('myToastEl')</code>  <code>const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)</code> Returns a Bootstrap toast instance</td>
+<td><em>Static</em> method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn&rsquo;t initialized. <br><code>const myToastEl = document.getElementById('myToastEl')</code> <code>const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)</code> Returns a Bootstrap toast instance.</td>
 </tr>
 <tr>
 <td><code>hide</code></td>
@@ -1241,7 +1242,7 @@ Previously, our scripts dynamically added the <code>.hide</code> class to comple
        <ul class="list-unstyled small text-muted">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.2.0.</li>
+          <li class="mb-2">Currently v5.2.1.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1290,7 +1291,7 @@ Previously, our scripts dynamically added the <code>.hide</code> class to comple
  </div>
 </footer>

-    <script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+    <script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -1299,12 +1300,12 @@ Previously, our scripts dynamically added the <code>.hide</code> class to comple
 <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')
@@ -1318,10 +1319,10 @@ Previously, our scripts dynamically added the <code>.hide</code> class to comple
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.2\.1\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

@@ -1348,7 +1349,7 @@ ${htmlSnippet.replace(/^/gm, '    ')}
 </script>


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

  </body>