Source

Navbar

Dokumentazzjoni u eżempji għall-header tan-navigazzjoni b'saħħtu u reattiv ta' Bootstrap, in-navbar. Jinkludi appoġġ għal branding, navigazzjoni, u aktar, inkluż appoġġ għall-plugin tal-kollass tagħna.

Kif taħdem

Hawn dak li għandek bżonn tkun taf qabel tibda bin-navbar:

In-Navbars jeħtieġu tgeżwir .navbarbi għal klassijiet ta' skema ta' skema ta' .navbar-expand{-sm|-md|-lg|-xl}kollass u ta' kuluri li jirrispondu.
In-Navbars u l-kontenut tagħhom huma fluwidi awtomatikament. Uża kontenituri fakultattivi biex tillimita l-wisa' orizzontali tagħhom.
Uża l-klassijiet tal-utilità tal- ispazjar u l- flex tagħna biex tikkontrolla l-ispazjar u l-allinjament fi ħdan in-navbars.
In-Navbars jirrispondu awtomatikament, iżda tista 'faċilment timmodifikahom biex tbiddel dan. L-imġieba reattiva tiddependi fuq il-plugin JavaScript tagħna Kollass.
In-Navbars huma moħbija awtomatikament meta jiġu stampati. Ġegħlilhom jiġu stampati billi żżid .d-printmal- .navbar. Ara l -klassi ta 'utilità tal - wiri .
Żgura l-aċċessibbiltà billi tuża <nav>element jew, jekk tuża element aktar ġeneriku bħal <div>, żid a role="navigation"ma' kull navbar biex tidentifikaha b'mod espliċitu bħala reġjun importanti għall-utenti ta' teknoloġiji ta' assistenza.

L-effett ta 'animazzjoni ta' dan il-komponent jiddependi fuq il prefers-reduced-motion-mistoqsija tal-midja. Ara t- taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .

Kompli aqra għal eżempju u lista ta 'sottokomponenti appoġġjati.

Kontenut appoġġjat

Navbars jiġu b'appoġġ integrat għal numru żgħir ta 'sottokomponenti. Agħżel minn dawn li ġejjin kif meħtieġ:

.navbar-brandgħall-kumpanija, prodott, jew isem tal-proġett tiegħek.
.navbar-navgħal navigazzjoni ta' għoli sħiħ u ħafifa (inkluż appoġġ għal dropdowns).
.navbar-togglergħall-użu mal-plugin kollass tagħna u imgieba oħra ta 'toggling tan-navigazzjoni .
.form-inlinegħal kwalunkwe forma ta' kontrolli u azzjonijiet.
.navbar-textgħaż-żieda ta' kordi ta' test ċċentrata vertikalment.
.collapse.navbar-collapsegħall-raggruppament u l-ħabi tal-kontenut tan-navbar minn breakpoint ġenitur.

Hawn eżempju tas-sottokomponenti kollha inklużi f'navbar b'tema ħafifa li tirrispondi li awtomatikament tikkollassa fil- lgpunt ta 'waqfien (kbir).

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

Dan l-eżempju juża klassijiet ta' utilità tal- kulur ( bg-light) u spazjar ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Brand

Jista ' .navbar-brandjiġi applikat għal ħafna elementi, iżda ankra taħdem l-aħjar peress li xi elementi jistgħu jeħtieġu klassijiet ta' utilità jew stili tad-dwana.

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

Iż-żieda ta 'immaġini mar- .navbar-brandrieda x'aktarx dejjem teħtieġ stili jew utilitajiet tad-dwana għad-daqs xieraq. Hawn huma xi eżempji biex juru.

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

Nav

Ir-rabtiet tan-navigazzjoni tan-Navbar jibnu fuq l- .navgħażliet tagħna bil-klassi modifikatur tagħhom stess u jeħtieġu l-użu ta ' klassijiet toggler għal stil reattiv xieraq. In-navigazzjoni fin-navbars se tikber ukoll biex tokkupa spazju orizzontali kemm jista' jkun biex iżżomm il-kontenut tan-navbar tiegħek allinjat b'mod sikur.

Stati attivi—bi .active—biex jindika l-paġna kurrenti jistgħu jiġu applikati direttament għal .nav-links jew ġenitur immedjat tagħhom .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>

U minħabba li nużaw klassijiet għan-navs tagħna, tista' tevita kompletament l-approċċ ibbażat fuq il-lista jekk tixtieq.

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

Tista' wkoll tuża dropdowns fin-navbar tiegħek. Il-menus dropdown jeħtieġu element tat-tgeżwir għall-ippożizzjonar, għalhekk kun żgur li tuża elementi separati u nested għal .nav-itemu .nav-linkkif muri hawn taħt.

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

Formoli

Poġġi diversi kontrolli tal-forma u komponenti fi ħdan navbar b' .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>

Elementi tat-tfal immedjati fl- .navbarużu flex layout u se default għal justify-content: space-between. Uża utilitajiet flex addizzjonali kif meħtieġ biex taġġusta din l-imġieba.

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

Il-gruppi tal-input jaħdmu wkoll:

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

Diversi buttuni huma appoġġjati wkoll bħala parti minn dawn il-formoli tan-navbar. Din hija wkoll tfakkira kbira li l-utilitajiet ta 'allinjament vertikali jistgħu jintużaw biex jallinjaw elementi ta' daqs differenti.

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

Test

Navbars jista 'jkun fihom bits ta' test bl-għajnuna ta ' .navbar-text. Din il-klassi taġġusta l-allinjament vertikali u l-ispazjar orizzontali għall-kordi tat-test.

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

Ħallat u qabbel ma 'komponenti u utilitajiet oħra kif meħtieġ.

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

Skemi tal-kulur

It-tema tan-navbar qatt ma kienet daqshekk faċli grazzi għall-kombinazzjoni ta' klassijiet ta' temi u background-colorutilitajiet. Agħżel minn .navbar-lightgħall-użu ma 'kuluri ta' sfond ċari, jew .navbar-darkgħal kuluri ta 'sfond skur. Imbagħad, ippersonalizza bl- .bg-*utilitajiet.

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

Kontenituri

Għalkemm mhux meħtieġ, tista' tgeżwer navbar f'a .containerbiex tiċċentraha fuq paġna jew iżżid waħda ġewwa biex tiċċentra biss il-kontenut ta' navbar ta' fuq fissa jew statika .

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

Meta l-kontenitur ikun fi ħdan in-navbar tiegħek, l-ikkuttunar orizzontali tiegħu jitneħħa f'punti ta' waqfien aktar baxxi mill- .navbar-expand{-sm|-md|-lg|-xl}klassi speċifikata tiegħek. Dan jiżgura li ma nkunux qed nirduppjaw l-ikkuttunar bla bżonn fuq viewports aktar baxxi meta n-navbar tiegħek tkun ikkollassata.

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

Pjazzament

Uża l- utilitajiet tal-pożizzjoni tagħna biex tpoġġi navbars f'pożizzjonijiet mhux statiċi. Agħżel minn fiss għal fuq, imwaħħal mal-qiegħ, jew imwaħħal mal-quċċata (scrolls mal-paġna sakemm tasal fil-quċċata, imbagħad tibqa hemm). Navbars fissi jużaw position: fixed, li jfisser li qed jinġibdu mill-fluss normali tad-DOM u jistgħu jeħtieġu CSS personalizzati (eż., padding-topfuq il- <body>) biex jipprevjenu koinċidenza ma 'elementi oħra.

Innota wkoll li .sticky-topjuża position: sticky, li mhuwiex appoġġjat bis-sħiħ f'kull 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>

Imgieba reattivi

Navbars jistgħu jutilizzaw .navbar-toggler, .navbar-collapse, u .navbar-expand{-sm|-md|-lg|-xl}klassijiet biex jinbidlu meta l-kontenut tagħhom jiġġarraf wara buttuna. Flimkien ma 'utilitajiet oħra, tista' faċilment tagħżel meta turi jew taħbi elementi partikolari.

Għal navbars li qatt ma jikkollassaw, żid il- .navbar-expandklassi fuq in-navbar. Għal navbars li dejjem jikkrollaw, iżżid l-ebda .navbar-expandklassi.

Toggler

It-togglers tan-Navbar huma allinjati max-xellug b'mod awtomatiku, iżda jekk isegwu element aħwa bħal .navbar-brand, huma awtomatikament jiġu allinjati mal-lemin estrem. It-treġġigħ lura tal-markup tiegħek ser ireġġa' lura t-tqegħid tal-toggler. Hawn taħt hemm eżempji ta 'stili ta' toggle differenti.

Mingħajr ma .navbar-brandjintwera fl-inqas punt ta' waqfien:

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

B'isem tad-ditta muri fuq ix-xellug u toggler fuq il-lemin:

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

Bi toggler fuq ix-xellug u isem tad-ditta fuq il-lemin:

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

Kontenut estern

Xi drabi trid tuża l-plugin tal-kollass biex tiskatta kontenut moħbi x'imkien ieħor fil-paġna. Minħabba li l-plugin tagħna jaħdem fuq idu t- data-targettqabbil, dan isir faċilment!

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>