in English

Nabigazio barra

Dokumentazioa eta adibideak Bootstrap-en nabigazio-goiburu indartsu eta sentikorretarako, nabigazio-barrarako. Markarako, nabigaziorako eta abarretarako euskarria barne hartzen du, gure kolapserako plugina barne.

Orrialde honetan

Nola dabil

Hona hemen nabigazio barrarekin hasi aurretik jakin behar duzuna:

Nabigazio- barrek bilgarri bat behar dute toleste .navbarerantzuteko .navbar-expand{-sm|-md|-lg|-xl|-xxl}eta kolore-eskema klaseetarako.
Nabigazio-barrak eta haien edukiak fluidoak dira lehenespenez. Aldatu ontzia bere zabalera horizontala modu ezberdinetan mugatzeko.
Erabili gure tartea eta flexio erabilgarritasun klaseak nabigazio-barren barruko tartea eta lerrokatzea kontrolatzeko.
Nabigazio-barrak lehenespenez erantzuten dute, baina erraz alda ditzakezu hori aldatzeko. Portaera erantzunkorra gure Collapse JavaScript pluginaren araberakoa da.
Ziurtatu erabilerraztasuna <nav>elementu bat erabiliz edo, adibidez, elementu generikoago bat erabiltzen baduzu <div>, gehitu role="navigation"nabigazio-barra guztietan, laguntza-teknologien erabiltzaileentzako eskualde mugarri gisa esplizituki identifikatzeko.
Adierazi uneko elementua aria-current="page"uneko orrialderako edo aria-current="true"multzo bateko uneko elementurako erabiliz.
Berria v5.2.0-n: nabigazio-barrak oinarrizko klaseari dagozkion CSS aldagaiekin jar daitezke .navbar. .navbar-lightzaharkituta geratu da eta .navbar-darkberridatzi da CSS aldagaiak gainidazteko, estilo osagarriak gehitu beharrean.

Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Onartutako edukia

Navbar-ek azpiosagai gutxi batzuen euskarria dute. Aukeratu hauetako bat behar izanez gero:

.navbar-brandzure enpresa, produktu edo proiektuaren izenagatik.
.navbar-navaltuera osoko eta arin nabigaziorako (goiplinetarako laguntza barne).
.navbar-togglergure kolapso-pluginarekin eta nabigazioa aldatzeko beste jokabide batzuekin erabiltzeko.
Malgutzeko eta tartekatzeko utilitateak edozein inprimaki-kontrol eta ekintzetarako.
.navbar-textbertikalki zentratutako testu-kateak gehitzeko.
.collapse.navbar-collapsenabigazio-barrako edukiak eten-puntu nagusi baten arabera taldekatzeko eta ezkutatzeko.
Gehitu aukerako bat nabigazio-barra zabaldutako edukia.navbar-scroll ezartzeko max-heighteta mugitzeko .

lgHona hemen eten-puntu (handian) automatikoki tolesten den gai argidun nabigazio-barran sartzen diren azpiosagai guztien adibidea .

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Adibide honek atzeko planoa ( bg-light) eta tartea ( me-auto, mb-2, mb-lg-0, me-2) erabilgarritasun klaseak erabiltzen ditu.

Marka

Elementu .navbar-brandgehienetan aplika daiteke, baina aingura batek funtzionatzen du ondoen, elementu batzuek erabilgarritasun-klaseak edo estilo pertsonalizatuak behar baitituzte.

Testua

Gehitu zure testua elementu baten barruan .navbar-brandklasearekin.

html

<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Irudia

Barneko testua .navbar-brand.<img>

html

<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Irudia eta testua

Erabilgarritasun gehigarri batzuk ere erabil ditzakezu irudia eta testua aldi berean gehitzeko. Kontuan izan eta .d-inline-blockgehitzea ..align-text-top<img>

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nabigazioa

Nabigazio- barren nabigazio-estekak gure .navaukeretan oinarritzen dira bere modifikatzaile-klasearekin eta toggler-klaseak erabiltzea eskatzen dute, erantzun-estilo egokirako. Nabigazio-barren nabigazioa ere hazi egingo da ahalik eta espazio horizontal gehien okupatzeko, zure nabigazio-barren edukia seguru lerrokatuta mantentzeko.

Gehitu .activeklasea .nav-linkuneko orrialdea adierazteko.

Kontuan izan aria-currentaktiboan atributua ere gehitu behar duzula .nav-link.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

Eta gure nabigaziorako klaseak erabiltzen ditugunez, zerrendan oinarritutako ikuspegia guztiz saihes dezakezu nahi baduzu.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Zure nabigazio-barran goitibehurrak ere erabil ditzakezu. Goitibeherako menuek biltzeko elementu bat behar dute kokatzeko, beraz, ziurtatu elementu bereiziak eta habiaratuak erabiltzen dituzula eta .nav-itembehean .nav-linkerakusten den moduan.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 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><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Formak

Jarri hainbat inprimaki-kontrol eta osagai nabigazio-barra batean:

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

.navbarDiseinu flexua erabiltzeko berehalako elementu seme-alabak eta lehenetsia izango da justify-content: space-between. Erabili malgu-utilitate osagarriak behar bezala jokabide hori doitzeko.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Sarrera-taldeek ere funtzionatzen dute. Zure nabigazio-barra inprimaki oso bat bada, edo gehienbat inprimaki bat bada, <form>elementua edukiontzi gisa erabil dezakezu eta HTML batzuk gorde ditzakezu.

html

<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Hainbat botoi onartzen dira nabigazio-barrako inprimaki horien baitan. Hau oroigarri bikaina da lerrokatze bertikaleko utilitateak tamaina ezberdineko elementuak lerrokatzeko erabil daitezkeela.

html

<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Testua

Nabigazio-barrek testu zatiak izan ditzakete ren laguntzarekin .navbar-text. Klase honek testu-kateen lerrokadura bertikala eta tarte horizontala doitzen ditu.

html

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

Nahastu eta lotu beste osagai eta utilitate batzuekin behar den moduan.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

Kolore-eskemak

Berria 5.2.0 bertsioan: Navbar gaia CSS aldagaiek elikatzen dute eta .navbar-lightzaharkituta geratu da. CSS aldagaiak aplikazioari aplikatzen zaizkio .navbar, "argia" itxura lehenetsiz, eta baliogabetu daitezke .navbar-dark.

Navbar gaiak inoiz baino errazagoak dira Bootstrap-en Sass eta CSS aldagaien konbinazioari esker. Lehenetsia gure "nabigazio-barra argia" da atzeko planoko kolore argiekin erabiltzeko, baina .navbar-darkatzeko planoko kolore ilunetarako ere eska dezakezu. Ondoren, pertsonalizatu .bg-*utilitateekin.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Ontziak

Nahitaezkoa ez den arren, nabigazio-barra batean bildu dezakezu orrialde batean zentratzeko, .containernahiz eta kontuan izan barruko edukiontzi bat behar dela oraindik. Edo edukiontzi bat gehi dezakezu goiko nabigazio-barra finko edo estatiko.navbar baten edukia soilik zentratzeko .

html

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

Erabili erantzuteko edukiontzietako edozein zure nabigazio-barrako edukia nola zabaltzen den aldatzeko.

html

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

Kokapen

Erabili gure posizio-utilitateak nabigazio-barrak posizio ez-estatikoetan jartzeko. Aukeratu goian finkoa, behean finkoa, goian itsatsita (orriarekin korritzen du goialdera iritsi arte, gero hor geratzen da), edo behean itsatsita (orria korritzen du behealdera iritsi arte, gero geratzen da). hor).

Nabigazio- barra finkoek position: fixed, hau da, DOM-aren fluxu arruntetik ateratzen dira eta baliteke CSS pertsonalizatua behar izatea (adibidez, padding-top) <body>beste elementu batzuekin gainjartzea saihesteko.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html

<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

html

<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

html

<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

html

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Korritzea

Gehitu nabigazio-barrako azpiosagai .navbar-nav-scrollbatean (edo beste osagai batean) tolestutako nabigazio-barra baten edukia alda daitekeen korritze bertikala gaitzeko. .navbar-navLehenespenez, desplazamendua abiaraztean hasten da 75vh(edo ikuspegiaren altueraren % 75ean), baina hori gainidatzi dezakezu tokiko CSS propietate --bs-navbar-heightpertsonalizatuarekin edo estilo pertsonalizatuekin. Ikuspegi handiagoetan nabigazio-barra zabaltzen denean, edukia lehenetsitako nabigazio-barra batean bezala agertuko da.

Kontuan izan jokabide honek eragozpen potentzial batekin datorrela: overflowezarpena overflow-y: auto(hemen edukia korritzeko beharrezkoa) overflow-xbaliokidea dela auto, eta horrek eduki horizontal batzuk moztuko ditu.

.navbar-nav-scrollHona hemen rekin erabiltzen duen nabigazio-barra adibide bat style="--bs-scroll-height: 100px;", tarterik onena lortzeko marjina gehigarri batzuekin.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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-bs-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" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Erantzuteko jokabideak

.navbar-togglerNabigazio-barrak , .navbar-collapseeta klaseak erabil ditzakete .navbar-expand{-sm|-md|-lg|-xl|-xxl}euren edukia botoi baten atzean noiz tolesten den zehazteko. Beste utilitate batzuekin konbinatuta, erraz aukera dezakezu elementu jakinak noiz erakutsi edo ezkutatu.

Inoiz tolesten ez diren nabigazio-barran, gehitu .navbar-expandklasea nabigazio-barran. Beti tolesten diren nabigazio-barretarako, ez gehitu .navbar-expandklaserik.

Toggler

Nabigazio-barrako aldagailuak ezkerrean lerrokatuta daude lehenespenez, baina anai-elementu bati jarraituz .navbar-brandgero, automatikoki eskuin muturrera lerrokatuko dira. Zure marka alderantzikatuz toggler-aren kokapena aldatuko da. Jarraian, toggle-estilo ezberdinen adibideak daude.

.navbar-brandEten-puntu txikienean erakutsi gabe :

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Ezkerrean marka-izen batekin eta eskuinaldean toggler batekin:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Ezkerrean toggler batekin eta eskuinaldean marka izena:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Kanpoko edukia

Batzuetan, tolestu plugina erabili nahi duzu edukiontzi-elementu bat abiarazteko egituratik kanpo dagoen edukirako .navbar. idGure plugin-a eta data-bs-targetparekatzean funtzionatzen duelako , hori erraz egiten da!

Collapsed content

Toggleable via the navbar brand.

html

<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Hori egiten duzunean, JavaScript gehigarria sartzea gomendatzen dugu irekitzen denean fokua edukiontzira programatikoki eramateko. Bestela, teklatuaren erabiltzaileek eta laguntza-teknologien erabiltzaileek zailtasunak izango dituzte agertu berri den edukia aurkitzeko, batez ere irekitako edukiontzia dokumentuaren egituran txandakatzailea baino lehen badago. Toggler-ak atributua duela ziurtatzea ere gomendatzen dugu , edukiaren edukiontzira aria-controlsseinalatzen duela . idTeorian, horri esker, laguntza-teknologien erabiltzaileek toggler-etik kontrolatzen duten edukiontzira zuzenean salto egin dezakete, baina horretarako laguntza nahiko irregularra da gaur egun.

Oihalez kanpokoa

Eraldatu zure nabigazio-barra zabaltzen eta tolestzen den oihalez kanpoko tiradera batean off canvas osagaiarekin . Oihalez kanpoko estilo lehenetsiak zabaltzen ditugu eta gure .navbar-expand-*klaseak erabiltzen ditugu nabigazio-barra dinamiko eta malgu bat sortzeko.

Beheko adibidean, eten puntu guztietan beti tolestuta dagoen oihalez kanpoko nabigazio-barra sortzeko, baztertu .navbar-expand-*klasea erabat.

html

<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Eten-puntu zehatz batean nabigazio-barra normal batera zabaltzen den oihalez kanpoko nabigazio bat sortzeko lg, erabili .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Offcanvas nabigazio-barra ilun batean erabiltzean, kontuan izan litekeela oihalez kanpoko edukian atzeko plano iluna izan behar duzula testua irakurgaitza bihur ez dadin. Beheko adibidean, .navbar-darketa gehitzen dizkiogu , .bg-darkto , to , eta to , off-oihal ilun batekin estilo egokia izateko ..navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html

<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren barruan, nabigazio-barrak CSS aldagai lokalak aktibatuta erabiltzen dituzte .navbardenbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

CSS aldagai gehigarri batzuk ere hemen daude .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

CSS aldagaien bidezko pertsonalizazioa ikus daiteke .navbar-darkklasean, non balio zehatzak gainidazten ditugun CSS hautatzaile bikoiztuak gehitu gabe.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass aldagaiak

Nabigazio-barra guztien aldagaiak:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

Nabigazio barra ilunerako aldagaiak :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass begizta

Nabigazio- barra erantzunkorra zabaltzeko/tolertzeko klaseak (adibidez, .navbar-expand-lg) maparekin konbinatzen dira $breakpointseta begizta baten bidez sortzen dira scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}