Navbar
Dokumentasi dan contoh untuk pengepala navigasi Bootstrap yang berkuasa dan responsif, bar navigasi. Termasuk sokongan untuk penjenamaan, navigasi dan banyak lagi, termasuk sokongan untuk pemalam runtuh kami.
Inilah yang anda perlu ketahui sebelum memulakan dengan navbar:
- Navbar memerlukan pembalut
.navbar
untuk kelas skema warna.navbar-expand{-sm|-md|-lg|-xl}
dan runtuh responsif . - Navbar dan kandungannya adalah cecair secara lalai. Gunakan bekas pilihan untuk mengehadkan lebar mendatarnya.
- Gunakan kelas utiliti jarak dan fleksibel kami untuk mengawal jarak dan penjajaran dalam bar navigasi.
- Navbars responsif secara lalai, tetapi anda boleh mengubah suainya dengan mudah untuk mengubahnya. Tingkah laku responsif bergantung pada pemalam Runtuhkan JavaScript kami.
- Navbar disembunyikan secara lalai semasa mencetak. Paksa mereka dicetak dengan menambah
.d-print
pada.navbar
. Lihat kelas utiliti paparan . - Pastikan kebolehaksesan dengan menggunakan
<nav>
elemen atau, jika menggunakan elemen yang lebih generik seperti<div>
, tambahkan arole="navigation"
pada setiap bar navigasi untuk mengenal pasti secara eksplisit ia sebagai kawasan mercu tanda bagi pengguna teknologi bantuan.
Teruskan membaca untuk contoh dan senarai sub-komponen yang disokong.
Navbar datang dengan sokongan terbina dalam untuk segelintir sub-komponen. Pilih daripada yang berikut mengikut keperluan:
.navbar-brand
untuk syarikat, produk atau nama projek anda..navbar-nav
untuk navigasi berketinggian penuh dan ringan (termasuk sokongan untuk menu lungsur)..navbar-toggler
untuk digunakan dengan pemalam runtuh kami dan gelagat togol navigasi lain..form-inline
untuk sebarang kawalan bentuk dan tindakan..navbar-text
untuk menambah rentetan teks berpusat menegak..collapse.navbar-collapse
untuk mengumpulkan dan menyembunyikan kandungan navbar oleh titik putus induk.
Berikut ialah contoh semua subkomponen yang disertakan dalam bar navigasi bertema cahaya responsif yang secara automatik runtuh pada lg
titik putus (besar).
<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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<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" href="#">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>
Contoh ini menggunakan kelas utiliti warna ( bg-light
) dan jarak ( my-2
, my-lg-0
, mr-sm-0
, ).my-sm-0
Ia .navbar-brand
boleh digunakan pada kebanyakan elemen, tetapi sauh berfungsi paling baik kerana sesetengah elemen mungkin memerlukan kelas utiliti atau gaya tersuai.
<!-- 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>
Menambah imej pada imej .navbar-brand
mungkin sentiasa memerlukan gaya atau utiliti tersuai untuk saiz yang betul. Berikut adalah beberapa contoh untuk ditunjukkan.
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.0/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.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
Pautan navigasi bar navigasi membina .nav
pilihan kami dengan kelas pengubah suai mereka sendiri dan memerlukan penggunaan kelas toggler untuk penggayaan responsif yang betul. Navigasi dalam bar navigasi juga akan berkembang untuk menduduki sebanyak mungkin ruang mendatar untuk memastikan kandungan bar navigasi anda sejajar dengan selamat.
Keadaan aktif—dengan— .active
untuk menunjukkan halaman semasa boleh digunakan terus kepada .nav-link
s atau ibu bapa terdekat mereka .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" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Dan kerana kami menggunakan kelas untuk navigasi kami, anda boleh mengelakkan pendekatan berasaskan senarai sepenuhnya jika anda suka.
<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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
Anda juga boleh menggunakan dropdown dalam navigasi bar navigasi anda. Menu lungsur turun memerlukan elemen pembalut untuk kedudukan, jadi pastikan anda menggunakan elemen yang berasingan dan bersarang untuk .nav-item
dan .nav-link
seperti yang ditunjukkan di bawah.
<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="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
Letakkan pelbagai kawalan bentuk dan komponen dalam bar navigasi dengan .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>
Selaraskan kandungan borang sebaris anda dengan utiliti seperti yang diperlukan.
<nav class="navbar navbar-light bg-light justify-content-between">
<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>
Kumpulan input juga berfungsi:
<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>
Pelbagai butang disokong sebagai sebahagian daripada borang navbar ini juga. Ini juga merupakan peringatan yang bagus bahawa utiliti penjajaran menegak boleh digunakan untuk menjajarkan elemen bersaiz berbeza.
<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>
Navbar mungkin mengandungi bit teks dengan bantuan .navbar-text
. Kelas ini melaraskan penjajaran menegak dan jarak mendatar untuk rentetan teks.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Campurkan dan padankan dengan komponen dan utiliti lain mengikut keperluan.
<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>
Memberi tema bar navigasi tidak pernah semudah ini berkat gabungan kelas dan background-color
utiliti tema. Pilih daripada .navbar-light
untuk digunakan dengan warna latar belakang terang atau .navbar-dark
untuk warna latar belakang gelap. Kemudian, sesuaikan dengan .bg-*
utiliti.
Walaupun ia tidak diperlukan, anda boleh membungkus navbar dalam .container
untuk memusatkannya pada halaman atau menambah satu dalam untuk hanya memusatkan kandungan navbar atas tetap atau statik .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Apabila bekas berada dalam bar navigasi anda, pelapik mendatarnya dialih keluar pada titik putus yang lebih rendah daripada .navbar-expand{-sm|-md|-lg|-xl}
kelas yang anda tentukan. Ini memastikan kami tidak menggandakan padding secara tidak perlu pada port pandangan bawah apabila bar navigasi anda runtuh.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Gunakan utiliti kedudukan kami untuk meletakkan navbar dalam kedudukan bukan statik. Pilih daripada tetap ke atas, tetap ke bawah atau melekat pada bahagian atas (tatal dengan halaman sehingga ia mencapai bahagian atas, kemudian kekal di sana). Navbar tetap menggunakan position: fixed
, bermakna ia ditarik daripada aliran biasa DOM dan mungkin memerlukan CSS tersuai (cth, padding-top
pada <body>
) untuk mengelakkan pertindihan dengan elemen lain.
Juga ambil perhatian bahawa .sticky-top
menggunakan position: sticky
, yang tidak disokong sepenuhnya dalam setiap penyemak imbas .
<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>
Navbar boleh menggunakan .navbar-toggler
, .navbar-collapse
, dan .navbar-expand{-sm|-md|-lg|-xl}
kelas untuk menukar apabila kandungannya runtuh di belakang butang. Dalam kombinasi dengan utiliti lain, anda boleh dengan mudah memilih masa untuk menunjukkan atau menyembunyikan elemen tertentu.
Untuk bar navigasi yang tidak pernah runtuh, tambahkan .navbar-expand
kelas pada bar navigasi. Untuk bar nav yang sentiasa runtuh, jangan tambah sebarang .navbar-expand
kelas.
Togol Navbar dijajarkan ke kiri secara lalai, tetapi sekiranya mereka mengikut elemen adik-beradik seperti a .navbar-brand
, ia akan dijajarkan secara automatik ke hujung kanan. Membalikkan penanda anda akan membalikkan peletakan togol. Di bawah ialah contoh gaya togol yang berbeza.
Tanpa .navbar-brand
ditunjukkan dalam titik putus terendah:
<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" href="#">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>
Dengan nama jenama ditunjukkan di sebelah kiri dan togol di sebelah kanan:
<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" href="#">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>
Dengan togol di sebelah kiri dan nama jenama di sebelah kanan:
<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" href="#">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>
Kadangkala anda ingin menggunakan pemalam runtuh untuk mencetuskan kandungan tersembunyi di tempat lain pada halaman. Kerana pemalam kami berfungsi pada id
dan data-target
padanan, itu mudah dilakukan!
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<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>