diff options
Diffstat (limited to 'site/content/docs/5.2')
-rw-r--r-- | site/content/docs/5.2/components/scrollspy.md | 166 |
1 files changed, 86 insertions, 80 deletions
diff --git a/site/content/docs/5.2/components/scrollspy.md b/site/content/docs/5.2/components/scrollspy.md index be2564e6ef..abbb596dfe 100644 --- a/site/content/docs/5.2/components/scrollspy.md +++ b/site/content/docs/5.2/components/scrollspy.md @@ -162,53 +162,55 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p </div> ```html -<div class="col-4"> - <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end"> - <nav class="nav nav-pills flex-column"> - <a class="nav-link" href="#item-1">Item 1</a> +<div class="row"> + <div class="col-4"> + <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end"> <nav class="nav nav-pills flex-column"> - <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a> - <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a> - </nav> - <a class="nav-link" href="#item-2">Item 2</a> - <a class="nav-link" href="#item-3">Item 3</a> - <nav class="nav nav-pills flex-column"> - <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a> - <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a> + <a class="nav-link" href="#item-1">Item 1</a> + <nav class="nav nav-pills flex-column"> + <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a> + <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a> + </nav> + <a class="nav-link" href="#item-2">Item 2</a> + <a class="nav-link" href="#item-3">Item 3</a> + <nav class="nav nav-pills flex-column"> + <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a> + <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a> + </nav> </nav> </nav> - </nav> -</div> + </div> -<div class="col-8"> - <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0"> - <div id="item-1"> - <h4>Item 1</h4> - <p>...</p> - </div> - <div id="item-1-1"> - <h5>Item 1-1</h5> - <p>...</p> - </div> - <div id="item-1-2"> - <h5>Item 1-2</h5> - <p>...</p> - </div> - <div id="item-2"> - <h4>Item 2</h4> - <p>...</p> - </div> - <div id="item-3"> - <h4>Item 3</h4> - <p>...</p> - </div> - <div id="item-3-1"> - <h5>Item 3-1</h5> - <p>...</p> - </div> - <div id="item-3-2"> - <h5>Item 3-2</h5> - <p>...</p> + <div class="col-8"> + <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0"> + <div id="item-1"> + <h4>Item 1</h4> + <p>...</p> + </div> + <div id="item-1-1"> + <h5>Item 1-1</h5> + <p>...</p> + </div> + <div id="item-1-2"> + <h5>Item 1-2</h5> + <p>...</p> + </div> + <div id="item-2"> + <h4>Item 2</h4> + <p>...</p> + </div> + <div id="item-3"> + <h4>Item 3</h4> + <p>...</p> + </div> + <div id="item-3-1"> + <h5>Item 3-1</h5> + <p>...</p> + </div> + <div id="item-3-2"> + <h5>Item 3-2</h5> + <p>...</p> + </div> </div> </div> </div> @@ -244,24 +246,26 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group </div> ```html -<div class="col-4"> - <div id="list-example" class="list-group"> - <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> - <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> - <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> - <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> +<div class="row"> + <div class="col-4"> + <div id="list-example" class="list-group"> + <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> + <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> + <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> + <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> + </div> </div> -</div> -<div class="col-8"> - <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0"> - <h4 id="list-item-1">Item 1</h4> - <p>...</p> - <h4 id="list-item-2">Item 2</h4> - <p>...</p> - <h4 id="list-item-3">Item 3</h4> - <p>...</p> - <h4 id="list-item-4">Item 4</h4> - <p>...</p> + <div class="col-8"> + <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0"> + <h4 id="list-item-1">Item 1</h4> + <p>...</p> + <h4 id="list-item-2">Item 2</h4> + <p>...</p> + <h4 id="list-item-3">Item 3</h4> + <p>...</p> + <h4 id="list-item-4">Item 4</h4> + <p>...</p> + </div> </div> </div> ``` @@ -299,27 +303,29 @@ Scrollspy is not limited to nav components and list groups, so it will work on a </div> ```html -<div class="col-4"> - <div id="list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center"> - <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a> - <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a> - <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a> - <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a> - <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a> +<div class="row"> + <div class="col-4"> + <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center"> + <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a> + <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a> + <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a> + <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a> + <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a> + </div> </div> -</div> -<div class="col-8"> - <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0"> - <h4 id="simple-list-item-1">Item 1</h4> - <p>...</p> - <h4 id="simple-list-item-2">Item 2</h4> - <p>...</p> - <h4 id="simple-list-item-3">Item 3</h4> - <p>...</p> - <h4 id="simple-list-item-4">Item 4</h4> - <p>...</p> - <h4 id="simple-list-item-5">Item 5</h4> - <p>...</p> + <div class="col-8"> + <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0"> + <h4 id="simple-list-item-1">Item 1</h4> + <p>...</p> + <h4 id="simple-list-item-2">Item 2</h4> + <p>...</p> + <h4 id="simple-list-item-3">Item 3</h4> + <p>...</p> + <h4 id="simple-list-item-4">Item 4</h4> + <p>...</p> + <h4 id="simple-list-item-5">Item 5</h4> + <p>...</p> + </div> </div> </div> ``` |