Navbar
Dokumentasyon at mga halimbawa para sa makapangyarihan, tumutugon na header ng nabigasyon ng Bootstrap, ang navbar. May kasamang suporta para sa pagba-brand, pag-navigate, at higit pa, kabilang ang suporta para sa aming collapse plugin.
Paano ito gumagana
Narito ang kailangan mong malaman bago magsimula sa navbar:
- Ang mga Navbar ay nangangailangan ng isang pambalot para
.navbar
sa.navbar-expand{-sm|-md|-lg|-xl|-xxl}
tumutugon na pagbagsak at mga klase ng scheme ng kulay. - Ang mga Navbar at ang kanilang mga nilalaman ay tuluy-tuloy bilang default. Baguhin ang lalagyan upang limitahan ang kanilang pahalang na lapad sa iba't ibang paraan.
- Gamitin ang aming spacing at flex utility class para sa pagkontrol ng spacing at alignment sa loob ng mga navbar.
- Ang mga Navbar ay tumutugon bilang default, ngunit madali mong mababago ang mga ito upang baguhin iyon. Nakadepende ang tumutugon na gawi sa aming Collapse JavaScript plugin.
- Tiyakin ang pagiging naa-access sa pamamagitan ng paggamit ng
<nav>
elemento o, kung gumagamit ng mas generic na elemento tulad ng<div>
, magdagdag ng arole="navigation"
sa bawat navbar upang tahasang tukuyin ito bilang isang landmark na rehiyon para sa mga gumagamit ng mga pantulong na teknolohiya. - Ipahiwatig ang kasalukuyang item sa pamamagitan ng paggamit
aria-current="page"
para sa kasalukuyang pahina oaria-current="true"
para sa kasalukuyang item sa isang set.
prefers-reduced-motion
query ng media. Tingnan ang
seksyon ng pinababang paggalaw ng aming dokumentasyon ng accessibility .
Sinusuportahang nilalaman
Ang mga Navbar ay may kasamang built-in na suporta para sa isang dakot ng mga sub-bahagi. Pumili sa mga sumusunod kung kinakailangan:
.navbar-brand
para sa iyong kumpanya, produkto, o pangalan ng proyekto..navbar-nav
para sa isang buong taas at magaan na nabigasyon (kabilang ang suporta para sa mga dropdown)..navbar-toggler
para gamitin sa aming collapse plugin at iba pang gawi sa pag- toggling ng nabigasyon .- Flex at spacing utilities para sa anumang form na kontrol at pagkilos.
.navbar-text
para sa pagdaragdag ng patayong nakasentro na mga string ng teksto..collapse.navbar-collapse
para sa pagpapangkat at pagtatago ng mga nilalaman ng navbar sa pamamagitan ng isang breakpoint ng magulang.- Magdagdag ng opsyonal
.navbar-scroll
upang magtakdamax-height
at mag- scroll ng pinalawak na nilalaman ng navbar .
Narito ang isang halimbawa ng lahat ng sub-components na kasama sa isang tumutugon na light-themed navbar na awtomatikong nag-collapse sa lg
(malaking) breakpoint.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Ang halimbawang ito ay gumagamit ng background ( bg-light
) at spacing ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) utility classes.
Tatak
Ang .navbar-brand
maaaring ilapat sa karamihan ng mga elemento, ngunit ang isang anchor ay pinakamahusay na gumagana, dahil ang ilang mga elemento ay maaaring mangailangan ng mga klase ng utility o mga custom na istilo.
Text
Idagdag ang iyong teksto sa loob ng isang elemento sa .navbar-brand
klase.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
Imahe
Maaari mong palitan ang teksto sa loob ng .navbar-brand
isang <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
Larawan at teksto
Maaari mo ring gamitin ang ilang karagdagang mga kagamitan upang magdagdag ng larawan at teksto nang sabay. Pansinin ang pagdaragdag ng .d-inline-block
at .align-text-top
sa <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
Bumubuo ang mga link sa navigation ng Navbar sa aming .nav
mga opsyon gamit ang sarili nilang modifier class at nangangailangan ng paggamit ng mga toggler class para sa tamang tumutugon na istilo. Ang pag-navigate sa mga navbar ay lalago din upang sakupin ang mas maraming pahalang na espasyo hangga't maaari upang panatilihing ligtas na nakahanay ang iyong mga nilalaman ng navbar.
Idagdag ang .active
klase .nav-link
upang ipahiwatig ang kasalukuyang pahina.
Pakitandaan na dapat mo ring idagdag ang aria-current
attribute sa active .nav-link
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
At dahil gumagamit kami ng mga klase para sa aming mga nav, maiiwasan mo nang buo ang diskarteng nakabatay sa listahan kung gusto mo.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
Maaari mo ring gamitin ang mga dropdown sa iyong navbar. Ang mga dropdown na menu ay nangangailangan ng wrapping element para sa pagpoposisyon, kaya siguraduhing gumamit ng hiwalay at nested na elemento para sa .nav-item
at .nav-link
tulad ng ipinapakita sa ibaba.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Mga porma
Maglagay ng iba't ibang mga kontrol sa form at mga bahagi sa loob ng isang navbar:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Ang mga agarang elemento ng bata ng .navbar
paggamit ng flex layout at magiging default sa justify-content: space-between
. Gumamit ng mga karagdagang flex utilities kung kinakailangan upang ayusin ang gawi na ito.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
Gumagana rin ang mga pangkat ng input. Kung ang iyong navbar ay isang buong form, o karamihan ay isang form, maaari mong gamitin ang <form>
elemento bilang lalagyan at mag-save ng ilang HTML.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Sinusuportahan din ang iba't ibang mga button bilang bahagi ng mga form na ito ng navbar. Isa rin itong magandang paalala na ang mga utility ng vertical alignment ay maaaring gamitin upang ihanay ang iba't ibang laki ng mga elemento.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Text
Ang mga Navbar ay maaaring maglaman ng mga piraso ng teksto sa tulong ng .navbar-text
. Inaayos ng klase na ito ang vertical alignment at horizontal spacing para sa mga string ng text.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Paghaluin at pagtugmain ang iba pang mga bahagi at kagamitan kung kinakailangan.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
Mga scheme ng kulay
Ang pag-theming sa navbar ay hindi kailanman naging mas madali salamat sa kumbinasyon ng mga klase sa pag-theming at mga background-color
utility. Pumili mula .navbar-light
sa para sa paggamit sa mga magagaan na kulay ng background, o .navbar-dark
para sa madilim na mga kulay ng background. Pagkatapos, i-customize gamit ang .bg-*
mga utility.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
Mga lalagyan
Bagama't hindi ito kinakailangan, maaari mong balutin ang isang navbar sa isang .container
upang igitna ito sa isang pahina–bagama't tandaan na ang isang panloob na lalagyan ay kinakailangan pa rin. O maaari kang magdagdag ng lalagyan sa loob ng .navbar
upang isentro lamang ang mga nilalaman ng isang nakapirming o static na tuktok na navbar .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
Gamitin ang alinman sa mga tumutugong container para baguhin kung gaano kalawak ang ipinakita sa iyong navbar.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Paglalagay
Gamitin ang aming mga kagamitan sa posisyon upang ilagay ang mga navbar sa mga hindi static na posisyon. Pumili mula sa naayos hanggang sa itaas, naayos hanggang sa ibaba, o nakadikit sa itaas (nag-scroll gamit ang pahina hanggang sa maabot nito ang tuktok, pagkatapos ay mananatili doon). Ang mga nakapirming navbar ay gumagamit ng position: fixed
, ibig sabihin ay nakuha ang mga ito mula sa normal na daloy ng DOM at maaaring mangailangan ng custom na CSS (hal., padding-top
sa <body>
) upang maiwasan ang pag-overlap sa iba pang mga elemento.
Tandaan din na .sticky-top
gumagamit ng position: sticky
, na hindi ganap na sinusuportahan sa bawat browser .
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
Pag-scroll
Idagdag .navbar-nav-scroll
sa isang .navbar-nav
(o iba pang sub-component ng navbar) upang paganahin ang patayong pag-scroll sa loob ng mga toggleable na nilalaman ng isang collapsed navbar. Bilang default, ang pag-scroll ay nagsisimula sa 75vh
(o 75% ng taas ng viewport), ngunit maaari mong i-override iyon gamit ang lokal na CSS na custom na property --bs-navbar-height
o custom na mga istilo. Sa mas malalaking viewport kapag pinalawak ang navbar, lalabas ang content tulad ng ginagawa nito sa default na navbar.
Pakitandaan na ang pag-uugaling ito ay may potensyal na disbentaha ng overflow
—kapag ang pagtatakda overflow-y: auto
(kinakailangan upang mag-scroll ng nilalaman dito), overflow-x
ay katumbas ng auto
, na mag-crop ng ilang pahalang na nilalaman.
Narito ang isang halimbawa ng navbar gamit .navbar-nav-scroll
ang style="--bs-scroll-height: 100px;"
, na may ilang karagdagang margin utility para sa pinakamainam na espasyo.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Mga tumutugon na pag-uugali
Maaaring gamitin ng mga Navbar ang .navbar-toggler
, .navbar-collapse
, at .navbar-expand{-sm|-md|-lg|-xl|-xxl}
mga klase upang matukoy kung kailan nag-collapse ang kanilang nilalaman sa likod ng isang button. Sa kumbinasyon ng iba pang mga utility, madali mong mapipili kung kailan ipapakita o itatago ang mga partikular na elemento.
Para sa mga navbar na hindi kailanman bumagsak, idagdag ang .navbar-expand
klase sa navbar. Para sa mga navbar na palaging nagko-collapse, huwag magdagdag ng anumang .navbar-expand
klase.
Toggler
Ang mga toggler ng Navbar ay naka-left-align bilang default, ngunit kung susundin nila ang elementong magkakapatid tulad ng .navbar-brand
, awtomatiko silang maili-align sa dulong kanan. Kapag binaligtad ang iyong markup, mababaligtad ang pagkakalagay ng toggler. Nasa ibaba ang mga halimbawa ng iba't ibang istilo ng toggle.
Nang walang .navbar-brand
ipinapakita sa pinakamaliit na breakpoint:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Sa isang pangalan ng tatak na ipinapakita sa kaliwa at toggler sa kanan:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
May toggler sa kaliwa at brand name sa kanan:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Panlabas na nilalaman
Minsan gusto mong gamitin ang collapse plugin upang mag-trigger ng isang elemento ng container para sa content na structurally nakaupo sa labas ng .navbar
. Dahil ang aming plugin ay gumagana sa id
at data-bs-target
tumutugma, iyon ay madaling gawin!
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
Kapag ginawa mo ito, inirerekumenda namin ang pagsama ng karagdagang JavaScript upang ilipat ang focus sa programmatically sa container kapag binuksan ito. Kung hindi, ang mga gumagamit ng keyboard at mga gumagamit ng mga teknolohiyang pantulong ay malamang na mahihirapang hanapin ang bagong nahayag na nilalaman - lalo na kung ang container na binuksan ay nauuna sa toggler sa istraktura ng dokumento. Inirerekomenda din namin na tiyaking may aria-controls
katangian ang toggler, na tumuturo sa id
lalagyan ng nilalaman. Sa teorya, binibigyang-daan nito ang mga gumagamit ng pantulong na teknolohiya na direktang tumalon mula sa toggler patungo sa lalagyan na kinokontrol nito–ngunit ang suporta para dito ay kasalukuyang medyo tagpi-tagpi.
Sass
Mga variable
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
Loop
Ang tumutugon na navbar expand/collapse classes (hal, .navbar-expand-lg
) ay pinagsama sa $breakpoints
mapa at nabuo sa pamamagitan ng isang loop sa scss/_navbar.scss
.
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
}
}
}
}