Navbar
Dokuméntasi sareng conto pikeun Bootstrap anu kuat, lulugu navigasi responsif, navbar. Ngawengku pangrojong pikeun branding, navigasi, collapse plugin, sareng seueur deui.
Kumaha gawéna
Ieu naon anu anjeun kedah terang sateuacan ngamimitian navbar:
- Navbars merlukeun hiji wrapping
.navbar
kalawan.navbar-expand{-sm|-md|-lg|-xl}
pikeun responsif collapsing jeung kelas skéma warna . - Navbars sareng eusina cairan sacara standar. Paké peti pilihan pikeun ngawatesan rubak horizontal maranéhanana.
- Anggo kelas utilitas jarak sareng fleksibel pikeun ngatur jarak sareng alignment dina navbar.
- Navbars responsif sacara standar, tapi anjeun bisa kalayan gampang ngaropea aranjeunna pikeun ngarobah éta. Paripolah responsif gumantung kana plugin Collapse JavaScript urang.
- Navbars disumputkeun sacara standar nalika nyitak. Maksakeun aranjeunna dicitak ku cara nambihan
.d-print
kana.navbar
. Tempo kelas utiliti tampilan . - Pastikeun diakses ku ngagunakeun
<nav>
unsur atawa, lamun ngagunakeun unsur nu leuwih umum kayaning a<div>
, tambahkeun arole="navigation"
ka unggal navbar pikeun eksplisit ngaidentipikasi eta salaku wewengkon Landmark pikeun pamaké téknologi assistive.
prefers-reduced-motion
pamundut média. Tempo
bagian gerak ngurangan tina dokuméntasi aksés kami .
Eusi anu dirojong
Navbars hadir kalayan dukungan anu diwangun pikeun sakeupeul subkomponén. Milih ti handap sakumaha diperlukeun:
.navbar-brand
pikeun perusahaan, produk, atanapi nami proyék anjeun..navbar-nav
pikeun navigasi anu jangkung sareng hampang (kalebet dukungan pikeun turunna)..navbar-toggler
pikeun dianggo sareng plugin runtuh kami sareng paripolah toggling navigasi anu sanés ..form-inline
pikeun sagala bentuk kontrol jeung lampah..navbar-text
pikeun nambahkeun string vertikal dipuseurkeun téks..collapse.navbar-collapse
pikeun ngagolongkeun jeung nyumputkeun eusi navbar ku breakpoint indungna.
Ieu conto sadaya sub-komponén anu kalebet dina navbar téma lampu responsif anu otomatis runtuh dina lg
titik putus (badag).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Conto ieu nganggo warna ( bg-light
) sareng jarak ( my-2
,,, my-lg-0
) mr-sm-0
kelas my-sm-0
utiliti.
merek
The .navbar-brand
bisa dilarapkeun ka paling elemen, tapi anchor jalan pangalusna, sabab sababaraha elemen bisa merlukeun kelas utiliti atawa gaya custom.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
Nambahkeun gambar ka .navbar-brand
kamungkinan bakal salawasna merlukeun gaya custom atawa utilitas kana ukuran bener. Ieu sababaraha conto pikeun nunjukkeun.
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
Nav
Tumbu navigasi Navbar ngawangun on .nav
pilihan urang jeung kelas modifier sorangan sarta merlukeun pamakéan kelas toggler pikeun styling responsif ditangtoskeun. Navigasi dina navbars ogé bakal tumuwuh pikeun nempatan saloba spasi horizontal sabisa pikeun ngajaga eusi navbar anjeun aman Blok.
Aktif kaayaan-kalawan- .active
pikeun nunjukkeun kaca ayeuna bisa dilarapkeun langsung ka .nav-link
s atawa indungna saharita maranéhanana .nav-item
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">Disabled</a>
</li>
</ul>
</div>
</nav>
Sarta alatan kami ngagunakeun kelas pikeun navs kami, Anjeun bisa nyingkahan pendekatan dumasar-daftar sagemblengna lamun resep.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</nav>
Anjeun oge bisa make dropdowns dina navbar Anjeun. Menu dropdown merlukeun unsur wrapping pikeun positioning, jadi pastikeun ngagunakeun elemen misah tur nested pikeun .nav-item
tur .nav-link
ditémbongkeun di handap ieu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Bentuk
Teundeun rupa kadali formulir sareng komponenana dina navbar kalawan .form-inline
.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
Elemen anak .navbar
saharita pamakéan perenah flex sarta bakal dituna pikeun justify-content: space-between
. Paké Utiliti flex tambahan sakumaha diperlukeun pikeun nyaluyukeun kabiasaan ieu.
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
Grup input ogé dianggo:
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Rupa-rupa tombol dirojong salaku bagian tina formulir navbar ieu, teuing. Ieu ogé panginget hébat yén utiliti alignment nangtung bisa dipaké pikeun align elemen ukuran béda.
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
Téks
Navbars bisa ngandung bit téks kalayan bantuan .navbar-text
. Kelas ieu nyaluyukeun alignment nangtung sareng jarak horizontal pikeun senar téks.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Campur sareng cocog sareng komponén sareng utilitas sanés upami diperyogikeun.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>
Skéma warna
Theming navbar geus pernah geus gampang berkat kombinasi kelas theming na background-color
Utiliti. Pilih .navbar-light
pikeun dianggo sareng warna latar anu terang, atanapi .navbar-dark
kanggo warna latar anu poék. Teras, saluyukeun sareng .bg-*
utilitas.
<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>
Wadahna
Sanajan éta henteu diperlukeun, anjeun tiasa mungkus navbar dina hiji .container
puseur eta dina kaca. Atanapi anjeun tiasa nambihan wadah di jero .navbar
pikeun ngan ukur pusat eusi navbar luhur tetep atanapi statik .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Nalika wadahna aya dina navbar Anjeun, padding horizontal na dihapus dina breakpoints leuwih handap .navbar-expand{-sm|-md|-lg|-xl}
kelas Anjeun dieusian. Ieu mastikeun kami henteu ngagandakeun padding anu teu perlu dina viewports handap nalika navbar anjeun rubuh.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
panempatan
Anggo utilitas posisi kami pikeun nempatkeun navbar dina posisi non-statis. Pilih tina tetep ka luhur, tetep ka handap, atanapi nempel ka luhur (ngagulung sareng halamanna dugi ka luhur, teras tetep aya). Navbars tetep make position: fixed
, hartina aranjeunna nuju ditarik tina aliran normal tina DOM sarta bisa merlukeun CSS custom (misalna padding-top
dina <body>
) pikeun nyegah tumpang tindihna jeung elemen séjén.
Catet ogé yén .sticky-top
ngagunakeun position: sticky
, anu henteu dirojong sapinuhna dina unggal browser .
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
Ngagulung
Tambahkeun .navbar-nav-scroll
ka .navbar-collapse
(atawa sub-komponén navbar séjén) pikeun ngaktipkeun ngagulung nangtung dina eusi toggleable navbar rubuh. Sacara standar, ngagulung najong dina 75vh
(atawa 75% tina jangkungna viewport), tapi anjeun bisa override yén kalawan gaya inline atawa custom. Dina viewports badag nalika navbar dimekarkeun, eusi bakal némbongan sakumaha dina navbar standar.
Perhatikeun yén kabiasaan ieu hadir kalawan poténsi kalemahan - overflow
nalika setelan overflow-y: auto
(diperlukeun pikeun ngagulung eusi di dieu), overflow-x
sarua jeung auto
, nu bakal motong sababaraha eusi horizontal.
Ieu conto navbar anu nganggo .navbar-nav-scroll
, style="max-height: 100px;"
sareng sababaraha utilitas margin tambahan pikeun jarak anu optimal.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" role="button" data-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu">
<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">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
kabiasaan responsif
Navbars tiasa nganggo .navbar-toggler
, .navbar-collapse
, sareng .navbar-expand{-sm|-md|-lg|-xl}
kelas pikeun nangtukeun iraha eusina runtuh di tukangeun tombol. Dina kombinasi sareng utilitas anu sanés, anjeun tiasa sacara gampil milih nalika nunjukkeun atanapi nyumputkeun elemen khusus.
Pikeun navbars nu pernah ambruk, tambahkeun .navbar-expand
kelas on navbar nu. Pikeun navbars nu salawasna ambruk, ulah nambahkeun .navbar-expand
kelas nanaon.
Toggler
Toggler Navbar sacara standar kénca-kénca, tapi upami aranjeunna nuturkeun unsur duduluran sapertos a .navbar-brand
, aranjeunna bakal otomatis dijajarkeun ka katuhu jauh. Ngabalikeun markup anjeun bakal ngabalikeun panempatan toggler. Di handap ieu conto gaya toggle béda.
Kalawan henteu .navbar-brand
ditémbongkeun dina breakpoint pangleutikna:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Kalayan nami merek anu dipidangkeun di kénca sareng toggler di katuhu:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Kalayan toggler di kénca sareng nami merek di katuhu:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Eusi éksternal
Kadang anjeun hoyong nganggo plugin runtuhna pikeun memicu unsur wadahna pikeun eusi anu sacara stuktur linggih di luar .navbar
. Kusabab plugin urang jalan dina id
tur data-target
cocog, éta gampang dipigawé!
<div class="fixed-top">
<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">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
Lamun anjeun ngalakukeun ieu, kami nyarankeun kaasup JavaScript tambahan pikeun mindahkeun fokus programmatically kana wadahna lamun dibuka. Upami teu kitu, pangguna keyboard sareng pangguna téknologi pitulung sigana bakal sesah milarian eusi anu nembé diungkabkeun - khususna upami wadahna anu dibuka sateuacanna toggler dina struktur dokumén. Kami ogé nyarankeun pikeun mastikeun yén toggler gaduh aria-controls
atribut, nunjuk ka id
wadah eusi. Sacara téori, ieu ngamungkinkeun pamaké téknologi pitulung pikeun luncat langsung tina toggler kana wadahna anu dikontrol-tapi dukungan pikeun ieu ayeuna rada pareum.