Navbar

Dokumentacion dhe shembuj për kokën e navigimit të fuqishëm dhe të përgjegjshëm të Bootstrap, shiritin e navigimit. Përfshin mbështetjen për markën, navigimin dhe më shumë, duke përfshirë mbështetjen për shtesën tonë të kolapsit.

Në këtë faqe

Si punon

Ja çfarë duhet të dini përpara se të filloni me navbarin:

Shiritat e navigimit kërkojnë një mbështjellje .navbarpër klasat .navbar-expand{-sm|-md|-lg|-xl|-xxl}e kolapsit të përgjegjshëm dhe të skemës së ngjyrave .
Shiritat e navigimit dhe përmbajtja e tyre janë si parazgjedhje fluide. Ndryshoni enën për të kufizuar gjerësinë e tyre horizontale në mënyra të ndryshme.
Përdorni klasat tona të përdorimit të ndarjes dhe fleksibilitetit për të kontrolluar ndarjen dhe shtrirjen brenda shiritave të navigimit.
Shiritat e navigimit janë të përgjegjshëm si parazgjedhje, por ju mund t'i modifikoni lehtësisht për ta ndryshuar atë. Sjellja e përgjegjshme varet nga shtojca jonë "Collapse JavaScript".
Siguroni aksesueshmërinë duke përdorur një <nav>element ose, nëse përdorni një element më të përgjithshëm si p.sh. <div>, shtoni një role="navigation"në çdo shirit navigimi për ta identifikuar atë në mënyrë eksplicite si një rajon pikë referimi për përdoruesit e teknologjive ndihmëse.
Tregoni artikullin aktual duke përdorur aria-current="page"për faqen aktuale ose aria-current="true"për artikullin aktual në një grup.
E re në v5.2.0: Shiritat e navigimit mund të kenë tematikë me variabla CSS që janë të shtrirë në .navbarklasën bazë. .navbar-lightështë zhvlerësuar dhe .navbar-darkështë rishkruar për të anashkaluar variablat CSS në vend që të shtohen stile shtesë.

Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja e medias. Shikoni seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .

Përmbajtja e mbështetur

Navbarët vijnë me mbështetje të integruar për një pjesë të vogël të nën-komponentëve. Zgjidhni nga sa vijon sipas nevojës:

.navbar-brandpër emrin e kompanisë, produktit ose projektit tuaj.
.navbar-navpër një lundrim me lartësi të plotë dhe me peshë të lehtë (përfshirë mbështetjen për zbritjet).
.navbar-togglerpër përdorim me shtojcën tonë të kolapsit dhe sjellje të tjera të ndërrimit të navigimit .
Shërbimet e përkuljes dhe ndarjes për çdo kontroll dhe veprim të formës.
.navbar-textpër shtimin e vargjeve të tekstit me qendër vertikalisht.
.collapse.navbar-collapsepër grupimin dhe fshehjen e përmbajtjeve të shiritit navigues sipas një pikë ndërprerjeje prind.
Shtoni një opsional .navbar-scrollpër të vendosur një përmbajtje të zgjeruar të shiritit naviguesmax-height dhe për të lëvizur .

Këtu është një shembull i të gjithë nën-komponentëve të përfshirë në një shirit navigues të përgjegjshëm me temë dritë që shembet automatikisht në pikën e lgndërprerjes (të madhe).

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>

Ky shembull përdor klasat e përdorimit të sfondit ( bg-light) dhe ndarjes ( me-auto, mb-2, mb-lg-0, ).me-2

Markë

Mund .navbar-brandtë aplikohet në shumicën e elementeve, por një ankorë funksionon më mirë, pasi disa elementë mund të kërkojnë klasa të shërbimeve ose stile të personalizuara.

Teksti

Shtoni tekstin tuaj brenda një elementi me .navbar-brandklasën.

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>

Imazhi

Ju mund ta zëvendësoni tekstin brenda .navbar-brandme një <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>

Imazhi dhe teksti

Ju gjithashtu mund të përdorni disa shërbime shtesë për të shtuar një imazh dhe tekst në të njëjtën kohë. Vini re shtimin e .d-inline-blockdhe .align-text-topnë <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>

Nav

Lidhjet e navigimit të navigimit bazohen në .navopsionet tona me klasën e tyre të modifikuesve dhe kërkojnë përdorimin e klasave ndërruese për stilimin e duhur të përgjegjshëm. Navigimi në shiritat e navigimit do të rritet gjithashtu për të zënë sa më shumë hapësirë horizontale të jetë e mundur për të mbajtur përmbajtjen e shiritit tuaj të navigimit të rreshtuar në mënyrë të sigurt.

Shtoni .activeklasën për .nav-linktë treguar faqen aktuale.

Ju lutemi vini re se duhet të shtoni edhe aria-currentatributin në aktiv .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>

Dhe për shkak se ne përdorim klasa për navigimet tona, ju mund të shmangni plotësisht qasjen e bazuar në listë nëse dëshironi.

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>

Ju gjithashtu mund të përdorni zbritjet në shiritin tuaj navigues. Menytë rënëse kërkojnë një element mbështjellës për pozicionimin, prandaj sigurohuni që të përdorni elementë të veçantë dhe të ndërthurur për .nav-itemdhe .nav-linksiç tregohet më poshtë.

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>

Formularët

Vendosni kontrolle dhe përbërës të ndryshëm formash brenda një shiriti navigimi:

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>

Elementet e menjëhershme fëmijë të .navbarpërdorimit flex layout dhe do të parazgjedhur në justify-content: space-between. Përdorni shërbime shtesë flex sipas nevojës për të rregulluar këtë sjellje.

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>

Grupet e hyrjes punojnë gjithashtu. Nëse shiriti juaj navigues është një formë e tërë, ose kryesisht një formë, mund ta përdorni <form>elementin si kontejner dhe të ruani pak HTML.

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>

Butona të ndryshëm mbështeten gjithashtu si pjesë e këtyre formave të shiritit navigues. Ky është gjithashtu një kujtesë e shkëlqyeshme që shërbimet e shtrirjes vertikale mund të përdoren për të rreshtuar elementë me madhësi të ndryshme.

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>

Teksti

Shiritat e navigimit mund të përmbajnë pjesë teksti me ndihmën e .navbar-text. Kjo klasë rregullon shtrirjen vertikale dhe hapësirën horizontale për vargjet e tekstit.

html

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

Përziejini dhe përshtatni me komponentë dhe pajisje të tjera sipas nevojës.

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>

Skemat e ngjyrave

E re në v5.2.0: Tematika e navbarit tani mundësohet nga variablat CSS dhe .navbar-lightështë zhvlerësuar. Variablat CSS aplikohen në .navbar, duke u paracaktuar në pamjen "dritë" dhe mund të anashkalohen me .navbar-dark.

Temat e Navbarit janë më të lehta se kurrë falë kombinimit të Bootstrap të variablave Sass dhe CSS. Parazgjedhja është "navaria jonë e lehtë" për përdorim me ngjyra të hapura të sfondit, por mund të aplikoni edhe .navbar-darkpër ngjyra të errëta të sfondit. Më pas, personalizoni me .bg-*shërbimet komunale.

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

Kontejnerët

Edhe pse nuk kërkohet, mund ta mbështillni një shirit navigimi në një .containerpër ta përqendruar në një faqe – megjithëse vini re se ende kërkohet një enë e brendshme. Ose mund të shtoni një enë brenda .navbarpër të përqendruar vetëm përmbajtjen e një shiriti navigimi të sipërm fiks ose statik .

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>

Përdorni cilindo nga kontejnerët e përgjegjshëm për të ndryshuar gjerësinë e paraqitjes së përmbajtjes në shiritin tuaj navigues.

html

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

Vendosja

Përdorni shërbimet tona të pozicionit për të vendosur shiritat e navigimit në pozicione jostatike. Zgjidhni nga e fiksuar në krye, e fiksuar në fund, e ngjitur në krye (lëviz me faqen derisa të arrijë në krye, pastaj qëndron atje) ose e ngjitur në fund (lëviz me faqen derisa të arrijë në fund, pastaj qëndron atje).

Përdorimi i shiritave të fiksuar të navigimit position: fixed, që do të thotë se ato janë tërhequr nga rrjedha normale e DOM-it dhe mund të kërkojnë CSS të personalizuar (p.sh., padding-topnë <body>) për të parandaluar mbivendosjen me elementë të tjerë.

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>

Lëvizje

Shto .navbar-nav-scrollnë një .navbar-nav(ose nën-komponent tjetër të shiritit navigues) për të mundësuar lëvizjen vertikale brenda përmbajtjes së ndërrueshme të një shiriti navigimi të palosur. Si parazgjedhje, lëvizja fillon në 75vh(ose 75% të lartësisë së portit të pamjes), por mund ta anashkaloni atë me veçoritë lokale të personalizuara të CSS --bs-navbar-heightose stilet e personalizuara. Në portat më të mëdha të shikimit kur zgjerohet shiriti navigues, përmbajtja do të shfaqet ashtu siç shfaqet në një shirit navigimi të paracaktuar.

Ju lutemi vini re se kjo sjellje vjen me një pengesë të mundshme të overflow—kur vendoset overflow-y: auto(kërkohet për të lëvizur përmbajtjen këtu), overflow-xështë ekuivalent me auto, që do të presë disa përmbajtje horizontale.

Ja një shembull i shiritit navigues që përdor .navbar-nav-scrollme style="--bs-scroll-height: 100px;", me disa shërbime shtesë të diferencës për hapësirën optimale.

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>

Sjelljet e përgjegjshme

Shiritat e navigimit mund të përdorin .navbar-toggler, .navbar-collapse, dhe .navbar-expand{-sm|-md|-lg|-xl|-xxl}klasa për të përcaktuar kur përmbajtja e tyre shembet pas një butoni. Në kombinim me shërbime të tjera, mund të zgjidhni lehtësisht kur të shfaqni ose fshehni elementë të veçantë.

Për shiritat e navigimit që nuk shemben kurrë, shtoni .navbar-expandklasën në shiritin e navigimit. Për shiritat e navigimit që shemben gjithmonë, mos shtoni asnjë .navbar-expandklasë.

Ndërrimtar

Ndërruesit e shiritit të navigimit janë radhitur majtas si parazgjedhje, por nëse ndjekin një element si një vëlla ose vëlla .navbar-brand, ato do të rreshtohen automatikisht në të djathtën ekstreme. Kthimi i shënimit tuaj do të ndryshojë vendosjen e ndërruesit. Më poshtë janë shembuj të stileve të ndryshme të ndërrimit.

Me asnjë .navbar-brandtë treguar në pikën më të vogël të ndërprerjes:

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>

Me një emër marke të treguar në të majtë dhe çelës në të djathtë:

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>

Me një çelës në të majtë dhe emrin e markës në të djathtë:

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>

Përmbajtja e jashtme

Ndonjëherë dëshironi të përdorni shtojcën e kolapsit për të aktivizuar një element kontejner për përmbajtjen që ndodhet në mënyrë strukturore jashtë .navbar. Për shkak se shtojca jonë funksionon në përputhje iddhe data-bs-targetpërputhet, kjo bëhet lehtësisht!

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>

Kur e bëni këtë, ju rekomandojmë të përfshini JavaScript shtesë për ta zhvendosur fokusin në mënyrë programore te kontejneri kur ai hapet. Përndryshe, përdoruesit e tastierës dhe përdoruesit e teknologjive ndihmëse ka të ngjarë të kenë një kohë të vështirë për të gjetur përmbajtjen e sapo zbuluar - veçanërisht nëse kontejneri që u hap vjen përpara ndërruesit në strukturën e dokumentit. Ne rekomandojmë gjithashtu të siguroheni që ndërruesi të ketë aria-controlsatributin, duke treguar në idkontejnerin e përmbajtjes. Në teori, kjo i lejon përdoruesit e teknologjisë ndihmëse të kërcejnë drejtpërdrejt nga çelësi në kontejnerin që kontrollon – por mbështetja për këtë aktualisht është mjaft e paqartë.

Jashtë kanavacë

Transformojeni shiritin tuaj navigues që zgjerohet dhe shembet në një sirtar offcanvas me komponentin offcanvas . Ne zgjerojmë të dy stilet e paracaktuar offcanvas dhe përdorim .navbar-expand-*klasat tona për të krijuar një shirit anësor dinamik dhe fleksibël navigimi.

Në shembullin e mëposhtëm, për të krijuar një shirit navigimi offcanvas që është gjithmonë i palosur në të gjitha pikat e ndërprerjes, anashkaloni .navbar-expand-*plotësisht klasën.

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>

Për të krijuar një shirit navigimi offcanvas që zgjerohet në një shirit navigimi normal në një pikë ndërprerjeje specifike si lg, përdorni .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>

Kur përdorni offcanvas në një shirit navigimi të errët, kini parasysh se mund t'ju duhet të keni një sfond të errët në përmbajtjen offcanvas për të shmangur që teksti të bëhet i palexueshëm. Në shembullin e mëposhtëm, ne shtojmë .navbar-darkdhe .bg-darknë .navbar, .text-bg-darknë .offcanvas, .dropdown-menu-darknë .dropdown-menu, dhe .btn-close-whitenë .btn-closepër stilimin e duhur me një kanavacë të errët.

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

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, shiritat e navigimit tani përdorin variabla lokale CSS .navbarpër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

  --#{$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};

Disa variabla shtesë CSS janë gjithashtu të pranishme në .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);

Përshtatja përmes variablave CSS mund të shihet në .navbar-darkklasën ku ne anashkalojmë vlerat specifike pa shtuar përzgjedhës të dyfishtë CSS.

  --#{$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)};

Variablat Sass

Variablat për të gjitha shiritat e navigimit:

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

Variablat për shiritin e errët të navigimit :

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

Lak Sass

Klasat e zgjerimit/kolapsit të shiritit të përgjegjshëm (p.sh., .navbar-expand-lg) kombinohen me $breakpointshartën dhe krijohen përmes një cikli në 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;
          }
        }
      }
    }
  }
}