Source

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.

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 .

Teruskan membaca untuk contoh dan senarai sub-komponen yang disokong.

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="#" 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="#" tabindex="-1" aria-disabled="true">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 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-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.4/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.4/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" href="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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-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="#" id="navbarDropdownMenuLink" role="button" 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>

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 kanak-kanak segera .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 navbar dalam .containeruntuk 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 navbar anda, pelapik mendatarnya dikeluarkan 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 bar navigasi 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>

Tingkah laku responsif

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-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 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="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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 kandungan tersembunyi di tempat lain pada halaman. Kerana pemalam kami berfungsi pada iddan data-targetpadanan, itu mudah dilakukan!

<div class="pos-f-t">
  <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>