Navbar
Mikanda mpe bandakisa mpo na motó ya botamboli ya nguya, ya eyano ya Bootstrap, navbar. Esangisi lisungi mpo na kosala marque, navigation, plugin ya kokwea, mpe mingi mosusu.
Ndenge oyo esalaka
Tala oyo esengeli oyeba liboso ya kobanda na navbar:
- Navbars esengaka enveloppe
.navbar
na.navbar-expand{-sm|-md|-lg|-xl}
pona ba classes ya collapsing responsive na scheme ya couleur . - Ba Navbars na ba contenus na yango eza fluide par défaut. Salelá ba récipients oyo okoki kopona mpo na kopekisa bonene na yango ya horizontal.
- Salelá ba classes na biso ya espacement mpe flex utilitaire mpo na ko contrôler espacement mpe alignment na kati ya ba navbars.
- Navbars ezali responsive par défaut, kasi okoki ko modifier yango facilement pona ko changer yango. Comportement ya réponse etali plugin na biso ya Collapse JavaScript.
- Ba Navbars ebombamaka na ndenge ya libela ntango ya konyata. Na makasi ete bányata yango na kobakisáká
.d-print
na.navbar
. Tala kelasi ya utilitaire ya kolakisa . - Kosala ete bozwi na kosalelaka
<nav>
eleman moko to, soki bosaleli eleman moko ya monene mingi lokola a<div>
, bakisa arole="navigation"
na navbar nyonso mpo na koyeba yango polele lokola etuka ya esika ya ntina mpo na basaleli ya mayele ya kosunga.
prefers-reduced-motion
requête ya média. Tala
eteni ya mouvement réduit ya mikanda na biso ya accessibilité .
Makambo oyo esungami
Navbars ezalaka na soutien intégré mpo na mwa ndambo ya ba sous-composants. Poná kati na makambo oyo elandi soki esengeli:
.navbar-brand
mpo na kompanyi na yo, biloko na yo, to nkombo ya mosala na yo..navbar-nav
mpo na navigation ya bosanda mobimba mpe ya pete (na kati na yango lisungi mpo na ba dropdowns)..navbar-toggler
mpo na kosalela na plugin na biso ya kokwea mpe bizaleli mosusu ya kobongola navigation ..form-inline
mpo na ba contrôles ya forme nionso mpe ba actions..navbar-text
mpo na kobakisa bansinga ya makomi oyo ezali na katikati ya semba..collapse.navbar-collapse
mpo na kosangisa mpe kobomba makambo ya navbar na esika ya bopanzani ya moboti.
Tala ndakisa ya ba sous-composants nionso oyo ekotisami na navbar oyo ezo répondre na thème ya lumière oyo ezo collapser automatiquement na lg
point de rupture (ya munene).
<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>
Ndakisa oyo esaleli ba classes ya utilité ya couleur ( bg-light
) na espacement ( my-2
, my-lg-0
, mr-sm-0
, ).my-sm-0
Marke
The .navbar-brand
ekoki kosalelama na ba éléments mingi, kasi anchor esalaka malamu koleka, lokola ba éléments mosusu ekoki kosenga ba classes ya utilité to ba styles personnalisés.
<!-- 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>
Kobakisa bililingi na .navbar-brand
ekosɛnga mbala mosusu ntango nyonso ba styles to ba utilitaires personnalisés mpo na bonene oyo ebongi. Talá mwa bandakisa oyo tokoki komonisa.
<!-- 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
Ba liens ya navigation ya Navbar etongami na ba .nav
options na biso na classe na bango moko ya modificateur mpe esengaka kosalela ba classes ya toggler mpo na styling ya réponse ya malamu. Navigation na ba navbars ekokola pe pona ko occuper espace horizontal ebele ndenge ekoki pona ko garder ba contenus ya navbar na yo na sécurité aligné.
Ba états .active
actifs —na —mpo na kolakisa lokasa ya lelo ekoki kosalelama mbala moko na .nav-link
s to baboti na bango ya penepene .nav-item
s.
<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 po tosalelaka ba classes pona ba navs na biso, okoki ko éviter approche basé na liste entièrement soki olingi.
<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>
Okoki mpe kosalela ba dropdowns na navbar na yo. Ba menu ya kokita esengaka élément ya enveloppe mpo na positionnement, yango wana sala makasi osalela ba éléments separates mpe encastrés mpo na .nav-item
mpe .nav-link
ndenge elakisami awa na se.
<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>
Baformilɛrɛ
Tia ba contrôles ya formulaire ndenge na ndenge na ba composants na kati ya navbar 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>
Ba éléments ya mwana ya mbala moko ya .navbar
kosalela flex layout mpe ekozala par défaut na justify-content: space-between
. Salelá ba utilitaires flex ya kobakisa soki esengeli mpo na kobongisa bizaleli oyo.
<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>
Ba groupes ya entrée esalaka, pe:
<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>
Ba boutons ndenge na ndenge esungami lokola eteni ya ba formulaire oyo ya navbar, mpe. Oyo ezali mpe bokundoli monene ete ba utilitaires ya alignment vertical ekoki kosalelama mpo na ko aligner ba éléments ya taille différente.
<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>
Nkoma
Navbars ekoki kozala na biteni ya makomi na lisalisi ya .navbar-text
. Kelasi oyo ebongisaka alignment vertical mpe espacement horizontal mpo na ba chaînes ya texte.
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Sangisa mpe kosangisa na ba composants mpe ba utilitaires mosusu soki esengeli.
<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>
Ba schemes ya ba couleurs
Thème ya navbar ezalaki jamais facile grâce na combinaison ya ba classes ya thème na ba background-color
utilitaires. Pona kati na yango .navbar-light
mpo na kosalela yango na balangi ya nsima ya pole, to .navbar-dark
mpo na balangi ya nsima ya moindo. Na nsima, personnaliser na ba .bg-*
utilités.
<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>
Ba récipients
Atako esengeli te, okoki kozinga navbar na a .container
mpo na kotya yango na katikati na lokasa moko. To okoki kobakisa eloko moko na kati ya .navbar
mpo na kotya kaka na katikati ya makambo oyo ezali na kati ya navbar ya likoló oyo ezali kotɛngatɛnga to oyo ezali kotɛngatɛnga te .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
Tango conteneur ezali na kati ya navbar na yo, remplissage horizontal na yango elongolamaka na ba points de rupture na se ya .navbar-expand{-sm|-md|-lg|-xl}
classe na yo oyo olakisaki. Yango ezali kosala ete tozali te ko doubler likolo na padding na ntina te na ba viewports ya nse ntango navbar na yo ezali kokweya.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Botiami na esika
Salelá ba utilitaires na biso ya position mpo na kotia ba navbars na ba positions oyo ezali statique te. Poná kati na oyo ekangami na likoló, ekangami na nse, to ekangami na likoló (kosala défilement na lokasa tii ekokóma na likoló, na nsima etikalaka wana). Ba navbars fixes esalela position: fixed
, elingi koloba ba bendami na flux normal ya DOM mpe ekoki kosenga CSS personnalisé (ndakisa, padding-top
na <body>
) mpo na kopekisa superposition na ba éléments mosusu.
Yeba mpe ete .sticky-top
esalela position: sticky
, oyo esimbami mobimba te na navigateur nyonso .
<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>
Kosala défilement
Bakisa .navbar-nav-scroll
na .navbar-collapse
(to sous-composant mosusu ya navbar) mpo na kopesa nzela na défilement vertical na kati ya makambo oyo ekoki kobongola ya navbar oyo ekangami. Na ndenge ya libela, kosala défilement ebandi na 75vh
(to 75% ya bosanda ya esika ya kotala), kasi okoki koboya yango na ba styles ya inline to ya personnalisé. Na ba viewports ya minene tango navbar epanzani, contenus ekobima ndenge esalemaka na navbar ya défaut.
Svp yeba que comportement oyo eza na inconvénient potentiel ya overflow
—ntango setting overflow-y: auto
(esengeli pona ko défiler contenus awa), overflow-x
ezali équivalent ya auto
, oyo eko crop mua contenus horizontal.
Tala ndakisa navbar kosalela .navbar-nav-scroll
na style="max-height: 100px;"
, na mwa ba utilitaires ya marge ya likolo mpo na espacement optimal.
<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>
Bizaleli ya koyanola
Navbars ekoki kosalela .navbar-toggler
, .navbar-collapse
, mpe .navbar-expand{-sm|-md|-lg|-xl}
bakelasi mpo na koyeba ntango nini makambo na yango ekwei nsima ya bouton moko. Na kosangisa na ba utilitaires mosusu, okoki kopona na pete tango nini kolakisa to kobomba ba éléments particuliers.
Mpo na ba navbar oyo ekweaka ata moke te, bakisa .navbar-expand
kelasi na navbar. Pona ba navbars oyo ezo collapser toujours, kobakisa .navbar-expand
classe moko te.
Moto oyo azali kobongola makambo
Ba togglers ya Navbar ezali na gauche-aligné par défaut, kasi soki balandi élément ya ndeko lokola .navbar-brand
, bakozala automatiquement aligné na extreme droite. Kozongisa sima marquage na yo ekozongisa sima placement ya toggler. Awa na se ezali na bandakisa ya ba styles ya toggle ekeseni.
Na ata moko te .navbar-brand
elakisami na esika ya kobukana ya moke koleka:
<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>
Na kombo ya marque oyo elakisami na gauche mpe toggler na droite:
<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>
Na toggler na gauche mpe kombo ya marque na droite:
<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>
Makambo ya libanda
Tango mosusu olingi kosalela plugin ya collapse mpo na ko déclencher élément ya conteneur mpo na contenus oyo structurellement efandi libanda ya .navbar
. Po plugin na biso esalaka na id
pe data-target
matching, yango esalemaka facilement!
<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>
Ntango ozali kosala bongo, tozali kolendisa yo otya JavaScript mosusu mpo na komema focus na ndenge ya programɛ na esika oyo batyaka biloko ntango ekofungwama. Soki te, basaleli ya klaviatware mpe basaleli ya mayele ya kosunga bakozala mbala mosusu na mokakatano mpo na koluka makambo oyo emonisami sika - mingimingi soki eloko oyo efungolamaki eyei liboso ya mobongisi-nzela na ebongiseli ya mokanda. Tosengi mpe kosala ete toggler ezala na aria-controls
attribut, kolakisa na id
ya conteneur ya contenus. Na théorie, yango epesaka nzela na basaleli ya tekiniki ya lisalisi mpo na kopumbwa mbala moko uta na toggler kino na conteneur oyo yango ezali kotambwisa–kasi lisungi mpo na oyo ezali na ntango oyo mpenza patchy.