diff options
Diffstat (limited to 'docs/5.1/components/navs-tabs/index.html')
| -rw-r--r-- | docs/5.1/components/navs-tabs/index.html | 72 |
1 files changed, 36 insertions, 36 deletions
diff --git a/docs/5.1/components/navs-tabs/index.html b/docs/5.1/components/navs-tabs/index.html index 3cd8ffb5b..989d33b01 100644 --- a/docs/5.1/components/navs-tabs/index.html +++ b/docs/5.1/components/navs-tabs/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Documentation and examples for how to use Bootstrap’s included navigation components."> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> -<meta name="generator" content="Hugo 0.87.0"> +<meta name="generator" content="Hugo 0.88.1"> <meta name="docsearch:language" content="en"> <meta name="docsearch:version" content="5.1"> @@ -17,7 +17,7 @@ <!-- Bootstrap core CSS --> -<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> +<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <link href="/docs/5.1/assets/css/docs.css" rel="stylesheet"> @@ -149,7 +149,7 @@ <span class="d-none d-lg-inline">Bootstrap</span> v5.1 </button> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions"> - <li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.0.x)</a></li> + <li><a class="dropdown-item current" aria-current="true" href="/docs/5.1/">Latest (5.1.x)</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li> <li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li> @@ -472,7 +472,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav"</span><span class="p">></span> @@ -486,7 +486,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <p>Classes are used throughout, so your markup can be super flexible. Use <code><ul></code>s like above, <code><ol></code> if the order of your items is important, or roll your own with a <code><nav></code> element. Because the <code>.nav</code> uses <code>display: flex</code>, the nav links behave the same as nav items would, but without the extra markup.</p> @@ -495,13 +495,13 @@ <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Active<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div> <h2 id="available-styles">Available styles</h2> <p>Change the style of <code>.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p> @@ -520,7 +520,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav justify-content-center"</span><span class="p">></span> @@ -534,7 +534,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <p>Right-aligned with <code>.justify-content-end</code>:</p> @@ -550,7 +550,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav justify-content-end"</span><span class="p">></span> @@ -564,7 +564,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <h3 id="vertical">Vertical</h3> @@ -581,7 +581,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav flex-column"</span><span class="p">></span> @@ -595,7 +595,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <p>As always, vertical navigation is possible without <code><ul></code>s, too.</p> @@ -604,13 +604,13 @@ <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav flex-column"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Active<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div> <h3 id="tabs">Tabs</h3> <p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface. Use them to create tabbable regions with our <a href="#javascript-behavior">tab JavaScript plugin</a>.</p> @@ -626,7 +626,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-tabs"</span><span class="p">></span> @@ -640,7 +640,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <h3 id="pills">Pills</h3> @@ -657,7 +657,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills"</span><span class="p">></span> @@ -671,7 +671,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <h3 id="fill-and-justify">Fill and justify</h3> @@ -688,7 +688,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills nav-fill"</span><span class="p">></span> @@ -702,7 +702,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <p>When using a <code><nav></code>-based navigation, you can safely omit <code>.nav-item</code> as only <code>.nav-link</code> is required for styling <code><a></code> elements.</p> @@ -711,13 +711,13 @@ <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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills nav-fill"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Active<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Much longer nav link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div> <p>For equal-width elements, use <code>.nav-justified</code>. All horizontal space will be occupied by nav links, but unlike the <code>.nav-fill</code> above, every nav item will be the same width.</p> <div class="bd-example"> @@ -732,7 +732,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills nav-justified"</span><span class="p">></span> @@ -746,7 +746,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <p>Similar to the <code>.nav-fill</code> example using a <code><nav></code>-based navigation.</p> @@ -755,14 +755,14 @@ <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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills nav-justified"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Active<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Much longer nav link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div> <h2 id="working-with-flex-utilities">Working with flex utilities</h2> <p>If you need responsive nav variations, consider using a series of <a href="/docs/5.1/utilities/flex/">flexbox utilities</a>. 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.</p> @@ -771,13 +771,13 @@ <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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills flex-column flex-sm-row"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-sm-fill text-sm-center nav-link active"</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">"page"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Active<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-sm-fill text-sm-center nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Longer nav link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-sm-fill text-sm-center nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-sm-fill text-sm-center nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"flex-sm-fill text-sm-center nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">nav</span><span class="p">></span></code></pre></div> <h2 id="regarding-accessibility">Regarding accessibility</h2> <p>If you’re using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code><ul></code>, or wrap a <code><nav></code> element around the whole navigation. Do not add the role to the <code><ul></code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p> @@ -804,7 +804,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-tabs"</span><span class="p">></span> @@ -825,7 +825,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <h3 id="pills-with-dropdowns">Pills with dropdowns</h3> @@ -848,7 +848,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> </div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills"</span><span class="p">></span> @@ -869,7 +869,7 @@ <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Link<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span> - <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"-1"</span> <span class="na">aria-disabled</span><span class="o">=</span><span class="s">"true"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> + <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link disabled"</span><span class="p">></span>Disabled<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> <span class="p"></</span><span class="nt">ul</span><span class="p">></span></code></pre></div> <h2 id="sass">Sass</h2> @@ -1153,7 +1153,7 @@ <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#trigger'</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance </span></code></pre></div><h4 id="getorcreateinstance">getOrCreateInstance</h4> -<p><em>Static</em> 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</p> +<p><em>Static</em> 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</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#trigger'</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getOrCreateInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance </span></code></pre></div><h3 id="events">Events</h3> @@ -1213,7 +1213,7 @@ <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.1/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.1.0.</li> + <li class="mb-2">Currently v5.1.1.</li> </ul> </div> <div class="col-6 col-lg-2 offset-lg-1 mb-3"> @@ -1260,7 +1260,7 @@ </div> </footer> - <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script> + <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |