Source

Navbar na ɛwɔ hɔ

Nwoma ne nhwɛsoɔ ma Bootstrap ahoɔden, mmuaeɛ akwantuo ti, navbar. Nea ɛka ho ne mmoa a wɔde ma branding, navigation, ne nea ɛkeka ho, a mmoa a wɔde ma yɛn collapse plugin no ka ho.

Sɛnea ɛyɛ adwuma

Nea ɛsɛ sɛ wuhu ansa na woafi ase de navbar no ni:

  • Navbars hwehwɛ wrapping .navbarne .navbar-expand{-sm|-md|-lg|-xl}ma mmuae collapsing ne kɔla nhyehyɛe adesua ahorow.
  • Navbars ne emu nsɛm no yɛ nsu default. Fa nsukorade a wopɛ di dwuma de siw wɔn trɛw a ɛkɔ soro no ano hye.
  • Fa yɛn spacing ne flex utility classes no di dwuma ma hwɛ spacing ne alignment wɔ navbars mu.
  • Navbars no yɛ mmuae default so, nanso wubetumi asesa no ntɛm de asesa saa. Suban a ɛma mmuae gyina yɛn Collapse JavaScript plugin no so.
  • Navbars no wɔde sie default so bere a woretintim no. Hyɛ wɔn ma wontintim denam nea wode bɛka ho .d-printno so .navbar. Hwɛ ɔyɛkyerɛ utility adesuakuw no.
  • Hwɛ sɛ wobɛtumi anya bi denam <nav>element bi a wode bedi dwuma so anaasɛ, sɛ wode element a ɛyɛ generic kɛse te sɛ a redi dwuma a <div>, fa a ka role="navigation"navbar biara ho de kyerɛ pefee sɛ ɛyɛ ɔmantam a ɛyɛ agyiraehyɛde ma wɔn a wɔde mfiridwuma a ɛboa di dwuma no.

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Kenkan kɔ so ma nhwɛso ne sub-components a wɔboa no din.

Nsɛm a wɔboa

Navbars ba a wɔasisi mu mmoa ma nsa kakraa bi sub-components. Paw nea edidi so yi mu sɛnea ɛho hia:

  • .navbar-brandma wo adwumakuw, ade, anaa adwuma no din.
  • .navbar-navma akwantu a ɛkorɔn ne nea emu yɛ hare (a mmoa a wɔde ma nneɛma a wɔde gu fam ka ho).
  • .navbar-togglersɛ wode bedi dwuma wɔ yɛn collapse plugin ne navigation toggling suban afoforo ho.
  • .form-inlinema ɔkwan biara so tumidi ne nneyɛe.
  • .navbar-textsɛ wode nsɛm nhama a ɛwɔ mfinimfini gyina hɔ bɛka ho.
  • .collapse.navbar-collapsema navbar mu nsɛm a wɔde akuwakuw na wɔde sie denam ɔwofo breakpoint so.

Nhwɛsoɔ a ɛfa sub-components nyinaa a ɛka ho wɔ responsive light-themed navbar a ɛhwe ase ankasa wɔ lg(kɛseɛ) breakpoint no nie.

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

Saa nhwɛsoɔ yi de kɔla ( bg-light) ne ntamgyinafoɔ ( my-2, my-lg-0, mr-sm-0, my-sm-0) mfasoɔ adesua ahodoɔ di dwuma.

Adeban

Wobetumi de The .navbar-brandno adi dwuma wɔ element dodow no ara ho, nanso anchor yɛ adwuma yiye efisɛ element ahorow bi betumi ahwehwɛ utility classes anaa custom styles.

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

Ɛda adi sɛ mfonini ahorow a wode bɛka ho no .navbar-brandbɛhwehwɛ bere nyinaa sɛ wobɛyɛ custom styles anaa utilities na ama ne kɛse ayɛ yiye. Nhwɛso ahorow bi a yebetumi ayɛ ho ɔyɛkyerɛ ni.

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

Navbar navigation links si yɛn .navoptions so ne wɔn ankasa modifier class na ɛhwehwɛ sɛ wɔde toggler classes di dwuma ma mmuae a ɛfata styling. Navigation wɔ navbars mu nso bɛnyin akɔfa horizontal space pii sɛdeɛ ɛbɛyɛ yie na ama wo navbar mu nsɛm no akɔ so ayɛ pɛpɛɛpɛ.

Wobetumi de tebea horow a ɛyɛ adwuma—a .active—a ɛkyerɛ kratafa a ɛwɔ hɔ mprempren no adi dwuma tẽẽ wɔ .nav-links anaa wɔn awofo a wɔbɛn wɔn pɛɛ .nav-items so.

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

Na esiane sɛ yɛde classes di dwuma ma yɛn navs nti, wubetumi akwati list-based approach no koraa sɛ wopɛ a.

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

Wubetumi nso de dropdowns adi dwuma wɔ wo navbar nav no mu. Dropdown menus hwehwɛ wrapping element ma positioning, enti hwɛ hu sɛ wode elements a ɛtetew ne nested bedi dwuma ama .nav-itemne .nav-linksɛnea wɔakyerɛ wɔ ase ha no.

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

Nkyerɛwee ahorow

Fa form controls ne components ahorow gu navbar bi mu a .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>

Ntɛm ara mmofra elements a .navbarwɔde di dwuma flex layout na ɛbɛ default akɔ justify-content: space-between. Fa flex utilities foforo di dwuma sɛnea ɛho hia na woasiesie saa suban yi.

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

Input akuw ahorow nso yɛ adwuma:

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

Wɔboa bɔton ahorow sɛ navbar nkrataa yi fã, nso. Eyi nso yɛ nkaebɔ kɛse sɛ wobetumi de vertical alignment utilities adi dwuma de ahyɛ element ahorow a ɛsono ne kɛse hyia.

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

Atwerɛ

Navbars betumi akura nsɛm nketenkete bi a ɛnam .navbar-text. Saa adesua yi sesa vertical alignment ne horizontal spacing ma nsɛm a wɔahyehyɛ no nhama.

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

Fa fra na fa nneɛma afoforo ne nneɛma a wɔde di dwuma no fra mu sɛnea ɛho hia.

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

Kɔla ahorow a wɔde yɛ nneɛma

Theming navbar no nyɛ mmerɛw da esiane theming adesua ahorow ne background-colorutilities a wɔaka abom nti. Paw bi .navbar-lightna wode bedi dwuma wɔ akyi kɔla a ɛyɛ hann, anaasɛ .navbar-darkakyi kɔla a ɛyɛ sum. Afei, fa .bg-*utilities yɛ wo ho sɛnea wopɛ.

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

Nneɛma a wɔde gu mu

Ɛwom sɛ ɛnyɛ nea ɛho hia de, nanso wubetumi abɔ navbar bi mu wɔ a mu .containerde ayɛ mfinimfini wɔ kratafa bi so anaasɛ wode biako aka ho de ayɛ mfinimfini navbar a ɛwɔ soro a ɛyɛ pintinn anaasɛ ɛnyɛ nea ɛwɔ soro no mu nkutoo .

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

Sɛ container no wɔ wo navbar no mu a, woyi ne horizontal padding no fi hɔ wɔ breakpoints a ɛba fam sen wo .navbar-expand{-sm|-md|-lg|-xl}class a woakyerɛ no. Wei hwɛ sɛ yɛrenyɛ doubling up wɔ padding a ɛho nhia wɔ lower viewports bere a wo navbar no abubu.

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

Nneɛma a wɔde bɛto hɔ

Fa yɛn gyinabea utilities no si navbars wɔ gyinabea a ɛnyɛ static. Paw fixed to the top, fixed to the bottom, anaa stickied to the top (fa kratafa no kyerɛw kosi sɛ ebedu soro, afei ɛtra hɔ). Fixed navbars de di dwuma position: fixed, a ɛkyerɛ sɛ wɔtwe wɔn fi DOM no nsu a ɛsen daa no mu na ebetumi ahwehwɛ CSS a wɔahyɛ da ayɛ (sɛ nhwɛso no, padding-topwɔ <body>) no so na asiw nneɛma afoforo a ɛbɛka abom no ano.

Afei nso hyɛ no nsow sɛ .sticky-topde di dwuma position: sticky, a wɔmfa mmoa koraa wɔ browser biara mu .

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

Suban ahorow a ɛma mmuae

Navbars betumi de .navbar-toggler, .navbar-collapse, ne .navbar-expand{-sm|-md|-lg|-xl}adesua ahorow adi dwuma de asesa bere a wɔn nsɛm no ahwe ase wɔ bɔtn bi akyi no. Sɛ wode nneɛma afoforo ka ho a, ɛnyɛ den sɛ wobɛpaw bere a wobɛkyerɛ anaa wode nneɛma pɔtee bi besie.

Sɛ wopɛ navbars a ɛnhwe ase da a, fa .navbar-expandclass no ka ho wɔ navbar no so. Navbars a ɛhwe ase bere nyinaa no, mfa .navbar-expandadesua biara nka ho.

Toggler a wɔde yɛ nneɛma

Navbar togglers no yɛ benkum-aligned default, nanso sɛ wodi sibling element akyi te sɛ a .navbar-brand, wɔbɛfa wɔn ho akɔ nifa so koraa. Sɛ wodan wo markup no a, ɛbɛdan toggler no a wode besi hɔ no. Ase hɔ no yɛ nhwɛso ahorow a ɛfa toggle style ahorow ho.

Bere a .navbar-brandwɔankyerɛ biara wɔ breakpoint a ɛba fam koraa mu:

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

Bere a wɔakyerɛ brand din wɔ benkum so ne toggler wɔ nifa so:

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

Na toggler wɔ benkum so na brand din wɔ nifa so:

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

Nsɛm a ɛwɔ akyi

Ɛtɔ da bi a wopɛ sɛ wode collapse plugin no di dwuma de kanyan nsɛm a ahintaw wɔ kratafa no baabi foforo. Esiane sɛ yɛn plugin no yɛ adwuma wɔ idne data-targetmatching no so nti, ɛno yɛ mmerɛw sɛ wɔbɛyɛ!

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