Source

Upau wa urambazaji

Hati na mifano ya kichwa chenye nguvu cha urambazaji cha Bootstrap, upau wa urambazaji. Inajumuisha usaidizi wa kuweka chapa, usogezaji, na zaidi, ikijumuisha usaidizi wa programu-jalizi yetu ya kukunja.

Inavyofanya kazi

Hivi ndivyo unahitaji kujua kabla ya kuanza na upau wa urambazaji:

Navbars zinahitaji kufunikwa na .navbarkwa .navbar-expand{-sm|-md|-lg|-xl}ajili ya kuanguka na madarasa ya mpango wa rangi .
Navbar na yaliyomo ni kioevu kwa chaguo-msingi. Tumia vyombo vya hiari ili kupunguza upana wao mlalo.
Tumia madarasa yetu ya kuweka nafasi na kunyunyuzia matumizi kwa kudhibiti nafasi na upangaji ndani ya pau za urambazaji.
Navbar hujibu kwa chaguo-msingi, lakini unaweza kuzirekebisha kwa urahisi ili kubadilisha hiyo. Tabia ya kujibu inategemea programu-jalizi yetu ya Kunja JavaScript.
Navbar hufichwa kwa chaguo-msingi wakati wa uchapishaji. Lazimisha kuchapishwa kwa kuongeza .d-printkwenye .navbar. Tazama darasa la matumizi ya kuonyesha .
Hakikisha ufikivu kwa kutumia <nav>kipengele au, ikiwa unatumia kipengele cha kawaida zaidi kama vile <div>, ongeza a role="navigation"kwa kila upau wa urambazaji ili kutambua kwa uwazi kama eneo muhimu kwa watumiaji wa teknolojia saidizi.

Soma kwa mfano na orodha ya vijenzi vidogo vinavyotumika.

Maudhui yanayotumika

Navbar huja na usaidizi uliojengewa ndani kwa vijenzi vidogo vidogo. Chagua kutoka kwa zifuatazo kama inavyohitajika:

.navbar-brandkwa kampuni, bidhaa au jina la mradi wako.
.navbar-navkwa urambazaji wa urefu kamili na uzani mwepesi (pamoja na usaidizi wa menyu kunjuzi).
.navbar-togglerkwa matumizi na programu-jalizi yetu ya kukunja na tabia zingine za kugeuza usogezaji .
.form-inlinekwa vidhibiti na vitendo vya aina yoyote.
.navbar-textkwa kuongeza mifuatano ya maandishi iliyowekwa katikati wima.
.collapse.navbar-collapsekwa kupanga na kuficha yaliyomo kwenye upau wa urambazaji kwa njia ya mzazi.

Huu hapa ni mfano wa vipengee vidogo vyote vilivyojumuishwa katika upau wa urambazaji wa mada nyepesi ambayo huanguka kiotomatiki kwenye sehemu lg(kubwa) ya kukatika.

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

Mfano huu hutumia rangi ( bg-light) na nafasi ( my-2, my-lg-0, mr-sm-0, my-sm-0) madarasa ya matumizi.

Chapa

.navbar-brandInaweza kutumika kwa vipengele vingi, lakini nanga hufanya kazi vyema zaidi kwani baadhi ya vipengele vinaweza kuhitaji madarasa ya matumizi au mitindo maalum .

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

Kuongeza picha kwenye picha .navbar-brandkunaweza kuhitaji mitindo maalum au huduma ili saizi ipasavyo. Hapa kuna mifano ya kuonyesha.

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

Nav

Viungo vya usogezaji vya Upau wa urambazaji hujengwa juu ya .navchaguo zetu na darasa lao la kirekebishaji na vinahitaji matumizi ya aina za kigeuzaji kwa mtindo unaofaa. Urambazaji katika upau wa urambazaji pia utakua kuchukua nafasi nyingi za mlalo iwezekanavyo ili kuweka maudhui yako ya upau wa urambazaji yakiwa yamepangiliwa kwa usalama.

Hali amilifu-na .active-kuonyesha ukurasa wa sasa inaweza kutumika moja kwa moja kwa .nav-links au mzazi wao wa karibu .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="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Na kwa sababu tunatumia madarasa kwa navs zetu, unaweza kuepuka mbinu ya orodha kabisa ukipenda.

<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="#">Disabled</a>
    </div>
  </div>
</nav>

Unaweza pia kutumia menyu kunjuzi kwenye upau wa urambazaji nav. Menyu kunjuzi zinahitaji kipengele cha kufunga ili kuweka nafasi, kwa hivyo hakikisha kuwa umetumia vipengele tofauti na vilivyowekwa kwa ajili ya .nav-itemna .nav-linkkama inavyoonyeshwa hapa chini.

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

Fomu

Weka vidhibiti vya fomu mbalimbali na vipengele ndani ya upau wa urambazaji na .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>

Vipengee vya watoto vya papo hapo katika .navbarutumiaji mpangilio wa kunyumbulika na vitabadilika kuwa justify-content: between. Tumia huduma za ziada zinazobadilika inapohitajika kurekebisha tabia hii.

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

Vikundi vya kuingiza hufanya kazi pia:

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

Vifungo mbalimbali vinatumika kama sehemu ya fomu hizi za upau wa urambazaji, pia. Hili pia ni ukumbusho mzuri kwamba huduma za upatanishaji wima zinaweza kutumika kupatanisha vipengele vya ukubwa tofauti.

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

Maandishi

Navbar zinaweza kuwa na vipande vya maandishi kwa usaidizi wa .navbar-text. Darasa hili hurekebisha mpangilio wima na nafasi mlalo kwa mifuatano ya maandishi.

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

Changanya na ufanane na vifaa vingine na huduma kama inahitajika.

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

Mipango ya rangi

Kuweka mada kwenye upau wa urambazaji haijawahi kuwa rahisi kutokana na mchanganyiko wa madarasa ya mada na background-colorhuduma. Chagua kutoka .navbar-lightkwa matumizi na rangi nyepesi za mandharinyuma, au .navbar-darkkwa rangi nyeusi za mandharinyuma. Kisha, ubinafsishe na .bg-*huduma.

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

Vyombo

Ingawa haihitajiki, unaweza kuifunga upau wa urambazaji .containerili kuiweka katikati kwenye ukurasa au kuongeza moja ndani ili kuweka tu yaliyomo kwenye upau wa urambazaji usiobadilika au tuli .

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

Wakati kontena iko ndani ya upau wa urambazaji, pedi zake za mlalo huondolewa katika sehemu za chini zaidi kuliko .navbar-expand{-sm|-md|-lg|-xl}darasa lako ulilobainisha. Hii inahakikisha kwamba hatuongezeki kwenye pedi isivyofaa kwenye tovuti za chini za kutazama wakati upau wa urambazaji umekunjwa.

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

Uwekaji

Tumia huduma zetu za nafasi kuweka navbar katika nafasi zisizo tuli. Chagua kutoka fasta hadi juu, fasta hadi chini, au sticked hadi juu (kusonga na ukurasa mpaka kufikia juu, kisha kubaki hapo). Navbars zisizohamishika zinatumia position: fixed, kumaanisha kuwa zimetolewa kutoka kwa mtiririko wa kawaida wa DOM na zinaweza kuhitaji CSS maalum (kwa mfano, padding-topkwenye <body>) ili kuzuia mwingiliano na vipengele vingine.

Pia kumbuka kuwa .sticky-tophutumia position: sticky, ambayo haitumiki kikamilifu katika kila kivinjari .

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

Tabia za mwitikio

Navbar zinaweza kutumia .navbar-toggler, .navbar-collapse, na .navbar-expand{-sm|-md|-lg|-xl}madarasa kubadilisha maudhui yao yanapoanguka nyuma ya kitufe. Pamoja na huduma zingine, unaweza kuchagua kwa urahisi wakati wa kuonyesha au kuficha vipengele fulani.

Kwa pau za urambazaji ambazo hazikunji kamwe, ongeza .navbar-expanddarasa kwenye upau wa urambazaji. Kwa pau za urambazaji zinazoanguka kila wakati, usiongeze .navbar-expanddarasa lolote.

Toggler

Vigeuzi vya Upau wa Uelekezaji vimepangiliwa kushoto kwa chaguo-msingi, lakini iwapo vitafuata kipengele cha ndugu kama .navbar-brand, vitapangwa kiotomatiki upande wa kulia kabisa. Kurejesha lebo yako kutabadilisha uwekaji wa kigeuzaji. Ifuatayo ni mifano ya mitindo tofauti ya kugeuza.

Bila .navbar-brandkuonyeshwa katika sehemu ya chini kabisa:

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

Kwa jina la chapa iliyoonyeshwa upande wa kushoto na kigeuza kulia:

<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="#">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 kigeuza kushoto na jina la chapa kulia:

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

Maudhui ya nje

Wakati mwingine ungependa kutumia programu-jalizi ya kukunja ili kuanzisha maudhui yaliyofichwa mahali pengine kwenye ukurasa. Kwa sababu programu-jalizi yetu inafanya kazi kwenye idna data-targetkulinganisha, hiyo inafanywa kwa urahisi!

Collapsed content

Toggleable via the navbar brand.

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