Navbar
Dokuméntasi sareng conto pikeun Bootstrap anu kuat, lulugu navigasi responsif, navbar. Ngawengku dukungan pikeun branding, navigasi, sareng seueur deui, kalebet dukungan pikeun plugin runtuh kami.
Kumaha gawéna
Ieu naon anu anjeun kedah terang sateuacan ngamimitian navbar:
- Navbars merlukeun hiji wrapping
.navbar
kalawan.navbar-expand{-sm|-md|-lg|-xl|-xxl}
pikeun responsif collapsing jeung kelas skéma warna . - Navbars sareng eusina cairan sacara standar. Robah wadahna pikeun ngawatesan lebar horisontal ku cara anu béda.
- 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.
- 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. - Nunjukkeun item ayeuna ku cara ngagunakeun
aria-current="page"
pikeun kaca ayeuna atawaaria-current="true"
keur item ayeuna dina susunan.
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 .- Utiliti Flex sareng jarak pikeun sagala bentuk kontrol sareng tindakan.
.navbar-text
pikeun nambahkeun string vertikal dipuseurkeun téks..collapse.navbar-collapse
pikeun ngagolongkeun jeung nyumputkeun eusi navbar ku breakpoint indungna.- Tambahkeun pilihan
.navbar-scroll
pikeun nyetélmax-height
tur ngagulung eusi navbar dimekarkeun .
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">
<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>
Conto ieu ngagunakeun latar tukang ( bg-light
) jeung spasi ( my-2
,,, my-lg-0
) me-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.
Téks
Tambahkeun téks anjeun dina hiji unsur jeung .navbar-brand
kelas.
<!-- 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>
Gambar
Anjeun tiasa ngagentos téks dina éta .navbar-brand
kalayan <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>
Gambar jeung téks
Anjeun oge bisa make sababaraha utiliti tambahan pikeun nambahkeun hiji gambar jeung téks dina waktos anu sareng. Perhatikeun tambahan .d-inline-block
na .align-text-top
dina <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
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.
Tambahkeun .active
kelas .nav-link
pikeun nunjukkeun kaca ayeuna.
Punten dicatet yén anjeun ogé kedah nambihan aria-current
atribut dina aktip .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>
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">
<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>
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">
<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>
Bentuk
Tempatkeun rupa-rupa kadali formulir sareng komponén dina 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>
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">
<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>
Grup input ogé dianggo. Mun navbar anjeun mangrupa sakabéh formulir, atawa lolobana formulir a, anjeun tiasa nganggo <form>
unsur salaku wadahna tur nyimpen sababaraha 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>
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="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>
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">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
Campur sareng cocog sareng komponén sareng utilitas sanés upami diperyogikeun.
<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>
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
Sanaos henteu diperyogikeun, anjeun tiasa ngabungkus navbar dina a .container
pikeun dipuseurkeun kana halaman-sanaos dicatet yén wadah jero masih diperyogikeun. 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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
Anggo salah sahiji wadah anu responsif pikeun ngarobih sabaraha lebar eusi dina navbar anjeun dibere.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<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">
<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>
Ngagulung
Tambahkeun .navbar-nav-scroll
ka .navbar-nav
(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 nu mibanda sipat custom CSS lokal --bs-navbar-height
atawa gaya 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="--bs-scroll-height: 100px;"
sareng sababaraha utilitas margin tambahan pikeun jarak anu optimal.
<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>
kabiasaan responsif
Navbars tiasa nganggo .navbar-toggler
, .navbar-collapse
, sareng .navbar-expand{-sm|-md|-lg|-xl|-xxl}
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">
<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>
Kalayan nami merek anu dipidangkeun di kénca sareng toggler di katuhu:
<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>
Kalayan toggler di kénca sareng nami merek di katuhu:
<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>
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-bs-target
cocog, éta gampang dipigawé!
<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>
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.
Sass
Variabel
$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;
Gelung
navbar responsif dilegakeun / runtuhna kelas (contona, .navbar-expand-lg
) digabungkeun jeung $breakpoints
peta tur dihasilkeun ngaliwatan loop di 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;
}
}
}
}
}