mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
Docs: quick fixes for HTML (#36395)
* Using the new helper in the doc * Remove input from `Tab` access * Change scrollspy code examples * Reordering tables for JS * Fix for parcel file * Center align all the code example texts in layout * Alphabetical reorder the helpers
This commit is contained in:
Louis-Maxime Piton
committed by
GitHub
GitHub
parent
73e45ee36c
commit
8959bf3f0b
@@ -62,7 +62,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
||||
</div>
|
||||
|
||||
```html
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3">
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
@@ -82,7 +82,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
@@ -162,51 +162,54 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
||||
</div>
|
||||
|
||||
```html
|
||||
<nav id="navbar-example3" class="navbar bg-light flex-column align-items-stretch p-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<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 data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" 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>
|
||||
```
|
||||
@@ -241,21 +244,25 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
|
||||
</div>
|
||||
|
||||
```html
|
||||
<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="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 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>
|
||||
```
|
||||
|
||||
@@ -292,21 +299,28 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div id="list-example" class="d-flex flex-column">
|
||||
<a href="#item-1">Item 1</a>
|
||||
<a href="#item-2">Item 2</a>
|
||||
<a href="#item-3">Item 3</a>
|
||||
<a href="#item-4">Item 4</a>
|
||||
<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>
|
||||
</div>
|
||||
<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="item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-4">Item 4</h4>
|
||||
<p>...</p>
|
||||
<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>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -362,10 +376,10 @@ To keep backwards compatibility, we will continue to parse a given `offset` to `
|
||||
{{< bs-table "table" >}}
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `refresh` | When adding or removing elements in the DOM, you'll need to call the refresh method. |
|
||||
| `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) |
|
||||
| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element |
|
||||
| `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn't initialized. |
|
||||
| `refresh` | When adding or removing elements in the DOM, you'll need to call the refresh method. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
Here's an example using the refresh method:
|
||||
|
||||
Reference in New Issue
Block a user