mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 19:31:35 +02:00
Code Issues Releases Wiki Activity

Docs: fix some ScrollSpy HTML copyable codes (#36672)

Browse Source
This commit is contained in:
Julien Déramond
2022-07-05 13:45:30 +02:00
committed by GitHub
parent c1813ef2bc
commit 547aa099ea
1 changed files with 86 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
site/content/docs/5.2/components/scrollspy.md
View File

@@ -162,7 +162,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</div> </div>
```html ```html
<div class="col-4"> <div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end"> <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<nav class="nav nav-pills flex-column"> <nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a> <a class="nav-link" href="#item-1">Item 1</a>
@@ -178,9 +179,9 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</nav> </nav>
</nav> </nav>
</nav> </nav>
</div> </div>
<div class="col-8"> <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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1"> <div id="item-1">
<h4>Item 1</h4> <h4>Item 1</h4>
@@ -211,6 +212,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
<p>...</p> <p>...</p>
</div> </div>
</div> </div>
</div>
</div> </div>
``` ```
@@ -244,15 +246,16 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
</div> </div>
```html ```html
<div class="col-4"> <div class="row">
<div class="col-4">
<div id="list-example" class="list-group"> <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-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-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-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div> </div>
</div> </div>
<div class="col-8"> <div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0"> <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> <h4 id="list-item-1">Item 1</h4>
<p>...</p> <p>...</p>
@@ -263,6 +266,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
<h4 id="list-item-4">Item 4</h4> <h4 id="list-item-4">Item 4</h4>
<p>...</p> <p>...</p>
</div> </div>
</div>
</div> </div>
``` ```
@@ -299,17 +303,18 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
</div> </div>
```html ```html
<div class="col-4"> <div class="row">
<div id="list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center"> <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-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-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-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-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a> <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div> </div>
</div> </div>
<div class="col-8"> <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"> <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> <h4 id="simple-list-item-1">Item 1</h4>
<p>...</p> <p>...</p>
<h4 id="simple-list-item-2">Item 2</h4> <h4 id="simple-list-item-2">Item 2</h4>
@@ -321,6 +326,7 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
<h4 id="simple-list-item-5">Item 5</h4> <h4 id="simple-list-item-5">Item 5</h4>
<p>...</p> <p>...</p>
</div> </div>
</div>
</div> </div>
``` ```