in English

Navbar

Dokumentasi lan conto kanggo header navigasi Bootstrap sing kuat, responsif, navbar. Kalebu dhukungan kanggo branding, navigasi, plugin ambruk, lan liya-liyane.

Cara kerjane

Mangkene sampeyan kudu ngerti sadurunge miwiti navbar:

  • Navbars mbutuhake mbungkus .navbarkaro .navbar-expand{-sm|-md|-lg|-xl}kanggo responsif collapsing lan kelas skema werna .
  • Navbars lan isine minangka standar. Gunakake wadhah opsional kanggo mbatesi ambane horisontal.
  • Gunakake kelas utilitas jarak lan fleksibel kanggo ngontrol jarak lan keselarasan ing navbar.
  • Navbars responsif minangka standar, nanging sampeyan bisa kanthi gampang ngowahi kanggo ngganti. Prilaku responsif gumantung marang plugin Collapse JavaScript.
  • Navbars didhelikake minangka standar nalika nyetak. Meksa supaya dicithak kanthi nambahake .d-printmenyang .navbar. Deleng kelas sarana tampilan .
  • Mesthekake aksesibilitas kanthi nggunakake <nav>unsur utawa, yen nggunakake unsur sing luwih umum kayata <div>, tambahake a role="navigation"kanggo saben navbar kanggo ngenali kanthi jelas minangka wilayah landmark kanggo pangguna teknologi assistive.
Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Isi sing didhukung

Navbars dilengkapi dhukungan sing dibangun kanggo sawetara sub-komponen. Pilih saka ing ngisor iki yen perlu:

  • .navbar-brandkanggo perusahaan, produk, utawa jeneng proyek sampeyan.
  • .navbar-navkanggo pandhu arah kanthi dhuwur lan entheng (kalebu dhukungan kanggo dropdown).
  • .navbar-togglerkanggo digunakake karo plugin ambruk lan prilaku toggling navigasi liyane.
  • .form-inlinekanggo kontrol lan tumindak apa wae.
  • .navbar-textkanggo nambah strings vertikal tengah teks.
  • .collapse.navbar-collapsekanggo klompok lan ndhelikake isi navbar dening breakpoint tiyang sepah.

Punika conto kabeh sub-komponen sing kalebu ing navbar tema cahya responsif sing kanthi otomatis ambruk ing lgbreakpoint (gedhe).

<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 iki nggunakake werna ( bg-light) lan spasi ( my-2, my-lg-0, mr-sm-0, my-sm-0) kelas sarana.

Merk

.navbar-brandBisa ditrapake kanggo umume unsur, nanging jangkar paling apik, amarga sawetara unsur mbutuhake kelas sarana utawa 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>

Nambahake gambar ing gambar .navbar-brandkasebut mesthi mbutuhake gaya khusus utawa keperluan kanggo ukuran sing bener. Kene sawetara conto kanggo nduduhake.

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

Tautan navigasi Navbar mbangun .navopsi kita karo kelas modifier dhewe lan mbutuhake kelas toggler kanggo gaya responsif sing tepat. Navigasi ing navbar uga bakal tuwuh kanggo ngenggoni spasi horisontal sabisa kanggo njaga isi navbar sampeyan kanthi aman.

Aktif negara-karo- .activekanggo nunjukaké kaca saiki bisa Applied langsung menyang .nav-links utawa wong tuwa langsung .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>

Lan amarga kita nggunakake kelas kanggo navs kita, sampeyan bisa supaya pendekatan adhedhasar dhaftar tanggung yen seneng.

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

Sampeyan uga bisa nggunakake dropdown ing navbar. Menu gulung mudhun mbutuhake unsur bungkus kanggo posisi, dadi manawa sampeyan nggunakake unsur sing kapisah lan nested kanggo .nav-itemlan .nav-linkkaya ing ngisor iki.

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

Formulir

Selehake macem-macem kontrol wangun lan komponen ing navbar karo .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 langsung .navbarnggunakake tata letak fleksibel lan bakal dadi standar kanggo justify-content: space-between. Gunakake utilitas fleksibel tambahan yen perlu kanggo nyetel prilaku iki.

<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 uga bisa digunakake:

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

Macem-macem tombol didhukung minangka bagéan saka formulir navbar iki uga. Iki uga minangka pangeling sing apik yen utilitas alignment vertikal bisa digunakake kanggo nyelarasake unsur ukuran sing beda.

<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 bisa ngemot potongan teks kanthi bantuan .navbar-text. Kelas iki nyetel alignment vertikal lan spasi horisontal kanggo strings teks.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Nyampur lan cocog karo komponen lan keperluan liyane yen perlu.

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

Skema warna

Theming navbar wis tau dadi luwih gampang thanks kanggo kombinasi kelas tema lan background-colorkeperluan. Pilih saka .navbar-lightkanggo nggunakake werna latar mburi cahya, utawa .navbar-darkkanggo werna latar mburi peteng. Banjur, setel karo .bg-*keperluan.

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

Wadhah

Sanajan ora dibutuhake, sampeyan bisa mbungkus navbar ing .containertengah ing kaca. Utawa sampeyan bisa nambah wadhah nang .navbarkanggo mung tengah isi navbar ndhuwur tetep utawa statis .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Nalika wadhah kasebut ana ing navbar sampeyan, padding horisontal dicopot ing breakpoints sing luwih murah tinimbang .navbar-expand{-sm|-md|-lg|-xl}kelas sing ditemtokake. Iki mesthekake yen kita ora ngganda ing padding tanpa perlu ing viewports ngisor nalika navbar sampeyan ambruk.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Panggonan

Gunakake utilitas posisi kita kanggo nyelehake navbar ing posisi non-statis. Pilih saka tetep menyang ndhuwur, tetep menyang ngisor, utawa nempel ing ndhuwur (gulung karo kaca nganti tekan ndhuwur, banjur tetep ana). Navbar tetep nggunakake position: fixed, tegese lagi ditarik saka aliran normal DOM lan mbutuhake CSS khusus (contone, padding-toping <body>) kanggo nyegah tumpang tindih karo unsur liyane.

Elinga uga .sticky-topnggunakake position: sticky, sing ora didhukung kanthi lengkap ing saben 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>

Nggulung

Tambah .navbar-nav-scrollmenyang .navbar-collapse(utawa sub-komponen navbar liyane) kanggo ngaktifake nggulung vertikal ing isi toggleable saka navbar ambruk. Kanthi gawan, gulung mlebu ing 75vh(utawa 75% saka dhuwur viewport), nanging sampeyan bisa ngganti karo gaya inline utawa adat. Ing viewport luwih gedhe nalika navbar ditambahi, isi bakal katon kaya ing navbar standar.

Wigati dimangerteni menawa prilaku iki ana kemungkinan overflowcacat - nalika nyetel overflow-y: auto(dibutuhake kanggo nggulung konten ing kene), overflow-xpadha karo auto, sing bakal ngethok sawetara konten horisontal.

Punika conto navbar nggunakake .navbar-nav-scrollkaro style="max-height: 100px;", karo sawetara keperluan margin ekstra kanggo spasi paling luweh.

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

Tumindak responsif

Navbars bisa nggunakake .navbar-toggler, .navbar-collapse, lan .navbar-expand{-sm|-md|-lg|-xl}kelas kanggo nemtokake nalika isi sing ambruk konco tombol. Ing kombinasi karo keperluan liyane, sampeyan bisa kanthi gampang milih nalika nuduhake utawa ndhelikake unsur tartamtu.

Kanggo navbar sing ora tau ambruk, nambah .navbar-expandkelas ing navbar. Kanggo navbar sing tansah ambruk, ora nambah .navbar-expandkelas sembarang.

Toggler

Toggler Navbar didadekake siji kiwa minangka standar, nanging yen padha ngetutake unsur sedulur kaya a .navbar-brand, bakal kanthi otomatis didadekake siji ing sisih tengen. Mbalikake markup sampeyan bakal mbalikke panggonan toggler. Ing ngisor iki conto gaya toggle sing beda.

Tanpa .navbar-brandditampilake ing breakpoint paling cilik:

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

Kanthi jeneng merek ditampilake ing sisih kiwa lan toggler ing sisih tengen:

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

Kanthi toggler ing sisih kiwa lan jeneng merek ing sisih tengen:

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

Isi njaba

Kadhangkala sampeyan pengin nggunakake plugin ambruk kanggo micu unsur wadhah kanggo konten sing sacara struktural dumunung ing njaba .navbar. Amarga kita plugin dianggo ing idlan data-targetcocog, sing gampang rampung!

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

Nalika sampeyan nindakake iki, disaranake kalebu JavaScript tambahan kanggo mindhah fokus programmatically kanggo wadhah nalika dibukak. Yen ora, pangguna keyboard lan pangguna teknologi pitulung bakal angel nemokake konten sing mentas dicethakake - utamane yen wadhah sing dibukak sadurunge toggler ing struktur dokumen. Disaranake uga priksa manawa toggler duwe aria-controlsatribut, ngarahake menyang idwadhah konten. Ing teori, iki ngidini pangguna teknologi asisten langsung mlumpat saka toggler menyang wadhah sing dikontrol-nanging dhukungan kanggo iki saiki rada kurang.