Source

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.

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}e kolapsit të përgjegjshëm dhe të skemës së ngjyrave .
  • Shiritat e navigimit dhe përmbajtja e tyre janë si parazgjedhje fluide. Përdorni kontejnerë opsionalë për të kufizuar gjerësinë e tyre horizontale.
  • 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".
  • Shiritat e navigimit fshihen si parazgjedhje kur printohen. Detyrojini ato të printohen duke shtuar .d-printnë .navbar. Shihni klasën e përdorimit të ekranit .
  • 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.

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

Lexoni për një shembull dhe listën e nën-komponentëve të mbështetur.

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 .
  • .form-inlinepë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.

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

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

Ky shembull përdor klasat e përdorimit të ngjyrave ( bg-light) dhe ndarjes ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

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.

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

Shtimi i imazheve në .navbar-brandka të ngjarë të kërkojë gjithmonë stile ose shërbime të personalizuara në madhësinë e duhur. Këtu janë disa shembuj për të demonstruar.

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

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.

Gjendjet aktive-me- .activepër të treguar faqen aktuale mund të aplikohen drejtpërdrejt te .nav-links ose te prindi i tyre i menjëhershëm .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>

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.

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

Ju gjithashtu mund të përdorni zbritjet në navigimin e shiritit tuaj navigues. Menytë në dropdown 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ë.

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

Format

Vendosni kontrolle të ndryshme formash dhe komponentë brenda një shirit navigimi me .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>

Elementet e fëmijëve të menjëhershëm në .navbarpërdorim 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.

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

Grupet e hyrjes funksionojnë gjithashtu:

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

Edhe butona të ndryshëm mbështeten 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ë lidhur elementë me madhësi të ndryshme.

<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

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.

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

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

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

Skemat e ngjyrave

Tematika e shiritit të navigimit nuk ka qenë kurrë më e lehtë falë kombinimit të klasave të temave dhe background-colorshërbimeve. Zgjidhni .navbar-lightpër përdorim me ngjyra të hapura të sfondit ose .navbar-darkpër ngjyra të errëta të sfondit. Pastaj, personalizoje 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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Kontejnerët

Megjithëse nuk kërkohet, mund ta mbështillni një shirit navigimi në një .containerpër ta përqendruar në një faqe ose të shtoni një brenda për të përqendruar vetëm përmbajtjen e një shiriti navigimi të sipërm fiks ose statik .

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

Kur kontejneri është brenda shiritit tuaj navigues, mbushja e tij horizontale hiqet në pikat më të ulëta se .navbar-expand{-sm|-md|-lg|-xl}klasa juaj e specifikuar. Kjo siguron që ne të mos dyfishojmë mbushjen e panevojshme në portat e pamjes më të ulëta kur shiriti i navigimit është i shembur.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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 të fiksuara në krye, të fiksuara në fund ose të ngjitura në krye (lëvizni me faqen derisa të arrijë në krye, 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ë.

Gjithashtu vini re se .sticky-toppërdor position: sticky, i cili nuk mbështetet plotësisht në çdo shfletues .

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

Sjelljet e përgjegjshme

Shiritat e navigimit mund të përdorin .navbar-toggler, .navbar-collapse, dhe .navbar-expand{-sm|-md|-lg|-xl}klasat për të ndryshuar 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ë të .navbar-brandtreguar në pikën më të ulët të ndërprerjes:

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

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

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

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

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

Përmbajtja e jashtme

Ndonjëherë dëshironi të përdorni shtojcën e kolapsit për të aktivizuar përmbajtjen e fshehur diku tjetër në faqe. Për shkak se shtojca jonë funksionon në përputhje iddhe data-targetpërputhet, kjo bëhet lehtësisht!

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