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
.navbar
cum 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-print
ad.navbar
. Vide utilitatem classis ostentationem . - Admitte accessibilitatem utendo
<nav>
elemento vel, si utens elementum magis genericum quale est<div>
, omnibus navbaris addererole="navigation"
ad eam ut regionem technologiarum assistivam usoribus expresse recognoscendam.
prefers-reduced-motion
interrogatione 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-brand
pro tuo comitatu, productum, vel project nomine..navbar-nav
ad plenam altitudinem et levem navigationem (auxilium pro stillicidiis includens)..navbar-toggler
ad usum cum ruina nostra plugin et aliae rationes navigationis toggling ..form-inline
pro qualibet forma regit et actiones..navbar-text
addendo perpendiculariter chordas textus..collapse.navbar-collapse
ad copulam et latebras navbar contenta a parente breakpoint.
Exemplum hic omnium sub-componentium inclusarum in nave responsivo levi lemmate quae sponte in lg
breakpoint (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-0
utilitatis my-sm-0
generibus.
Brand
Applicari .navbar-brand
potest 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-brand
voluntatem 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>
Nav
Navbar navigationis nexus in .nav
optiones 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 .active
pagina hodierna indicantes directe applicari possunt ad .nav-link
s 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-item
et .nav-link
ut 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 .navbar
utendi 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-color
utilitates earum. Elige ex .navbar-light
usu colorum levium colorum, vel .navbar-dark
colorum 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 .container
pagina involvere potes. .navbar
Vel 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-top
ne <body>
cum aliis elementis incidat.
Nota etiam .sticky-top
usus 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-scroll
a .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 — overflow
cum occasu overflow-y: auto
(requiritur hic ad librum contentum venire), overflow-x
instar est auto
, quod aliqua contentum horizontalem carpet.
Hic est exemplum navbar utens .navbar-nav-scroll
cum 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-expand
classem in navbar addunt. Navbars enim quae semper concidunt, nullam .navbar-expand
classem 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-brand
ostensum 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 id
et data-target
adaptans, 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-controls
attributum habeat, ostendens id
contenti continentis. In doctrina, hoc permittit utentes adiuvantes technologias ut salire protinus a toggler ad continentem regat-sed subsidium hoc in praesenti satis varius est.