Source

Navbar ye

Sɛbɛnw ni misaliw Bootstrap ka navigatiɔn kuncɛ barikama, min bɛ jaabi di, n’o ye navbar ye. Dɛmɛ bɛ sɔrɔ a kɔnɔ, ka ɲɛsin taamasiyɛnw ma, navigatiɔnw, ani fɛn wɛrɛw ma, o la, dɛmɛ don an ka collapse plugin ma.

A bɛ baara kɛ cogo min na

Aw ka kan ka fɛn minnu dɔn sani aw ka navbar daminɛ, olu filɛ nin ye:

  • Navbars bɛ ɲini wrapping .navbarni .navbar-expand{-sm|-md|-lg|-xl}for responsive collapsing ani color scheme classes.
  • Navbarw n’u kɔnɔkow ye ji ye ka da a kan. Aw bɛ baara kɛ ni minɛnw ye minnu bɛ se ka kɛ walasa ka dan sigi u bonya tilennen na.
  • Baara kɛ ni an ka spacing ani flex utility classes ye walasa ka spacing ni alignment kɔlɔsi navbars kɔnɔ.
  • Navbarw bɛ jaabi di ka da a kan, nka i bɛ se k’u ladilan nɔgɔya la walasa k’o Changer. Jaabi kɛcogo bɛ bɔ an ka Collapse JavaScript plugin de la.
  • Navbarw bɛ dogo ka kɛɲɛ ni u yɛrɛ ye ni u bɛ sɛbɛnni kɛ. Wajibiya u ka sɛbɛn ni farali .d-printye .navbar. Aw ye jiracogo nafama kalasi lajɛ.
  • Aw ye aw janto sɔrɔli la ni baara kɛli ye ni <nav>fɛn dɔ ye walima ni aw bɛ baara kɛ ni fɛn dɔ ye min ka ca ni fɛn bɛɛ ye i n’a fɔ a <div>, aw bɛ a fara role="navigation"navbar bɛɛ kan walasa k’a jira k’a jɛya ko a ye mara taamasiyɛn ye dɛmɛnan fɛɛrɛw baarakɛlaw bolo.

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Aw ye kalan kɛ ka taa ɲɛ walasa ka misali dɔ sɔrɔ ani yɔrɔ fitinin minnu bɛ dɛmɛ sɔrɔ, olu lisɛli.

Kɔnɔkow minnu bɛ dɛmɛ

Navbarw bɛ na ni dɛmɛ jɔlen ye ka ɲɛsin bolomafara fitinin dɔw ma. Aw bɛ ninnu sugandi ni aw mago bɛ a la:

  • .navbar-brandka ɲɛsin i ka sosiyete, i ka fɛn dilannen, walima i ka porozɛ tɔgɔ ma.
  • .navbar-navwalasa ka navigatiɔn dafalen ni nɔgɔya sɔrɔ (dɛmɛni fana sen bɛ o la ka ɲɛsin jiginɛw ma).
  • .navbar-togglerka baara kɛ ni an ka collapse plugin ye ani navigation toggling kɛcogo wɛrɛw.
  • .form-inlineka ɲɛsin foroko o cogoya kɔlɔsili ni walew ma.
  • .navbar-textwalasa ka sɛbɛnniw sɛrɛkiliw fara ɲɔgɔn kan minnu bɛ cɛmancɛ jɔlen na.
  • .collapse.navbar-collapseka navbar kɔnɔkow kulu ni u dogo bangebaga ka kariyɔrɔ dɔ fɛ.

Nin ye misali ye min bɛ yɔrɔ fitininw bɛɛ la minnu bɛ jaabi yeelen-ko-ɲɛnabɔ-navbar kɔnɔ min bɛ bin a yɛrɛma lg(ba) kariyɔrɔ la.

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

Nin misali in bɛ baara kɛ ni kulɛri ( bg-light) ni yɔrɔjan ( my-2, my-lg-0, mr-sm-0, my-sm-0) nafama kalasiw ye.

Mariki

The .navbar-brandbɛ se ka kɛ fɛn fanba la, nka ankɔri bɛ baara kɛ ka ɲɛ bawo fɛn dɔw bɛ se ka nafalanw walima ladamu cogoyaw de wajibiya.

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

Jaw farali o kan, a ka c’a la, o .navbar-brandbɛna kɛ sababu ye tuma bɛɛ ka ladamu cogoyaw walima nafamafɛnw kɛ walasa u ka bonya ka ɲɛ. Misali dɔw filɛ nin ye minnu bɛ se ka jira.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.3/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.3/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar navigation links bɛ jɔ an ka .navsugandiliw kan n’u yɛrɛ ka modifier class ye ani u bɛ baara kɛ ni toggler classes ye walasa ka jaabi kɛcogo ɲuman sɔrɔ. Navigation in navbars fana bɛna bonya walasa ka yɔrɔ horizontal caman minɛ i n’a fɔ a bɛ se ka kɛ cogo min na walasa i ka navbar kɔnɔkow ka to u cogo la ka ɲɛ.

Active states—ni .active—ka ɲɛ min jira sisan, olu bɛ se ka kɛ ka ɲɛsin .nav-links ma walima u bangebaga gɛrɛfɛ .nav-items ma.

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

Wa k’a sababu Kɛ an bɛ baara Kɛ ni kalanw ye an ka navs (navs) kama, i bɛ Se k’i yɛrɛ Kɔrɔbɔ list-based approach (list-based approach) la pewu n’i b’a fɛ.

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

Aw bɛ se fana ka baara kɛ ni fɛnw ye minnu bɛ bɔ aw ka navbar nav kɔnɔ. Meniw minnu bɛ jigin, olu bɛ fɛn dɔ de wajibiya min bɛ kɛ ka fɛnw siri, o la, aw ye aw jija ka baara kɛ ni fɛnw ye minnu bɛ danfara la ani minnu bɛ sigi sen kan .nav-itemani .nav-linki n’a fɔ a jiralen bɛ cogo min na jukɔrɔ.

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

Sɛbɛnw

Aw bɛ foroko kunkankow ni yɔrɔw suguya caman bila navbar kɔnɔ ni .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>

Teliya denmisɛnw elements in .navbaruse flex layout ani bɛna default kɛ justify-content: between. Aw bɛ baara kɛ ni flex utilité wɛrɛw ye i n’a fɔ aw mago bɛ cogo min na walasa ka o kɛcogo ladilan.

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

Donan kuluw bɛ baara kɛ, olu fana:

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

Butɔn suguya caman bɛ dɛmɛ ka kɛ nin navbar foroko ninnu dɔ ye, olu fana. Nin fana ye hakilijiginba ye ko jɛgɛncogo nafamafɛnw bɛ se ka kɛ ka fɛnw labɛn minnu bonya tɛ kelen ye.

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

Masalabolo

Navbarw bɛ se ka sɛbɛnni bitikiw sɔrɔ ni dɛmɛ ye .navbar-text. Nin kalan in bɛ ɲɔgɔndan jɔlenw ni janya tilennenw ladilan sɛbɛnniw sɛrɛw kama.

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

Aw bɛ a ɲagami ka a bɛn ni a yɔrɔ wɛrɛw ni nafamafɛnw ye ni aw mago bɛ a la.

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

Kulɛriw cogoyaw

Theming the navbar ma deli ka nɔgɔya ka tɛmɛn o kan k’a sababu kɛ theming classes ni background-colorutilities faralen ye ɲɔgɔn kan. Sugandili .navbar-lightkɛ walasa ka baara kɛ ni kɔkanna kulɛri jɛlenw ye, walima ka baara kɛ ni kɔkanna kulɛri .navbar-darkdibimanw ye. O kɔfɛ, i ka customize ni .bg-*utilities ye.

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

Minɛnw

Hali n’a ma wajibiya, i bɛ se ka navbar dɔ siri a kɔnɔ walasa k’a cɛmancɛ kɛ ɲɛ dɔ kan walima ka dɔ fara a kɔnɔ walasa ka sanfɛla navbar jɔlen walima jɔlen.container kɔnɔkow cɛmancɛ dɔrɔn de kɛ .

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

Ni minɛn bɛ i ka navbar kɔnɔ, a padding horizontal bɛ bɔ breakpoints (kariyɔrɔw) la minnu ka dɔgɔ ni i ka .navbar-expand{-sm|-md|-lg|-xl}classe kofɔlen ye. O b'a To an tɛ 'yɔrɔ fla Kɛ padding kan kun tɛ min na duguma-jiralanw kan n'i ka navbar (navbar) Dònna.

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

Yɔrɔ bilali

Baara kɛ ni an ka jɔyɔrɔ nafamafɛnw ye walasa ka navbarw bila jɔyɔrɔw la minnu tɛ jɔ. Sugandili kɛ ka bɔ a jɔlen na ka taa sanfɛ, a jɔlen bɛ duguma, walima a bɛ nɔrɔ sanfɛ (a bɛ sɛbɛn ni ɲɛ ye fo ka se sanfɛ, o kɔfɛ a bɛ to yen). Navbar fixes bɛ baara Kɛ ni position: fixed, kɔrɔ ye k’u bɛ sama ka Bɔ DOM ka normal flow la wa u bɛ Se ka CSS ladamulen wajibiya (misali la, ) padding-topkan <body>walasa ka ɲɔgɔndan bali ni fɛn wɛrɛw ye.

aw k' a kɔlɔsi fana ko .sticky-topbaarakɛcogo position: sticky, min tɛ dɛmɛ bɛrɛbɛrɛ navigatɔrɔ bɛɛ kɔnɔ .

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

Taamacogo minnu bɛ jaabi di

Navbarw bɛ se ka baara kɛ ni .navbar-toggler, .navbar-collapse, ani .navbar-expand{-sm|-md|-lg|-xl}kalanw ye walasa ka fɛn caman Changer ni u kɔnɔkow bɛ bin butɔni dɔ kɔfɛ. Ni i farala nafamafɛn wɛrɛw kan, i bɛ se k’a sugandi nɔgɔya la waati min na i bɛna fɛn kɛrɛnkɛrɛnnenw jira walima k’u dogo.

Navbar minnu tɛ bin abada, aw bɛ .navbar-expandkalasi fara navbar kan. Navbar minnu bɛ bin tuma bɛɛ, aw kana .navbar-expandkalasi si fara a kan.

Toggler ye

Navbar togglers bɛ Labɛn numan fɛ ka da a kan, nka n’u tugura balimakɛ-yɔrɔ dɔ kɔ i n’a fɔ a .navbar-brand, u bɛ Labɛn u yɛrɛma ka Taa kinin fɛ yɔrɔ jan na. Ni i ye i ka taamasiyɛn kɔsegin, o bɛna toggler bilali kɔsegin. Toggle cogoya wɛrɛw misaliw bɛ duguma.

Ni a ma .navbar-brandjira kariyɔrɔ dɔgɔmannin na:

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

Ni marka tɔgɔ jiralen bɛ kinin fɛ ani toggler bɛ kinin fɛ:

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

Ni toggler bɛ kinin fɛ ani brand tɔgɔ kinin fɛ:

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

Kɛnɛyako kɔnɔkow

Tuma dɔw la, i b’a fɛ ka baara kɛ ni collapse plugin ye walasa ka kunnafoni dogolenw daminɛ yɔrɔ wɛrɛ la ɲɛ kan. Komin an ka plugin bɛ baara Kɛ ni idani data-targetmatching ye, o bɛ Kɛ nɔgɔya la!

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