Source

Navbar

Dokumentaatio ja esimerkkejä Bootstrapin tehokkaasta, responsiivisesta navigointiotsikosta, navigointipalkista. Sisältää tuen brändäykselle, navigoinnille ja muille, mukaan lukien tuki tiivistyslaajennuksellemme.

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

Lue esimerkki ja luettelo tuetuista alikomponenteista.

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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.4/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.4/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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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össä olevat välittömät lapsielementit .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 pakollista, voit .containerkeskittää sen sivulle tai lisätä navigointipalkin sisään keskittääksesi vain 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>

Responsiiviset käytökset

Navigointipalkit voivat käyttää .navbar-toggler, .navbar-collapse, ja .navbar-expand{-sm|-md|-lg|-xl}luokkia vaihtaakseen, kun niiden sisältö romahtaa 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ä.

Alimmassa keskeytyskohdassa ei .navbar-brandnäy:

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 piilotetun sisällön käynnistämiseen muualla sivulla. Koska laajennuksemme toimii idja data-targetvastaa, se on helppo tehdä!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <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>