Sɛbɛnw ni misaliw Bootstrap ka navigatiɔn kuncɛ barikama, min bɛ jaabi di, n’o ye navbar ye. A bɛ dɛmɛ don a la ka ɲɛsin markali ma, navigatiɔn ani fɛn wɛrɛw ma, o la, dɛmɛ bɛ sɔrɔ an ka collapse plugin la.
A bɛ baara kɛ cogo min na
Aw ka kan ka fɛn minnu dɔn sani aw ka navbar daminɛ, olu filɛ nin ye:
Navbars bɛ ɲini wrapping .navbarni .navbar-expand{-sm|-md|-lg|-xl}for responsive collapsing ani color scheme classes.
Navbarw n’u kɔnɔkow ye ji ye ka da a kan. Aw bɛ baara kɛ ni minɛnw ye minnu bɛ se ka kɛ walasa ka dan sigi u bonya tilennen na.
Baara kɛ ni an ka spacing ani flex utility classes ye walasa ka spacing ni alignment kɔlɔsi navbars kɔnɔ.
Navbars bɛ jaabi di ka da a kan, nka i bɛ se k’u ladilan nɔgɔya la walasa k’o Changer. Jaabi kɛcogo bɛ bɔ an ka Collapse JavaScript plugin de la.
Navbarw bɛ dogo ka kɛɲɛ ni u yɛrɛ ye ni u bɛ sɛbɛnni kɛ. Wajibiya u ka sɛbɛn ni farali .d-printye .navbar. Aw ye jiracogo nafama kalasi lajɛ.
Aw ye aw janto sɔrɔli la ni baara kɛli ye ni <nav>fɛn dɔ ye walima, ni aw bɛ baara kɛ ni fɛn dɔ ye min ka ca ni fɛn bɛɛ ye i n’a fɔ a <div>, aw bɛ a fara role="navigation"navbar bɛɛ kan walasa k’a jira k’a jɛya ko a ye yɔrɔ taamasiyɛn ye dɛmɛni fɛɛrɛw baarakɛlaw bolo.
Aw ye kalan kɛ ka taa ɲɛ walasa ka misali dɔ sɔrɔ ani yɔrɔ fitinin minnu bɛ dɛmɛ sɔrɔ, olu lisɛli.
Kɔnɔkow minnu bɛ dɛmɛ
Navbarw bɛ na ni dɛmɛni ye min bɛ don a kɔnɔ ka ɲɛsin bolomafara fitinin dɔw ma. Aw bɛ ninnu sugandi ni aw mago bɛ a la:
.navbar-brandka ɲɛsin i ka sosiyete, i ka fɛn dilannen, walima i ka porozɛ tɔgɔ ma.
.navbar-navwalasa ka navigatiɔn dafalen ni nɔgɔya sɔrɔ (dɛmɛni fana sen bɛ o la ka ɲɛsin jiginɛw ma).
.navbar-togglerka baara kɛ ni an ka collapse plugin ye ani navigation toggling kɛcogo wɛrɛw.
.form-inlineka ɲɛsin foroko o cogoya kɔlɔsili ni walew ma.
.navbar-textwalasa ka sɛbɛnniw sɛrɛw fara ɲɔgɔn kan minnu bɛ cɛmancɛ jɔlen na.
.collapse.navbar-collapseka navbar kɔnɔkow kulu ni u dogo bangebaga ka kariyɔrɔ dɔ fɛ.
Nin ye misali ye min bɛ yɔrɔ fitininw bɛɛ la minnu bɛ jaabi yeelen-ko-ɲɛnabɔ-navbar kɔnɔ min bɛ bin a yɛrɛma lg(ba) kariyɔrɔ la.
Nin misali in bɛ baara kɛ ni kulɛri ( bg-light) ni yɔrɔjan ( my-2, my-lg-0, mr-sm-0, my-sm-0) nafama kalasiw ye.
Mariki
The .navbar-brandbɛ se ka kɛ fɛn fanba la, nka ankɔri bɛ baara kɛ ka ɲɛ bawo fɛn dɔw bɛ se ka nafalanw walima ladamu cogoyaw de wajibiya.
Jaw farali ja kan, a ka c’a la, o .navbar-brandbɛna kɛ sababu ye tuma bɛɛ ka ladamu cogoyaw walima nafamafɛnw kɛ walasa u ka bonya ka ɲɛ. Misali dɔw filɛ nin ye minnu bɛ se ka jira.
Nav
Navbar navigation links bɛ jɔ an ka .navsugandiliw kan n’u yɛrɛ ka modifier class ye ani u bɛ baara kɛ ni toggler classes ye walasa ka jaabi kɛcogo ɲuman sɔrɔ. Navigation in navbars fana bɛna bonya walasa ka yɔrɔ horizontal caman minɛ i n’a fɔ a bɛ se ka kɛ cogo min na walasa i ka navbar kɔnɔkow ka to u cogo la ka ɲɛ.
Active states—ni .active—ka ɲɛ min bɛ yen sisan, olu jira, olu bɛ se ka kɛ ka ɲɛsin .nav-links ma walima u bangebaga gɛrɛfɛ .nav-items ma.
Wa ikomi an bɛ baara Kɛ ni kalanw ye an ka navs (navs) kama, i bɛ Se k'i yɛrɛ Kɔrɔbɔ list-based approach (list-based approach) la pewu n'i b'a fɛ.
Aw bɛ se fana ka baara kɛ ni fɛnw ye minnu bɛ bɔ aw ka navbar nav kɔnɔ. Meniw minnu bɛ jigin, olu bɛ fɛn dɔ de wajibiya min bɛ kɛ ka fɛnw siri, o la, aw ye aw jija ka baara kɛ ni fɛnw ye minnu bɛ danfara la ani minnu bɛ sigi sen kan .nav-itemani .nav-linki n’a fɔ a jiralen bɛ cogo min na jukɔrɔ.
Sɛbɛnw
Aw bɛ foroko kunkankow ni yɔrɔw suguya caman bila navbar kɔnɔ ni .form-inline.
Teliya denmisɛnw elements in .navbarusage flex layout ani bɛna default kɛ justify-content: between. Aw bɛ baara kɛ ni flex utilité wɛrɛw ye i n’a fɔ aw mago bɛ cogo min na walasa ka o kɛcogo ladilan.
Donan kuluw bɛ baara kɛ, olu fana:
Butɔn suguya caman bɛ dɛmɛ ka kɛ nin navbar foroko ninnu dɔ ye, olu fana. Nin fana ye hakilijiginba ye ko jɛgɛncogo nafamafɛnw bɛ se ka kɛ ka fɛnw labɛn minnu bonya tɛ kelen ye.
Masalabolo
Navbarw bɛ se ka sɛbɛnni bitikiw sɔrɔ ni dɛmɛ ye .navbar-text. Nin kalan in bɛ ɲɔgɔndan jɔlenw ni janya tilennenw ladilan sɛbɛnniw sɛrɛw kama.
Aw bɛ a ɲagami ka a bɛn ni a yɔrɔ wɛrɛw ni nafamafɛnw ye ni aw mago bɛ a la.
Kulɛriw cogoyaw
Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.
Containers
Although it’s not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
Placement
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.
Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
Toggler
Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
With no .navbar-brand shown in lowest breakpoint:
With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
External content
Tuma dɔw la, i b’a fɛ ka baara kɛ ni collapse plugin ye walasa ka kunnafoni dogolenw daminɛ yɔrɔ wɛrɛ la ɲɛ kan. Bari an ka plugin bɛ baara Kɛ ni idani data-targetmatching ye, o bɛ Kɛ nɔgɔya la!