Umuzingo
Mu buryo bwikora kuvugurura Bootstrap kugendana cyangwa gutondekanya amatsinda yibice ukurikije umwanya wizingo kugirango werekane umurongo urimo gukora muburyo bwo kureba.
Uburyo ikora
Umuzingo uhinduranya ibyiciro .activekuri ankeri ( <a>) mugihe ikintu hamwe na byerekanwe idna ankeri hrefcyerekanwe mubireba. Scrollspy ikoreshwa neza ifatanije na Bootstrap nav igizwe cyangwa urutonde rwitsinda , ariko kandi izakorana nibintu byose bya ankeri kurupapuro rwubu. Dore uko ikora.
-
Gutangira, umuzingo usaba ibintu bibiri: kugendagenda, itsinda ryurutonde, cyangwa urutonde rworoshye rwihuza, wongeyeho ikintu gishobora kuzunguruka. Igikoresho gishobora kuzunguruka gishobora kuba i
<body>cyangwa ikintu cyihariye hamwe na setiheightnaoverflow-y: scroll. -
Kuri kontineri ishobora kuzunguruka, ongeramo
data-bs-spy="scroll"kandidata-bs-target="#navId"nihehenavIdyihariyeidyo kugendana. Wemeze kandi gushiramo atabindex="0"kugirango wemeze kwinjira kuri clavier. -
Mugihe uzengurutsa kontineri "maneko",
.activeicyiciro cyongeweho kandi kivanwa kumurongo uhuza inzira. Ihuza rigomba kugiraidintego zikemuka, bitabaye ibyo birengagijwe. Kurugero,<a href="#home">home</a>hagomba guhura nibintu muri DOM nka<div id="home"></div> -
Intego yibintu bitagaragara izirengagizwa. Reba ibice bitagaragara .
Ingero
Navbar
Kuzenguruka agace kari munsi ya navbar hanyuma urebe impinduka zikora. Fungura menu yamanutse urebe ibintu byamanutse bigaragare kandi.
Umutwe wa mbere
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Umutwe wa kabiri
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Umutwe wa gatatu
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Umutwe wa kane
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Umutwe wa gatanu
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
<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">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</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 bg-light p-3 rounded-2" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>...</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>...</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>...</p>
</div>
Nested nav
Scrollspy nayo ikorana na .navs. Niba icyari .navari .active, ababyeyi bayo nabo bazaba .active. Kuzenguruka akarere kuruhande rwa navbar hanyuma urebe ibikorwa bihinduka.
Ingingo ya 1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Wibuke ko plugin ya JavaScript igerageza guhitamo ikintu cyiza mubishobora kugaragara. Intego nyinshi zigaragara za scrolllspy intego icyarimwe zishobora gutera ibibazo bimwe.
Ingingo 1-1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Wibuke ko plugin ya JavaScript igerageza guhitamo ikintu cyiza mubishobora kugaragara. Intego nyinshi zigaragara za scrolllspy intego icyarimwe zishobora gutera ibibazo bimwe.
Ingingo ya 1-2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Wibuke ko plugin ya JavaScript igerageza guhitamo ikintu cyiza mubishobora kugaragara. Intego nyinshi zigaragara za scrolllspy intego icyarimwe zishobora gutera ibibazo bimwe.
Ingingo ya 2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Wibuke ko plugin ya JavaScript igerageza guhitamo ikintu cyiza mubishobora kugaragara. Intego nyinshi zigaragara za scrolllspy intego icyarimwe zishobora gutera ibibazo bimwe.
Ingingo ya 3
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Wibuke ko plugin ya JavaScript igerageza guhitamo ikintu cyiza mubishobora kugaragara. Intego nyinshi zigaragara za scrolllspy intego icyarimwe zishobora gutera ibibazo bimwe.
Ingingo 3-1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Wibuke ko plugin ya JavaScript igerageza guhitamo ikintu cyiza mubishobora kugaragara. Intego nyinshi zigaragara za scrolllspy intego icyarimwe zishobora gutera ibibazo bimwe.
Ingingo ya 3-2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Wibuke ko plugin ya JavaScript igerageza guhitamo ikintu cyiza mubishobora kugaragara. Intego nyinshi zigaragara za scrolllspy intego icyarimwe zishobora gutera ibibazo bimwe.
<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" 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>
</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>
</div>
</div>
</div>
Andika itsinda
Scrollspy nayo ikorana na .list-groups. Kuzenguruka agace kari kuruhande rwurutonde hanyuma urebe impinduka zikora.
Ingingo ya 1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Ingingo ya 2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Ingingo ya 3
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Ingingo ya 4
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
<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 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>
Inanga yoroshye
Scrollspy ntabwo igarukira gusa kuri nav ibice hamwe nurutonde rwamatsinda, bityo izakora kubintu byose <a>byometse kumurongo winyandiko. Kuzenguruka akarere urebe .activeimpinduka zishuri.
Ingingo ya 1
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Ingingo ya 2
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Ingingo ya 3
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Ingingo ya 4
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
Ingingo ya 5
Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzunguruka no kumurika.
<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 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>
Ibintu bitagaragara
Intego yibintu bitagaragara izirengagizwa kandi ibintu bihuye nabyo ntibizakira .activeishuri. Ingero za Scrollspy zatangijwe mubitagaragara bitagaragara bizirengagiza ibintu byose bigenewe. Koresha refreshuburyo bwo kugenzura ibintu bigaragara iyo impfunyapfunyo igaragara.
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
Ikoreshwa
Binyuze mu biranga amakuru
Kugirango wongere byoroshye imyitwarire ya scrollspy kumurongo wawe wo hejuru, ongera kubintu ushaka kuneka data-bs-spy="scroll"(mubisanzwe ibi byaba aribyo <body>). Noneho ongeraho data-bs-targetikiranga hamwe idnizina cyangwa urwego rwizina ryababyeyi ikintu icyo aricyo cyose cya Bootstrap .nav.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Binyuze kuri JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Amahitamo
Nkuko amahitamo ashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript, urashobora kongeramo izina ryamahitamo data-bs-, nkuko biri data-bs-animation="{value}". Witondere guhindura ubwoko bwurubanza rwamahitamo kuva " ingamiya " kuri " kebab-urubanza " mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, koresha data-bs-custom-class="beautifier"aho data-bs-customClass="beautifier".
Nko muri Bootstrap 5.2.0, ibice byose bishyigikira igeragezwa ryibitse ryamakuru data-bs-configrishobora kubamo ibice byoroshye nkibikoresho bya JSON. Mugihe ikintu gifite data-bs-config='{"delay":0, "title":123}'nibiranga data-bs-title="456", agaciro kanyuma titlekazaba 456kandi amakuru yihariye aranga agaciro katanzwe kuri data-bs-config. Mubyongeyeho, amakuru ariho aranga arashobora kubika JSON indangagaciro nka data-bs-delay='{"show":0,"hide":150}'.
| Izina | Andika | Mburabuzi | Ibisobanuro |
|---|---|---|---|
rootMargin |
umugozi | 0px 0px -25% |
Guhuza Indorerezi ImiziMargin yemewe, mugihe ubara umwanya wizingo. |
smoothScroll |
boolean | false |
Gushoboza kuzunguruka neza mugihe umukoresha akanze kumurongo werekeza kuri ScrollSpy indorerezi. |
target |
umugozi, ikintu cya DOM | null |
Kugaragaza ikintu cyo gukoresha plugin ya Scrollspy. |
threshold |
array | [0.1, 0.5, 1] |
IntersectionObserver imbibi zemewe kwinjiza , mugihe ubara umwanya wizingo. |
Amahitamo Yataye agaciro
Kugeza kuri v5.1.3 twakoreshaga offset& methodamahitamo, ubu yataye agaciro kandi asimburwa na rootMargin. Kugirango ugumane inyuma guhuza, tuzakomeza gusesengura ibyatanzwe offset, rootMarginariko iyi mikorere izakurwa muri v6 .
Uburyo
| Uburyo | Ibisobanuro |
|---|---|
dispose |
Gusenya ikintu cyizingo. (Kuraho amakuru yabitswe kubintu bya DOM) |
getInstance |
Uburyo buhamye bwo kubona imizingo yerekana ibintu bifitanye isano na DOM. |
getOrCreateInstance |
Uburyo buhamye bwo kubona imizingo yerekana ibintu bifitanye isano na DOM, cyangwa gukora bundi bushya mugihe bitatangijwe. |
refresh |
Mugihe wongeyeho cyangwa ukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya. |
Dore urugero ukoresheje uburyo bushya:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Ibyabaye
| Icyabaye | Ibisobanuro |
|---|---|
activate.bs.scrollspy |
Ibirori birasa kumuzingo igihe cyose inanga ikozwe na muzingo. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})