mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-30 22:52:24 +01:00
parent
24130a4e63
commit
25579aad7c
@ -12,7 +12,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
|
|||||||
|
|
||||||
- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `<body>` or a custom element with a set `height` and `overflow-y: scroll`.
|
- To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `<body>` or a custom element with a set `height` and `overflow-y: scroll`.
|
||||||
|
|
||||||
- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. Be sure to also include a `tabindex="0"` to ensure keyboard access.
|
- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. If there is no focusable element inside the element, be sure to also include a `tabindex="0"` to ensure keyboard access.
|
||||||
|
|
||||||
- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`
|
- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
{{ define "body_override" }}<body tabindex="0"{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
|
{{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||||
<aside class="bd-sidebar">
|
<aside class="bd-sidebar">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user