diff options
Diffstat (limited to 'docs/4.6/components/scrollspy/index.html')
| -rw-r--r-- | docs/4.6/components/scrollspy/index.html | 232 |
1 files changed, 116 insertions, 116 deletions
diff --git a/docs/4.6/components/scrollspy/index.html b/docs/4.6/components/scrollspy/index.html index ec566d3c36..35169d17d2 100644 --- a/docs/4.6/components/scrollspy/index.html +++ b/docs/4.6/components/scrollspy/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport."> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> -<meta name="generator" content="Hugo 0.88.1"> +<meta name="generator" content="Hugo 0.101.0"> <meta name="docsearch:language" content="en"> <meta name="docsearch:version" content="4.6"> @@ -17,7 +17,7 @@ <!-- Bootstrap core CSS --> -<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> +<link href="/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- Documentation extras --> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet"> @@ -105,10 +105,10 @@ <ul class="navbar-nav ml-md-auto"> <li class="nav-item dropdown"> - <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false"> - v4.6 - </a> - <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> + <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false"> + <span class="sr-only">Bootstrap </span> v4.6 <span class="sr-only">(switch to other versions)</span> + </button> + <div class="dropdown-menu dropdown-menu-md-right"> <a class="dropdown-item active" href="/docs/4.6/">Latest (4.6.x)</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a> @@ -285,7 +285,7 @@ </div> - + <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation"> <nav id="TableOfContents"> <ul> @@ -310,7 +310,7 @@ </ul> </nav> </nav> - + <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> @@ -367,39 +367,39 @@ <p>And some more placeholder content, for good measure.</p> </div> </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">id</span><span class="o">=</span><span class="s">"navbar-example2"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</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">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <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> - <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"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#fat"</span><span class="p">></span>@fat<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"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#mdo"</span><span class="p">></span>@mdo<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 dropdown"</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 dropdown-toggle"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Dropdown<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</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">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#one"</span><span class="p">></span>one<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">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"separator"</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">div</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">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</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> -<span class="p"></</span><span class="nt">nav</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#navbar-example2"</span> <span class="na">data-offset</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"fat"</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"mdo"</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"one"</span><span class="p">></span>one<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h2 id="example-with-nested-nav">Example with nested nav</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example2"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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> +</span></span><span class="line"><span class="cl"> <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></span><span class="line"><span class="cl"> <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">"#fat"</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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></span><span class="line"><span class="cl"> <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">"#mdo"</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item dropdown"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Dropdown<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#one"</span><span class="p">></span>one<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">role</span><span class="o">=</span><span class="s">"separator"</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#navbar-example2"</span> <span class="na">data-offset</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"fat"</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"mdo"</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"one"</span><span class="p">></span>one<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h2 id="example-with-nested-nav">Example with nested nav</h2> <p>Scrollspy also works with nested <code>.nav</code>s. If a nested <code>.nav</code> is <code>.active</code>, its parents will also be <code>.active</code>. Scroll the area next to the navbar and watch the active class change.</p> <div class="bd-example"> <div class="row"> @@ -441,40 +441,40 @@ </div> </div> </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">id</span><span class="o">=</span><span class="s">"navbar-example3"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</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">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <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"</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">"#item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <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"</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 ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1-1"</span><span class="p">></span>Item 1-1<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 ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1-2"</span><span class="p">></span>Item 1-2<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> - <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">"#item-2"</span><span class="p">></span>Item 2<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">"#item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">a</span><span class="p">></span> - <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"</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 ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-3-1"</span><span class="p">></span>Item 3-1<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 ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-3-2"</span><span class="p">></span>Item 3-2<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> - <span class="p"></</span><span class="nt">nav</span><span class="p">></span> -<span class="p"></</span><span class="nt">nav</span><span class="p">></span> - -<span class="p"><</span><span class="nt">div</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#navbar-example3"</span> <span class="na">data-offset</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1-1"</span><span class="p">></span>Item 1-1<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1-2"</span><span class="p">></span>Item 1-2<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3-1"</span><span class="p">></span>Item 3-1<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3-2"</span><span class="p">></span>Item 3-2<span class="p"></</span><span class="nt">h5</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h2 id="example-with-list-group">Example with list-group</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example3"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"#item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1-1"</span><span class="p">></span>Item 1-1<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1-2"</span><span class="p">></span>Item 1-2<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">nav</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"#item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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">"#item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-3-1"</span><span class="p">></span>Item 3-1<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ml-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-3-2"</span><span class="p">></span>Item 3-2<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">nav</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">nav</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">nav</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#navbar-example3"</span> <span class="na">data-offset</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1-1"</span><span class="p">></span>Item 1-1<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1-2"</span><span class="p">></span>Item 1-2<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3-1"</span><span class="p">></span>Item 3-1<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3-2"</span><span class="p">></span>Item 3-2<span class="p"></</span><span class="nt">h5</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h2 id="example-with-list-group">Example with list-group</h2> <p>Scrollspy also works with <code>.list-group</code>s. Scroll the area next to the list group and watch the active class change.</p> <div class="bd-example"> <div class="row"> @@ -500,41 +500,41 @@ </div> </div> </div> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-example"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</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">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-1"</span><span class="p">></span>Item 1<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">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-2"</span><span class="p">></span>Item 2<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">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-3"</span><span class="p">></span>Item 3<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">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-4"</span><span class="p">></span>Item 4<span class="p"></</span><span class="nt">a</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -<span class="p"><</span><span class="nt">div</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#list-example"</span> <span class="na">data-offset</span><span class="o">=</span><span class="s">"0"</span> <span class="na">class</span><span class="o">=</span><span class="s">"scrollspy-example"</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> - <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-4"</span><span class="p">></span>Item 4<span class="p"></</span><span class="nt">h4</span><span class="p">></span> - <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> -<span class="p"></</span><span class="nt">div</span><span class="p">></span> -</code></pre></div><h2 id="usage">Usage</h2> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-example"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-4"</span><span class="p">></span>Item 4<span class="p"></</span><span class="nt">a</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#list-example"</span> <span class="na">data-offset</span><span class="o">=</span><span class="s">"0"</span> <span class="na">class</span><span class="o">=</span><span class="s">"scrollspy-example"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-4"</span><span class="p">></span>Item 4<span class="p"></</span><span class="nt">h4</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h2 id="usage">Usage</h2> <h3 id="via-data-attributes">Via data attributes</h3> <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span> - <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">body</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#navbar-example"</span><span class="p">></span> - ... - <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example"</span><span class="p">></span> - <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="na">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">></span> - ... - <span class="p"></</span><span class="nt">ul</span><span class="p">></span> - <span class="p"></</span><span class="nt">div</span><span class="p">></span> - ... -<span class="p"></</span><span class="nt">body</span><span class="p">></span> -</code></pre></div><h3 id="via-javascript">Via JavaScript</h3> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span> <span class="na">data-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-target</span><span class="o">=</span><span class="s">"#navbar-example"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <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="na">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> ... +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span> +</span></span></code></pre></div><h3 id="via-javascript">Via JavaScript</h3> <p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="nx">target</span><span class="o">:</span> <span class="s1">'#navbar-example'</span> <span class="p">})</span> -</code></pre></div><div class="bd-callout bd-callout-danger"> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="nx">target</span><span class="o">:</span> <span class="s1">'#navbar-example'</span> <span class="p">})</span> +</span></span></code></pre></div><div class="bd-callout bd-callout-danger"> <h4 id="resolvable-id-targets-required">Resolvable ID targets required</h4> <p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>. </div> @@ -547,10 +547,10 @@ <h3 id="methods">Methods</h3> <h4 id="scrollspyrefresh"><code>.scrollspy('refresh')</code></h4> <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span> -<span class="p">})</span> -</code></pre></div><h4 id="scrollspydispose"><code>.scrollspy('dispose')</code></h4> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span> +</span></span><span class="line"><span class="cl"><span class="p">})</span> +</span></span></code></pre></div><h4 id="scrollspydispose"><code>.scrollspy('dispose')</code></h4> <p>Destroys an element’s scrollspy.</p> <h3 id="options">Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p> @@ -599,10 +599,10 @@ </tr> </tbody> </table> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'activate.bs.scrollspy'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> - <span class="c1">// do something... -</span><span class="c1"></span><span class="p">})</span> -</code></pre></div> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'activate.bs.scrollspy'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// do something... +</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">})</span> +</span></span></code></pre></div> </main> </div> </div> @@ -610,7 +610,7 @@ <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="/docs/4.6/assets/js/vendor/jquery.slim.min.js"><\/script>')</script> -<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> +<script src="/docs/4.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |