in English

Navbar

Dokumentasi dan contoh untuk pengepala navigasi Bootstrap yang berkuasa dan responsif, bar navigasi. Termasuk sokongan untuk penjenamaan, navigasi, pemalam runtuh dan banyak lagi.

Bagaimana ia berfungsi

Inilah yang anda perlu ketahui sebelum memulakan dengan navbar:

  • Navbar memerlukan pembalut .navbaruntuk 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-printpada .navbar. Lihat kelas utiliti paparan .
  • Pastikan kebolehaksesan dengan menggunakan <nav>elemen atau, jika menggunakan elemen yang lebih generik seperti <div>, tambahkan a role="navigation"pada setiap bar navigasi untuk mengenal pasti secara eksplisit ia sebagai kawasan mercu tanda bagi pengguna teknologi bantuan.
Kesan animasi komponen ini bergantung pada prefers-reduced-motionpertanyaan media. Lihat bahagian gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .

Kandungan yang disokong

Navbar datang dengan sokongan terbina dalam untuk segelintir sub-komponen. Pilih daripada yang berikut mengikut keperluan:

  • .navbar-branduntuk syarikat, produk atau nama projek anda.
  • .navbar-navuntuk navigasi berketinggian penuh dan ringan (termasuk sokongan untuk menu lungsur).
  • .navbar-toggleruntuk digunakan dengan pemalam runtuh kami dan gelagat togol navigasi lain.
  • .form-inlineuntuk sebarang kawalan bentuk dan tindakan.
  • .navbar-textuntuk menambah rentetan teks berpusat menegak.
  • .collapse.navbar-collapseuntuk mengumpulkan dan menyembunyikan kandungan navbar oleh titik putus induk.

Berikut ialah contoh semua subkomponen yang disertakan dalam bar navigasi bertema ringan responsif yang runtuh secara automatik pada lgtitik 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="#" 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>

Contoh ini menggunakan kelas utiliti warna ( bg-light) dan jarak ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Jenama

Ia .navbar-brandboleh digunakan pada kebanyakan elemen, tetapi sauh berfungsi dengan 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-brandmungkin 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.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>

Pautan navigasi bar navigasi membina .navpilihan 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— .activeuntuk menunjukkan halaman semasa boleh digunakan terus kepada .nav-links 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">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-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>

Anda juga boleh menggunakan dropdown dalam bar navigasi anda. Menu lungsur turun memerlukan elemen pembalut untuk kedudukan, jadi pastikan anda menggunakan elemen yang berasingan dan bersarang untuk .nav-itemdan .nav-linkseperti 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="#" 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>

Borang

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>

Elemen anak serta-merta .navbarmenggunakan reka letak fleksibel dan akan lalai kepada justify-content: space-between. Gunakan utiliti flex tambahan seperti yang diperlukan untuk melaraskan tingkah laku ini.

<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>

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>

Teks

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>

Skim warna

Memberi tema bar navigasi tidak pernah semudah ini berkat gabungan kelas dan background-colorutiliti tema. Pilih daripada .navbar-lightuntuk digunakan dengan warna latar belakang terang atau .navbar-darkuntuk warna latar belakang gelap. Kemudian, sesuaikan dengan .bg-*utiliti.

<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>

Bekas

Walaupun ia tidak diperlukan, anda boleh membungkus bar nav dalam a .containeruntuk memusatkannya pada halaman. Atau anda boleh menambah bekas di dalam .navbaruntuk hanya memusatkan kandungan bar navigasi 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>

Penempatan

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-toppada <body>) untuk mengelakkan pertindihan dengan elemen lain.

Juga ambil perhatian bahawa .sticky-topmenggunakan 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>

Menatal

Tambahkan .navbar-nav-scrollpada .navbar-collapse(atau sub-komponen navbar lain) untuk mendayakan tatal menegak dalam kandungan boleh togol bar navigasi yang runtuh. Secara lalai, penatalan bermula pada 75vh(atau 75% daripada ketinggian port pandangan), tetapi anda boleh mengatasinya dengan gaya sebaris atau tersuai. Pada port pandangan yang lebih besar apabila bar navigasi dikembangkan, kandungan akan muncul seperti dalam bar navigasi lalai.

Sila ambil perhatian bahawa tingkah laku ini datang dengan potensi kelemahan overflow—apabila tetapan overflow-y: auto(diperlukan untuk menatal kandungan di sini), overflow-xadalah bersamaan dengan auto, yang akan memangkas beberapa kandungan mendatar.

Berikut ialah contoh navbar menggunakan .navbar-nav-scrolldengan style="max-height: 100px;", dengan beberapa utiliti margin tambahan untuk jarak optimum.

<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>

Tingkah laku responsif

Navbar boleh menggunakan .navbar-toggler, .navbar-collapse, dan .navbar-expand{-sm|-md|-lg|-xl}kelas untuk menentukan masa 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-expandkelas pada bar navigasi. Untuk bar nav yang sentiasa runtuh, jangan tambah sebarang .navbar-expandkelas.

Toggler

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-brandditunjukkan pada titik putus terkecil:

<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>

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">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">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>

Kandungan luaran

Kadangkala anda ingin menggunakan pemalam runtuh untuk mencetuskan elemen bekas untuk kandungan yang secara berstruktur terletak di luar .navbar. Kerana pemalam kami berfungsi pada iddan data-targetpadanan, itu mudah dilakukan!

<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>

Apabila anda melakukan ini, kami mengesyorkan memasukkan JavaScript tambahan untuk mengalihkan fokus secara pemprograman ke bekas apabila ia dibuka. Jika tidak, pengguna papan kekunci dan pengguna teknologi bantuan berkemungkinan akan mengalami kesukaran mencari kandungan yang baru didedahkan - terutamanya jika bekas yang dibuka datang sebelum togol dalam struktur dokumen. Kami juga mengesyorkan untuk memastikan bahawa togol mempunyai aria-controlsatribut, menunjuk pada idbekas kandungan. Secara teorinya, ini membolehkan pengguna teknologi bantuan melompat terus dari togol ke bekas yang dikawalnya–tetapi sokongan untuk perkara ini pada masa ini agak bertompok-tompok.