From dfb3a02ca8b4393ec4dc4b5368da0150bd681d1e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 7 Sep 2021 18:43:13 +0300 Subject: Add v5.1.1 docs (#34870) --- docs/5.1/components/accordion/index.html | 10 ++-- docs/5.1/components/alerts/index.html | 27 +++++------ docs/5.1/components/badge/index.html | 10 ++-- docs/5.1/components/breadcrumb/index.html | 10 ++-- docs/5.1/components/button-group/index.html | 10 ++-- docs/5.1/components/buttons/index.html | 37 +++++++++------ docs/5.1/components/card/index.html | 18 ++++---- docs/5.1/components/carousel/index.html | 12 ++--- docs/5.1/components/close-button/index.html | 10 ++-- docs/5.1/components/collapse/index.html | 12 ++--- docs/5.1/components/dropdowns/index.html | 18 ++++---- docs/5.1/components/list-group/index.html | 16 +++---- docs/5.1/components/modal/index.html | 16 +++---- docs/5.1/components/navbar/index.html | 38 +++++++-------- docs/5.1/components/navs-tabs/index.html | 72 ++++++++++++++--------------- docs/5.1/components/offcanvas/index.html | 12 ++--- docs/5.1/components/pagination/index.html | 22 ++++----- docs/5.1/components/placeholders/index.html | 22 ++++----- docs/5.1/components/popovers/index.html | 12 ++--- docs/5.1/components/progress/index.html | 24 ++++------ docs/5.1/components/scrollspy/index.html | 12 ++--- docs/5.1/components/spinners/index.html | 10 ++-- docs/5.1/components/toasts/index.html | 12 ++--- docs/5.1/components/tooltips/index.html | 12 ++--- 24 files changed, 226 insertions(+), 228 deletions(-) (limited to 'docs/5.1/components') diff --git a/docs/5.1/components/accordion/index.html b/docs/5.1/components/accordion/index.html index aab0051a8..b0e139b17 100644 --- a/docs/5.1/components/accordion/index.html +++ b/docs/5.1/components/accordion/index.html @@ -5,7 +5,7 @@ - + @@ -17,7 +17,7 @@ - + @@ -149,7 +149,7 @@ Bootstrap v5.1
<ul class="nav nav-tabs">
@@ -640,7 +640,7 @@
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    <a class="nav-link disabled">Disabled</a>
   </li>
 </ul>

Pills

@@ -657,7 +657,7 @@ Link
<ul class="nav nav-pills">
@@ -671,7 +671,7 @@
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    <a class="nav-link disabled">Disabled</a>
   </li>
 </ul>

Fill and justify

@@ -688,7 +688,7 @@ Link
<ul class="nav nav-pills nav-fill">
@@ -702,7 +702,7 @@
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    <a class="nav-link disabled">Disabled</a>
   </li>
 </ul>

When using a <nav>-based navigation, you can safely omit .nav-item as only .nav-link is required for styling <a> elements.

@@ -711,13 +711,13 @@ Active Much longer nav link Link - Disabled + Disabled
<nav class="nav nav-pills nav-fill">
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Much longer nav link</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  <a class="nav-link disabled">Disabled</a>
 </nav>

For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.

@@ -732,7 +732,7 @@ Link
<ul class="nav nav-pills nav-justified">
@@ -746,7 +746,7 @@
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    <a class="nav-link disabled">Disabled</a>
   </li>
 </ul>

Similar to the .nav-fill example using a <nav>-based navigation.

@@ -755,14 +755,14 @@ Active Much longer nav link Link - Disabled + Disabled
<nav class="nav nav-pills nav-justified">
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Much longer nav link</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  <a class="nav-link disabled">Disabled</a>
 </nav>

Working with flex utilities

If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.

@@ -771,13 +771,13 @@ Active Longer nav link Link - Disabled + Disabled
<nav class="nav nav-pills flex-column flex-sm-row">
   <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
   <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
   <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
-  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
 </nav>

Regarding accessibility

If you’re using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

@@ -804,7 +804,7 @@ Link
<ul class="nav nav-tabs">
@@ -825,7 +825,7 @@
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    <a class="nav-link disabled">Disabled</a>
   </li>
 </ul>

Pills with dropdowns

@@ -848,7 +848,7 @@ Link
<ul class="nav nav-pills">
@@ -869,7 +869,7 @@
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    <a class="nav-link disabled">Disabled</a>
   </li>
 </ul>

Sass

@@ -1153,7 +1153,7 @@
var triggerEl = document.querySelector('#trigger')
 var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
 

getOrCreateInstance

-

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialised

+

Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized

var triggerEl = document.querySelector('#trigger')
 var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
 

Events

@@ -1213,7 +1213,7 @@
@@ -1260,7 +1260,7 @@
- + diff --git a/docs/5.1/components/offcanvas/index.html b/docs/5.1/components/offcanvas/index.html index f224fbbd6..a44a098c4 100644 --- a/docs/5.1/components/offcanvas/index.html +++ b/docs/5.1/components/offcanvas/index.html @@ -5,7 +5,7 @@ - + @@ -17,7 +17,7 @@ - + @@ -149,7 +149,7 @@ Bootstrap v5.1