in English

Navbar

Documenta et exempla pro Bootstrap potens, caput navigationis responsive, navbarum. Auxilium notans, navigationis, ruinae plugin includit et plura.

Quomodo facitur

Ecce id quod debes scire antequam cum navbar incepit:

  • Navbars involucrum requirunt .navbarcum classibus labentis et colori.navbar-expand{-sm|-md|-lg|-xl} dociles .
  • Navbars et earum contenta per defaltam fluida sunt. Vasis ad libitum utere ut earum latitudinem horizontalem circumscribant.
  • Nostris spatiis et flectibus utere utilibus generibus ad spatiis et alignment intra navbarum moderandis .
  • Navbars per defaltam respondeant, sed eas facile mutare potes. Mores responsabilitatis a nostro Collapse JavaScript plugin pendet.
  • Navbars per defaltam excudendi occultatur. Coge eas imprimi addendo .d-printad .navbar. Vide utilitatem classis ostentationem .
  • Admitte accessibilitatem utendo <nav>elemento vel, si utens elementum magis genericum quale est <div>, omnibus navbaris addere role="navigation"ad eam ut regionem technologiarum assistivam usoribus expresse recognoscendam.
Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione instrumentorum. Videre motum sectionem accessibilitatis nostrae documentationis reductam .

Supported content

Navbars cum paucis subiunctis aedificato in subsidium veniunt. Elige ex his ut opus fuerit:

  • .navbar-brandpro tuo comitatu, productum, vel project nomine.
  • .navbar-navad plenam altitudinem et levem navigationem (auxilium pro stillicidiis includens).
  • .navbar-togglerad usum cum ruina nostra plugin et aliae rationes navigationis toggling .
  • .form-inlinepro qualibet forma regit et actiones.
  • .navbar-textaddendo perpendiculariter chordas textus.
  • .collapse.navbar-collapsead copulam et latebras navbar contenta a parente breakpoint.

Exemplum hic omnium sub-componentium inclusarum in nave responsivo levi lemmate quae sponte in lgbreakpoint (magna) concidit.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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>

Hoc exemplo utitur colore ( bg-light) et spatio ( my-2, my-lg-0, ) mr-sm-0utilitatis my-sm-0generibus.

Brand

Applicari .navbar-brandpotest pluribus elementis, sed anchora opera optima, ut quaedam elementa utilitatis generum vel stylorum consuetudinum requirant.

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

Imagines addendo ad .navbar-brandvoluntatem veri simile semper stylos vel utilitates ad magnitudinem proprie requirent. Hic aliquot exempla demonstranda sunt.

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

Navbar navigationis nexus in .navoptiones nostras aedificant cum suo proprio genere determinativo et usum toggler classium requirunt ad stylum proprium respondendi. Navigatio in navbaribus crescet etiam ad spatium horizontale occupandum quam maxime ad contenta navbarum tutanda conservanda.

Civitates activae - cum .activepagina hodierna indicantes directe applicari possunt ad .nav-links vel ad proximum parentem suum .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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Et quia classibus nostris utimur navigiis, potes indicem substructum omnino accedere, si lubet.

<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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Etiam stillicidiis uti in navbaribus tuis potes. Menus dropdown requirunt elementum involuti pro positione, ita scito uti elementis separatis et nidificatis pro .nav-itemet .nav-linkut infra ostendetur.

<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

Formae

Pone varias formas controllata et composita intra navbar cum .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>

Pueri elementa immediata extensionis flexae .navbarutendi et deficere debent justify-content: space-between. Utere additional utilitates inflectere ut opus ad hunc agendi modum accommodent.

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

Circuli input etiam laborant;

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

Variae globuli fulciuntur ut pars harum formarum navbarum quoque. Hoc etiam magnum est monumentum quod utilitates dam verticalis adhiberi possunt ad varias mediocritates ponendas.

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

Textum

Navbars particulas textus ope continere potest .navbar-text. Classis haec verticalem alignment et horizontalem spatii chordarum textuum accommodat.

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

Miscere et aequare cum aliis componentibus et utilitatibus prout opus est.

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

Color consilia

Lemma navbarum numquam facilius egit propter compositionem classes et background-colorutilitates earum. Elige ex .navbar-lightusu colorum levium colorum, vel .navbar-darkcolorum obscurorum colorum. Deinde mos cum .bg-*utilitate.

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

Continentes

Etsi non requiritur, navbarem in .containerpagina involvere potes. .navbarVel vas in medio ad solum centrum contenta capitis navbar fixi seu statice addere potes .

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

Cum continens intra navbarum tuum est, eius color horizontalis sub punctorum interpunctionibus submovetur minor quam .navbar-expand{-sm|-md|-lg|-xl}classis tua. Hoc efficit ut ne duplices in commentatione super- spectorum inferiorum, cum navbarum tuum collapsum sit.

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

Placement

Utere positione nostra utilitates ad collocandas navbares in positionibus non-staticis. Elige a summo ad fixa, vel ad imum fixa, vel in cacumen haerere (cum paginae cartulas usque ad summum pervenerit, ibi remanet). Usus navbarum fixum position: fixed, significantes se e normali fluxu domae trahi et consuetudo CSS (exempli gratia) requirere potest padding-topne <body>cum aliis elementis incidat.

Nota etiam .sticky-topusus position: sticky, qui non plene in omni navigatro sustentatur .

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

Scrolling

Adde .navbar-nav-scrolla .navbar-collapse(vel aliis navbar sub-componentibus) ut volumen verticalem efficiat intra contenta toggleabilium navbaris collapsae. Defalta, scrolling calcibus in ad 75vh(vel 75% e regione prospecti altitudinis), sed vincire potes quod cum stylis inlineis vel consuetudinibus. In amplioribus aspectibus cum navbar dilatetur, contentus apparebit sicut in defalta navbar.

Quaeso note hunc agendi modum cum potentiale incommodo — overflowcum occasu overflow-y: auto(requiritur hic ad librum contentum venire), overflow-xinstar est auto, quod aliqua contentum horizontalem carpet.

Hic est exemplum navbar utens .navbar-nav-scrollcum style="max-height: 100px;"aliquibus extra margine utilitatibus ad optimum spacing.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Responsivum se gerendi rationibus

Navbars uti possunt .navbar-toggler, .navbar-collapse, et .navbar-expand{-sm|-md|-lg|-xl}classes determinare cum contenta sua post puga pyga collapsa sunt. Cum aliis utilitatibus coniuncti, facile eligere potes quando elementa particularia demonstrare vel abscondere.

Nam navbars qui nunquam concidunt, .navbar-expandclassem in navbar addunt. Navbars enim quae semper concidunt, nullam .navbar-expandclassem addunt.

Toggler

Navbar togglers per defaltam varius relictus est, sed si fratrem quasi elementum sequantur .navbar-brand, automatice ad ius tenus perpendentur. Aversando notam tuam retexam collocationem toggler. Infra exempla toggle stylorum diversorum sunt.

Cum nihil .navbar-brandostensum est ad minimum breakpoint;

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

Cum notam nomen ostendit in dextra et toggler ad sinistram;

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

Cum toggler ad sinistram et notam nomen in dextro;

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

Contentum externum

Interdum uti vis ruinae plugin ut felis elementum continente pro contento quod structuraliter extra corpus sedet .navbar. Quia plugin nostra operatur in idet data-targetadaptans, id facile fieri!

<div class="fixed-top">
  <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>

Quod cum feceris, commendamus etiam JavaScript addito ad umbilicum programmatice movendum ad continentem cum aperitur. Alioquin, tincidunt usores et utentes technologiarum adiuvantium verisimile habebunt tempus difficile inveniendi contentum recentem revelatum - praesertim si continens apertus praecedat toggler in structura documenti. Commendamus etiam ut fideles toggler aria-controlsattributum habeat, ostendens idcontenti continentis. In doctrina, hoc permittit utentes adiuvantes technologias ut salire protinus a toggler ad continentem regat-sed subsidium hoc in praesenti satis varius est.