in English

Navbar

Dokumentaatio ja esimerkkejä Bootstrapin tehokkaasta, responsiivisesta navigointiotsikosta, navigointipalkista. Sisältää tuen brändäystä, navigointia, tiivistämistä ja muuta.

Kuinka se toimii

Seuraavassa on mitä sinun tulee tietää ennen kuin aloitat navigointipalkin käytön:

Navigointipalkit vaativat kääreen responsiivista kutistamista ja .navbarvärimaailmaluokkia varten ..navbar-expand{-sm|-md|-lg|-xl}
Navigointipalkit ja niiden sisältö ovat oletuksena sulavia. Käytä valinnaisia säiliöitä rajoittaaksesi niiden vaakasuuntaista leveyttä.
Käytä väli- ja flex utility -luokkia ohjataksesi välilyöntejä ja kohdistusta navigointipalkeissa .
Navigointipalkit reagoivat oletusarvoisesti, mutta voit muuttaa niitä helposti muokkaamalla sitä. Responsiivinen käyttäytyminen riippuu Collapse JavaScript -laajennuksestamme.
Navigointipalkit piilotetaan oletusarvoisesti tulostettaessa. Pakota ne tulostamaan lisäämällä .d-printkohtaan .navbar. Katso näytön hyödyllisyysluokka.
Varmista saavutettavuus käyttämällä <nav>elementtiä tai, jos käytät yleisempää elementtiä, kuten <div>, lisää role="navigation"jokaiseen navigointipalkkiin tunnistaaksesi sen selkeästi maamerkkialueeksi aputekniikoiden käyttäjille.

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Tuettu sisältö

Navbareissa on sisäänrakennettu tuki kouralliselle osakomponentille. Valitse tarvittaessa seuraavista:

.navbar-brandyrityksesi, tuotteesi tai projektisi nimeen.
.navbar-navtäyskorkeaa ja kevyttä navigointia varten (mukaan lukien pudotusvalikoiden tuki).
.navbar-togglerkäytettäväksi tiivistyslaajennuksen ja muiden navigoinnin vaihtotoimintojemme kanssa .
.form-inlinekaikille muodon ohjauksille ja toimille.
.navbar-textpystysuoraan keskitettyjen tekstijonojen lisäämiseen.
.collapse.navbar-collapsenavigointipalkin sisällön ryhmittelyyn ja piilottamiseen ylätason keskeytyskohdan mukaan.

Tässä on esimerkki kaikista alikomponenteista, jotka sisältyvät reagoivaan valoteemalla olevaan navigointipalkkiin, joka kutistuu automaattisesti lg(isossa) keskeytyspisteessä.

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

Tässä esimerkissä käytetään värin ( bg-light) ja välin ( my-2, my-lg-0, mr-sm-0, my-sm-0) hyödyllisyysluokkia.

Brändi

Voidaan soveltaa useimpiin elementteihin , .navbar-brandmutta ankkuri toimii parhaiten, koska jotkin elementit saattavat vaatia hyödyllisyysluokkia tai mukautettuja tyylejä.

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

Kuvien lisääminen tiedostoon .navbar-brandvaatii todennäköisesti aina mukautettuja tyylejä tai apuohjelmia oikean kokoiseksi. Tässä on joitain esimerkkejä havainnollistamiseksi.

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

Navigointilinkit perustuvat .navvaihtoehtoihimme omalla muokkausluokalla ja vaativat vaihtoluokkien käyttöä oikean responsiivisen tyylin aikaansaamiseksi. Navigointipalkkien navigointi kasvaa myös viemään mahdollisimman paljon vaakasuuntaista tilaa , jotta navigointipalkin sisältö pysyy varmasti kohdakkain.

Aktiiviset tilat — ja .active— osoittavat, että nykyistä sivua voidaan soveltaa suoraan .nav-links:iin tai heidän välittömään vanhempiin .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>

Ja koska käytämme luokkia naveissamme, voit halutessasi välttää luettelopohjaisen lähestymistavan kokonaan.

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

Voit myös käyttää avattavia valikoita navigointipalkissa. Avattavat valikot edellyttävät käärimiselementin sijoittamista varten, joten muista käyttää erillisiä ja sisäkkäisiä elementtejä .nav-itemalla .nav-linkkuvatulla tavalla.

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

Lomakkeet

Sijoita erilaisia lomakesäätimiä ja komponentteja navigointipalkkiin -painikkeella .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>

Käytön välittömät alielementit .navbarjoustavat asettelun ja ovat oletuksena justify-content: space-between. Käytä tarvittaessa muita joustavia apuohjelmia tämän toiminnan säätämiseen.

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

Syöttöryhmät toimivat myös:

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

Erilaisia painikkeita tuetaan myös osana näitä navigointipalkin lomakkeita. Tämä on myös hyvä muistutus siitä, että pystysuuntaista kohdistusta voidaan käyttää erikokoisten elementtien kohdistamiseen.

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

Teksti

Navigointipalkit voivat sisältää tekstiä :n avulla .navbar-text. Tämä luokka säätää tekstijonojen pystysuuntausta ja vaakaväliä.

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

Sekoita ja sovita muiden komponenttien ja apuohjelmien kanssa tarpeen mukaan.

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

Värimallit

Navigointipalkin teeman tekeminen ei ole koskaan ollut helpompaa teemaluokkien ja background-colorapuohjelmien yhdistelmän ansiosta. Valitse .navbar-lightkäytettäväksi vaaleiden taustavärien kanssa tai .navbar-darktummien taustavärien kanssa. Mukauta sitten .bg-*apuohjelmilla.

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

Säiliöt

Vaikka se ei ole pakollinen, voit kääriä navigointipalkin a .container:n keskittääksesi sen sivulle. Tai voit lisätä säiliön sisälle keskittääksesi .navbarvain kiinteän tai staattisen ylänavigointipalkin sisällön .

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

Kun säilö on navigointipalkissa, sen vaakasuora täyttö poistetaan määrittämääsi .navbar-expand{-sm|-md|-lg|-xl}luokkaa alemmista keskeytyspisteistä. Tämä varmistaa, että emme tuplaa tarpeettomasti alempien kuvaporttien täyttämistä, kun navigointipalkki on tiivistetty.

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

Sijoitus

Käytä sijaintityökalujamme navigointipalkkien sijoittamiseen ei-staattisiin paikkoihin. Valitse kiinteä ylös, kiinnitetty alaosaan tai kiinnitetty yläosaan (vieritä sivua, kunnes se saavuttaa yläreunan, ja pysyy sitten siellä). Kiinteät navigointipalkit käyttävät position: fixed, mikä tarkoittaa, että ne vedetään normaalista DOM-virrasta ja saattavat vaatia mukautetun CSS padding-top:n (esim. <body>) päällekkäisyyden estämiseksi muiden elementtien kanssa.

Huomaa myös, että .sticky-topkäyttää position: sticky, jota ei tueta täysin kaikissa selaimissa .

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

Vieritys

Lisää .navbar-nav-scroll( .navbar-collapsetai muuhun navigointipalkin alikomponenttiin) mahdollistaaksesi pystysuoran vierityksen tiivistetyn navigointipalkin vaihdettavan sisällön sisällä. Oletusarvoisesti vieritys alkaa 75vh(tai 75 %:lla näkymän korkeudesta), mutta voit ohittaa sen upotetuilla tai mukautetuilla tyyleillä. Kun navigointipalkkia laajennetaan suuremmissa näytöissä, sisältö näkyy samalla tavalla kuin oletusnavigointipalkissa.

Huomaa, että tähän käytökseen liittyy mahdollinen haittapuoli: overflow-kun asetus overflow-y: auto(vaaditaan sisällön vierittämiseen tässä) overflow-xon vastineeksi auto, joka rajaa jonkin verran vaakasuuntaista sisältöä.

Tässä on esimerkki navigointipalkista, jossa käytetään .navbar-nav-scroll: tä style="max-height: 100px;"ja joitain ylimääräisiä marginaaliapuohjelmia optimaalisen välin saavuttamiseksi.

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

Responsiiviset käytökset

Navigointipalkit voivat käyttää .navbar-toggler, .navbar-collapse, ja .navbar-expand{-sm|-md|-lg|-xl}luokkia määrittääkseen, milloin niiden sisältö kutistuu painikkeen taakse. Yhdessä muiden apuohjelmien kanssa voit helposti valita, milloin haluat näyttää tai piilottaa tietyt elementit.

Lisää luokka navigointipalkkiin, jos ne eivät koskaan .navbar-expandkutistu. Älä lisää .navbar-expandluokkaa aina kutistuviin navigointipalkkeihin.

Toggler

Navigointipalkin vaihtajat tasataan oletuksena vasemmalle, mutta jos ne seuraavat sisarelementtiä, kuten .navbar-brand, ne tasataan automaattisesti äärioikealle. Merkintöjen kääntäminen kääntää vaihtopainikkeen sijainnin päinvastaiseksi. Alla on esimerkkejä erilaisista vaihtotyyleistä.

Ei .navbar-brandnäy pienimmässä keskeytyskohdassa:

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

Kun tuotemerkki näkyy vasemmalla ja vaihtokytkin oikealla:

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

Vasemmalla kytkin ja oikealla tuotenimi:

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

Ulkoinen sisältö

Joskus haluat käyttää tiivistyslaajennusta käynnistääksesi säilön elementin sisällölle, joka rakenteellisesti sijaitsee .navbar. Koska laajennuksemme toimii idja data-targetvastaa, se on helppo tehdä!

Tiivistetty sisältö

Vaihdettavissa navigointipalkin kautta.

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

Kun teet tämän, suosittelemme lisäämään JavaScriptin, jotta kohdistus siirretään ohjelmallisesti säilöön, kun se avataan. Muuten näppäimistön käyttäjillä ja avustavien tekniikoiden käyttäjillä on todennäköisesti vaikeuksia löytää juuri paljastettua sisältöä - varsinkin jos avattu säilö on ennen vaihtopainiketta dokumentin rakenteessa. Suosittelemme myös varmistamaan, että vaihtajalla on aria-controlsattribuutti, joka osoittaa idsisältösäilön kohtaan. Teoriassa tämän avulla aputekniikan käyttäjät voivat siirtyä suoraan vaihtokytkimestä sen ohjaamaan säiliöön, mutta tuki tälle on tällä hetkellä melko hajanaista.