in English

Navbar

Dokuméntasi sareng conto pikeun Bootstrap anu kuat, lulugu navigasi responsif, navbar. Ngawengku pangrojong pikeun branding, navigasi, collapse plugin, sareng seueur deui.

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 .

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

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

merek

The .navbar-brandbisa dilarapkeun ka paling elemen, tapi anchor jalan pangalusna, sabab sababaraha elemen bisa merlukeun kelas utiliti atawa gaya custom.

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

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

Anjeun oge bisa make dropdowns dina navbar 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="#" 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>

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 anak .navbarsaharita 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">
  <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 éta henteu diperlukeun, anjeun tiasa mungkus navbar dina hiji .containerpuseur eta dina kaca. Atanapi anjeun tiasa nambihan wadah di jero .navbarpikeun ngan ukur pusat eusi navbar luhur tetep atanapi 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>

Ngagulung

Tambahkeun .navbar-nav-scrollka .navbar-collapse(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 yén kalawan gaya inline atawa 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 - overflownalika setelan overflow-y: auto(diperlukeun pikeun ngagulung eusi di dieu), overflow-xsarua jeung auto, nu bakal motong sababaraha eusi horizontal.

Ieu conto navbar anu nganggo .navbar-nav-scroll, style="max-height: 100px;"sareng sababaraha utilitas margin tambahan pikeun jarak anu optimal.

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

kabiasaan responsif

Navbars tiasa nganggo .navbar-toggler, .navbar-collapse, sareng .navbar-expand{-sm|-md|-lg|-xl}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-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 pangleutikna:

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

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">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">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 unsur wadahna pikeun eusi anu sacara stuktur linggih di luar .navbar. Kusabab plugin urang jalan dina idtur data-targetcocog, éta gampang dipigawé!

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

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-controlsatribut, nunjuk ka idwadah 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.