Source

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 .navbarkalawan .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-printkana .navbar. Tempo kelas utiliti tampilan .
  • Pastikeun diakses ku ngagunakeun <nav>unsur atawa, lamun ngagunakeun unsur nu leuwih umum kayaning a <div>, tambahkeun a role="navigation"ka unggal navbar pikeun eksplisit ngaidentipikasi eta salaku wewengkon Landmark pikeun pamaké téknologi assistive.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Baca terus kanggo conto sareng daptar sub-komponén anu dirojong.

Eusi anu dirojong

Navbars hadir kalayan dukungan anu diwangun pikeun sakeupeul subkomponén. Milih ti handap sakumaha diperlukeun:

  • .navbar-brandpikeun perusahaan, produk, atanapi nami proyék anjeun.
  • .navbar-navpikeun navigasi anu jangkung sareng hampang (kalebet dukungan pikeun turunna).
  • .navbar-togglerpikeun dianggo sareng plugin runtuh kami sareng paripolah toggling navigasi anu sanés .
  • .form-inlinepikeun sagala bentuk kontrol jeung lampah.
  • .navbar-textpikeun nambahkeun string vertikal dipuseurkeun téks.
  • .collapse.navbar-collapsepikeun 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 lgtitik 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="#" 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>

Conto ieu nganggo warna ( bg-light) sareng jarak ( my-2,,, my-lg-0) mr-sm-0kelas my-sm-0utiliti.

merek

Éta .navbar-brandtiasa diterapkeun ka sabagéan ageung elemen, tapi jangkar langkung saé sabab sababaraha unsur peryogi kelas utiliti atanapi gaya khusus.

<!-- 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-brandkamungkinan 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.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>

Tumbu navigasi Navbar ngawangun on .navpilihan 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- .activepikeun nunjukkeun kaca ayeuna bisa dilarapkeun langsung ka .nav-links 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" href="#" tabindex="-1" aria-disabled="true">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-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>

Anjeun oge bisa make dropdowns dina navbar nav Anjeun. Menu dropdown merlukeun unsur wrapping pikeun positioning, jadi pastikeun ngagunakeun elemen misah tur nested pikeun .nav-itemtur .nav-linkdité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="#" 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>

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 barudak .navbarsaharita ngagunakeun perenah fleksibel sareng bakal ditunakeun kana 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-colorUtiliti. Pilih .navbar-lightpikeun dianggo sareng warna latar anu terang, atanapi .navbar-darkkanggo 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 eta teu diperlukeun, anjeun tiasa mungkus navbar dina hiji .containerpuseur dina kaca atawa tambahkeun hiji dina ngan puseur eusi navbar luhur tetep atawa 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-topdina <body>) pikeun nyegah tumpang tindihna jeung elemen séjén.

Catet ogé yén .sticky-topngagunakeun 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>

kabiasaan responsif

Navbars tiasa ngagunakeun .navbar-toggler, .navbar-collapse, sareng .navbar-expand{-sm|-md|-lg|-xl}kelas pikeun robih nalika 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-expandkelas on navbar nu. Pikeun navbars nu salawasna ambruk, ulah nambahkeun .navbar-expandkelas 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-brandditémbongkeun dina breakpoint panghandapna:

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

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

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

Eusi éksternal

Kadang anjeun hoyong nganggo plugin runtuhna pikeun memicu eusi disumputkeun di tempat sanés dina halaman éta. Kusabab plugin urang jalan dina idtur data-targetcocog, éta gampang dipigawé!

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