Navbar
Documentation sy ohatra ho an'ny lohatenin'ny fitetezana mahery vaika an'i Bootstrap, ny navbar. Ahitana fanohanana ho an'ny marika, fitetezana, sy ny maro hafa, ao anatin'izany ny fanohanana ny plugin rava.
Ny fomba fiasa
Ity ny zavatra tokony ho fantatrao alohan'ny hanombohan'ny navbar:
- Ny Navbars dia mila famonosana
.navbar
miaraka.navbar-expand{-sm|-md|-lg|-xl|-xxl}
amin'ny kilasin'ny firodanan'ny fandokoana sy loko . - Ny Navbars sy ny ao anatiny dia tsy misy dikany amin'ny alàlan'ny default. Hanova ny fitoeran -javatra mba hamerana ny sakan'ny marindrano amin'ny fomba samihafa.
- Ampiasao ny kilasin'ny fampandehanana elanelana sy flex mba hifehezana ny elanelana sy ny fampifanarahana ao anatin'ny navbars.
- Ny Navbars dia mamaly amin'ny alàlan'ny default, saingy azonao atao ny manova azy ireo mora foana hanovana izany. Miankina amin'ny plugin Collapse JavaScript ny fitondran-tena mamaly.
- Ataovy azo antoka ny fidirana amin'ny alàlan'ny fampiasana
<nav>
singa iray na, raha mampiasa singa mahazatra kokoa toy ny<div>
, ampio arole="navigation"
isaky ny navbar mba hamantarana azy mazava ho faritra manan-tantara ho an'ny mpampiasa ny teknolojia fanampiana. - Tondroy ny singa amin'izao fotoana izao amin'ny alàlan'ny fampiasana
aria-current="page"
ho an'ny pejy ankehitriny naaria-current="true"
ho an'ny singa ankehitriny ao anaty andiana.
prefers-reduced-motion
fangatahan'ny haino aman-jery ny fiantraikan'io singa io. Jereo ny
fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .
Votoaty tohanana
Ny Navbars dia miaraka amin'ny fanohanana naorina ho an'ny singa kely vitsivitsy. Mifidiana amin'ireto manaraka ireto raha ilaina:
.navbar-brand
ho an'ny orinasanao, vokatra, na anaran'ny tetikasa..navbar-nav
ho an'ny fitetezana avo lenta sy maivana (anisan'izany ny fanohanana ny fidina)..navbar-toggler
ho ampiasaina miaraka amin'ny plugin fandrotsahana sy ny fitondran-tena mandika ny fitetezana hafa .- Flex sy spacing utility ho an'ny fanaraha-maso sy hetsika rehetra.
.navbar-text
mba hanampiana tady mitsangana afovoany lahatsoratra..collapse.navbar-collapse
ho an'ny fanakambanana sy fanafenana ny votoatin'ny navbar amin'ny alàlan'ny teboka fiatoana ray aman-dreny.- Manampia safidy
.navbar-scroll
hametrahanamax-height
sy hanoratanao atiny navbar nitarina .
Ity misy ohatra iray amin'ireo singa kely rehetra tafiditra ao amin'ny navbar misy lohahevitra mazava mamaly izay mirodana ho azy eo amin'ny teboka lg
(lehibe).
<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>
Ity ohatra ity dia mampiasa kilasy fampiasa fototra ( bg-light
) sy elanelana ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
).
Marika
Azo .navbar-brand
ampiharina amin'ny ankamaroan'ny singa, fa ny vatofantsika dia miasa tsara indrindra, satria ny singa sasany dia mety mitaky kilasy fampiasa na fomba fanao mahazatra.
Text
Ampio ny lahatsoratrao ao anatin'ny singa iray miaraka amin'ny .navbar-brand
kilasy.
<!-- 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>
SARY
Azonao atao ny manolo ny lahatsoratra ao .navbar-brand
anatin'ny <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>
Sary sy lahatsoratra
Azonao atao koa ny mampiasa fitaovana fanampiny hanampiana sary sy lahatsoratra miaraka. Mariho ny fanampin'ny .d-inline-block
sy .align-text-top
eo amin'ny <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
Ny rohin'ny fitetezana Navbar dia manorina amin'ny safidintsika .nav
miaraka amin'ny kilasy modifier-ny manokana ary mitaky ny fampiasana kilasin'ny toggler ho an'ny styling mifanaraka tsara. Ny fitetezana ao amin'ny navbars dia hitombo ihany koa mba hibodo toerana marindrano betsaka araka izay azo atao mba hitazonana ny atiny navbar ho azo antoka.
Ampio ny .active
kilasy .nav-link
hanondro ny pejy ankehitriny.
Mariho fa tokony hampidirinao aria-current
amin'ny 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>
Ary satria mampiasa kilasy ho an'ny navs izahay, azonao atao ny misoroka ny fomba fiasa mifototra amin'ny lisitra tanteraka raha tianao.
<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>
Azonao atao koa ny mampiasa dropdowns ao amin'ny navbaro. Ny menio midina dia mila singa famonosana ho an'ny fametrahana, koa aoka ho azo antoka ny hampiasa singa misaraka sy misy akany ho an'ny .nav-item
sy .nav-link
araka ny aseho eto ambany.
<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>
teny
Asio fanaraha-maso sy singa isan-karazany ao anaty 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>
Ireo singa ankizy avy hatrany amin'ny .navbar
fampiasana fandrindrana flex ary ho default amin'ny justify-content: space-between
. Mampiasà fitaovana flex fanampiny raha ilaina hanitsiana io fihetsika io.
<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>
Miasa ihany koa ny vondrona fampidirana. Raha endrika iray manontolo na endrika iray ny navbar-nao, dia azonao atao ny mampiasa ilay <form>
singa ho fitoeran-javatra ary mitahiry HTML sasany.
<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>
Ny bokotra isan-karazany dia tohanana ao anatin'ireo endrika navbar ireo ihany koa. Ity dia fampahatsiahivana lehibe ihany koa fa ny fitaovana fampifanarahana mitsangana dia azo ampiasaina hampifanaraka ireo singa samihafa.
<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
Ny Navbars dia mety ahitana sombin-tsoratra miaraka amin'ny fanampian'ny .navbar-text
. Ity kilasy ity dia manitsy ny firindrana mitsangana sy ny elanelana marindrano ho an'ny tady lahatsoratra.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Afangaro ary ampifanaraho amin'ny singa sy fitaovana hafa raha ilaina.
<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>
Tetika loko
Ny fametrahana ny navbar dia tsy mora kokoa noho ny fampifangaroana kilasy sy kojakoja momba ny lohahevitra background-color
. Misafidiana amin'ny .navbar-light
ampiasaina amin'ny loko ambadika maivana, na .navbar-dark
amin'ny loko maizina. Avy eo, ampifanaraho amin'ny .bg-*
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>
fitoeran
Na dia tsy ilaina aza izany dia azonao atao ny mametaka navbar iray .container
mba hampifantoka azy amin'ny pejy iray-na dia mariho fa mbola ilaina ny fitoeran-javatra anatiny. Na azonao atao ny manampy kaontenera ao anatiny .navbar
mba hampifantoka ny votoatin'ny navbar ambony raikitra na static .
<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>
Ampiasao ny iray amin'ireo kaontenera mandray andraikitra hanovana ny haben'ny votoatin'ny navbaro.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
fametrahana
Ampiasao ny fampiasanay toerana hametrahana ny navbar amin'ny toerana tsy mitongilana. Misafidiana avy amin'ny raikitra mankany ambony, raikitra mankany ambany, na mipetaka amin'ny tampony (horonana miaraka amin'ny pejy mandra-pahatongany eny ambony, dia mijanona eo). Navbars raikitra dia mampiasa position: fixed
, midika izany fa nesorina tamin'ny fikorianan'ny DOM mahazatra izy ireo ary mety mitaky CSS manokana (oh, padding-top
eo amin'ny <body>
) mba hisorohana ny fifandonana amin'ny singa hafa.
Mariho koa fa ny .sticky-top
fampiasana position: sticky
, izay tsy tohanana tanteraka amin'ny navigateur rehetra .
<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>
Scralling
Ampio .navbar-nav-scroll
amin'ny .navbar-nav
(na zana-tsipìka navbar hafa) mba ahafahana mivezivezy mitsangana ao anatin'ny atiny azo toggle amin'ny navbar nirodana. Amin'ny alàlan'ny default, miditra amin'ny 75vh
(na 75% amin'ny haavon'ny viewport) ny horonan-taratasy, saingy azonao atao ny manafoana izany amin'ny fananana CSS eo an-toerana --bs-navbar-height
na fomba fanao mahazatra. Any amin'ny seranan-tsambo lehibe kokoa rehefa mivelatra ny navbar dia hiseho toy ny ao amin'ny navbar mahazatra ny atiny.
Mariho fa ity fihetsika ity dia miaraka amin'ny mety ho tsy fahampiana amin'ny overflow
-rehefa mametraka overflow-y: auto
(ilaina ny manodina ny atiny eto), overflow-x
dia mitovy amin'ny auto
, izay hanapaka votoaty mitsivalana.
Ity misy ohatra navbar mampiasa .navbar-nav-scroll
miaraka amin'ny style="--bs-scroll-height: 100px;"
, miaraka amin'ny fampiasana margin fanampiny ho an'ny elanelana tsara indrindra.
<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>
Fihetsika mamaly
Navbars dia afaka mampiasa .navbar-toggler
, .navbar-collapse
, ary .navbar-expand{-sm|-md|-lg|-xl|-xxl}
kilasy hamaritana hoe rahoviana ny atiny no mirodana ao ambadiky ny bokotra iray. Miaraka amin'ny fitaovana hafa, azonao atao ny misafidy mora foana ny fotoana hanehoana na hanafenana singa manokana.
Ho an'ny navbar izay tsy mirodana mihitsy, ampio ny .navbar-expand
kilasy amin'ny navbar. Ho an'ny navbar izay mirodana foana, aza ampiana .navbar-expand
kilasy.
Toggler
Navbar togglers dia miankavia amin'ny alàlan'ny default, fa raha manaraka singa iray amin'ny mpiray tam-po toy ny a .navbar-brand
, dia ho tonga amin'ny farany havanana izy ireo. Ny famadihana ny marikao dia hamadika ny fametrahana ny toggler. Ireto ambany ireto ny ohatra amin'ny karazana toggle samihafa.
Tsy .navbar-brand
aseho amin'ny teboka faran'izay kely indrindra:
<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>
Miaraka amin'ny anarana marika aseho eo ankavia ary toggler eo ankavanana:
<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>
Miaraka amin'ny toggler eo ankavia ary anarana marika eo ankavanana:
<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>
Votoaty ivelany
Indraindray ianao te-hampiasa ny plugin collapse hanetsika singa fitoeran-javatra ho an'ny atiny izay mipetraka ivelan'ny .navbar
. Satria miasa amin'ny id
sy data-bs-target
mifanandrify ny plugin-nay, dia vita izany!
<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>
Rehefa manao izany ianao dia manoro hevitra ny hampidirana JavaScript fanampiny mba hamindra ny fifantohana amin'ny programa amin'ny fitoeran-javatra rehefa misokatra. Raha tsy izany, dia mety ho sarotra amin'ny mpampiasa klavier sy ny mpampiasa ny teknolojia manampy ny fitadiavana ny atiny vao nambara - indrindra raha ny fitoeran'entana nosokafana dia tonga alohan'ny mpanodina ao amin'ny firafitry ny antontan-taratasy. Manoro hevitra ihany koa izahay mba hahazoana antoka fa manana ny aria-controls
toetra ny toggler, manondro ny id
fitoeran'ny atiny. Amin'ny teoria dia ahafahan'ny mpampiasa teknolojia manampy hitsambikina mivantana avy amin'ny toggler mankany amin'ny fitoeran-javatra feheziny izany-saingy tsy misy dikany ny fanohanana izany amin'izao fotoana izao.
Sass
hiovaova
$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;
manome fitoerana
Ny kilasy navbar mamaly / mirodana (oh, .navbar-expand-lg
) dia mitambatra amin'ny $breakpoints
sari-tany ary avoaka amin'ny alalan'ny loop in 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;
}
}
}
}
}