Source

Navbar

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

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 .

Waca conto lan dhaptar sub-komponen sing didhukung.

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

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" href="#" tabindex="-1" aria-disabled="true">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-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>

Sampeyan uga bisa nggunakake dropdowns ing navbar nav. 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="#" 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>

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

Senajan iku ora dibutuhake, sampeyan bisa mbungkus navbar ing .containertengah ing kaca utawa nambah siji ing 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>

Tumindak responsif

Navbars bisa nggunakke .navbar-toggler, .navbar-collapse, lan .navbar-expand{-sm|-md|-lg|-xl}kelas kanggo ngganti 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 murah:

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

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

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

Isi njaba

Kadhangkala sampeyan pengin nggunakake plugin ambruk kanggo micu konten sing didhelikake ing papan liya ing kaca kasebut. Amarga kita plugin dianggo ing idlan data-targetcocog, sing gampang rampung!

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