Source

Navbar

Ditokomane le mehlala ya hlogo ya go sepelasepela ye maatla, ye e arabelago ya Bootstrap, navbar. E akaretša thekgo ya go swaya, go sepelasepela, le tše dingwe, go akaretšwa thekgo ya plugin ya rena ya go phuhlama.

Kamoo e šomago ka gona

Se o swanetšego go se tseba pele o thoma ka navbar ke se:

  • Navbars hloka e phuthela .navbarle .navbar-expand{-sm|-md|-lg|-xl}bakeng sa arabela phuhlama le mebala sekema dihlopha.
  • Di-navbar le dikagare tša tšona di a seela ka go ikemela. Šomiša ditshelo tša boikhethelo go lekanyetša bophara bja tšona bjo bo rapaletšego.
  • Šomiša diklase tša rena tša sekgoba le tša go koba tša mohola bakeng sa go laola sekgoba le go logaganya ka gare ga di-navbar.
  • Di-navbar di arabela ka go ikemela, eupša o ka di fetoša gabonolo go fetoša seo. Boitshwaro bja go arabela bo ithekgile ka plugin ya rena ya Collapse JavaScript.
  • Di-navbar di utilwe ka go ikemela ge o phrintha. Di gapeletše go gatišwa ka go tlaleletša .d-printgo .navbar. Bona sehlopha sa utility sa pontšo .
  • Netefatša phihlelelo ka go šomiša <nav>elemente goba, ge o šomiša elemente ya kakaretšo kudu go swana le a <div>, oketša a role="navigation"go navbar ye nngwe le ye nngwe go e hlaola ka go lebanya bjalo ka selete sa leswao la naga go badiriši ba theknolotši ya go thuša.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Bala go ya pele bakeng sa mohlala le lenaneo la dikarolo tše nnyane tše di thekgwago.

Diteng tše di thekgwago

Di-navbar di tla le thekgo yeo e agetšwego ka gare bakeng sa dikarolo tše sego kae tše dinyenyane. Kgetha go tše di latelago ge go nyakega:

  • .navbar-brandbakeng sa khamphani ya gago, setšweletšwa, goba leina la projeke.
  • .navbar-navbakeng sa go sepelasepela ga bophagamo bjo bo tletšego le bjo bo bobebe (go akaretša le thekgo ya dilo tšeo di theogago).
  • .navbar-togglerbakeng sa go dirišwa le plugin ya rena ya go phuhlama le maitshwaro a mangwe a go fetoša go sepelasepela .
  • .form-inlinebakeng sa ditaolo tša foromo efe goba efe le ditiro.
  • .navbar-textbakeng sa go oketša dithapo tša sengwalwa tšeo di tsepamego thwii.
  • .collapse.navbar-collapsebakeng sa go hlopha le go uta dikagare tša navbar ka ntlha ya go kgaotša ya motswadi.

Mona ke mohlala wa dikarolo ka moka tše nnyane tšeo di akareditšwego ka go navbar ya go arabela ya sehlogo sa seetša yeo e phuhlamago ka go iketla ntlheng ya go lgkgaotša (ye kgolo).

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

Mohlala wo o šomiša diklase tša mohola tša mmala ( bg-light) le sekgoba ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Leswao

The .navbar-brande ka dirišwa go bontši bja dielemente, eupša ankora e šoma gabotse ka ge dielemente tše dingwe di ka nyaka diklase tša mohola goba mekgwa ya tlwaelo.

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

Go oketša diswantšho go go .navbar-brandna le kgonagalo ya gore ka mehla go tla nyaka mekgwa ya tlwaelo goba didirišwa gore di be bogolo bjo bo swanetšego. Mehlala e mengwe yeo o swanetšego go e bontšha še.

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

Dikgokagano tša go sepelasepela tša Navbar di aga godimo ga .navdikgetho tša rena ka sehlopha sa bona sa sefetoši gomme di nyaka tšhomišo ya diklase tša toggler bakeng sa setaele sa go arabela gabotse. Go sepelasepela ka go di-navbar le gona go tla gola go tšea sekgoba se segolo sa go rapalala ka mo go kgonegago go boloka dikagare tša gago tša navbar di logagane ka polokego.

Maemo a mafolofolo—ka .active—go bontšha letlakala la bjale a ka dirišwa ka go lebanya go .nav-links goba motswadi wa bona wa kgauswi .nav-items.

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

Gomme ka ge re šomiša diklase bakeng sa di-nav tša rena, o ka efoga mokgwa wo o theilwego lenaneong ka mo go feletšego ge e ba o rata.

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

O ka boela wa diriša di-dropdown ka go navbar nav ya gago. Dimenu tša go theoga di nyaka elemente ya go phuthela bakeng sa go beakanya, ka fao kgonthiša gore o šomiša dielemente tše di aroganego le tše di tsentšwego ka gare bakeng sa .nav-itemle .nav-linkbjalo ka ge go bontšhitšwe ka mo tlase.

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

Diforomo

Bea ditaolo tša foromo tše di fapafapanego le dikarolo ka gare ga navbar ka .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>

Dielemente tša bana tša ka pela tše di .navbaršomišwago di flex peakanyo gomme di tla default go justify-content: space-between. Diriša didirišwa tša tlaleletšo tša go koba ge go nyakega go beakanya boitshwaro bjo.

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

Dihlopha tša tsenyo di a šoma, le tšona:

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

Dikonope tše di fapafapanego di thekgwa bjalo ka karolo ya diforomo tše tša navbar, le tšona. Ye gape ke kgopotšo ye kgolo ya gore didirišwa tša go logaganya thwii di ka šomišwa go logaganya dielemente tša bogolo bjo bo fapanego.

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

Sengwalwa

Di-navbar di ka ba le diripana tša sengwalwa ka thušo ya .navbar-text. Sehlopha se se beakanya go logaganya go ema le sekgoba sa go rapalala sa dithapo tša sengwalwa.

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

Kopanya le go nyalelanya le dikarolo tše dingwe le didirišwa ge go nyakega.

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

Dikema tša mebala

Theming ya navbar ga se ya ka ya ba bonolo ka lebaka la motswako wa dihlopha tša theming le background-colordidirišwa. Kgetha go tšwa go .navbar-lightgo šomiša le mebala ya morago ye bofefo, goba .navbar-darkya mebala ya morago ye lefsifsi. Ka morago ga moo, tlwaetša ka .bg-*didirišwa.

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

Ditshelo

Le ge e le gore ga e nyakege, o ka phuthela navbar ka go a .containergo e tsenya bogareng letlakaleng goba wa oketša e tee ka gare go tsepamiša fela dikagare tša navbar ya godimo ye e sa fetogego goba ye e sa fetogego .

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

Ge setshelo se le ka gare ga navbar ya gago, padding ya sona ya go rapalala e tlošwa ka dintlha tša go kgaotša tša fase go feta .navbar-expand{-sm|-md|-lg|-xl}sehlopha sa gago se se laeditšwego. Se se netefatša gore ga re ipoeleditše gabedi godimo ga padding go sa nyakege go dipono tša fase ge navbar ya gago e phuhlame.

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

Go bewa ga dilo

Diriša didirišwa tša rena tša maemo go bea di-navbar maemong ao e sego a go se fetoge. Kgetha go tšwa go tše di tsepamego go ya godimo, tše di tsepamego go ya fase, goba tše di kgomaretšego godimo (o phutholla ka letlakala go fihlela le fihla godimo, ke moka o dula moo). Fixed navbars use position: fixed, ho bolela hore ba hula ho tloha phallo e tloaelehileng ea DOM le ka 'na hloka tloaelo CSS (mohlala, padding-topka <body>) ho thibela overlap le elements tse ling.

Gape ela hloko gore .sticky-tope šomiša position: sticky, yeo e sa thekgwego ka botlalo go sephephediši se sengwe le se sengwe .

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

Maitshwaro a go arabela

Di-navbar di ka diriša .navbar-toggler, .navbar-collapse, le .navbar-expand{-sm|-md|-lg|-xl}diklase go fetoga ge diteng tša tšona di phuhlama ka morago ga konope. Ka kopanyo le didirišwa tše dingwe, o ka kgetha gabonolo gore o tla bontšha neng goba wa uta dielemente tše itšego.

Bakeng sa di-navbar tšeo di sa kego tša phuhlama, oketša .navbar-expandsehlopha go navbar. Bakeng sa di-navbar tšeo di dulago di phuhlama, o se ke wa oketša .navbar-expandsehlopha sefe goba sefe.

Sefetoledi sa go fetola

Di-toggler tša Navbar di logagantšwe ka go le letshadi ka go ikemela, eupša ge e ba di swanetše go latela elemente ya ngwanešo go swana le .navbar-brand, di tla logagantšwe ka go iketla go ya go le letona kudu. Go bušetša morago markup ya gago go tla bušetša morago go bewa ga toggler. Ka tlase ke mehlala ya mekgwa e fapaneng ya toggle.

Ka go se .navbar-brandbontšhitšwe ka breakpoint ya fase kudu:

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

Ka leina la leina le le bontšhitšwego ka go le letshadi le toggler ka go le letona:

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

Ka toggler ka go le letshadi le leina la leina ka go le letona:

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

Diteng tša ka ntle

Ka nako ye nngwe o nyaka go šomiša polaka ya go phuhlama go hlohleletša diteng tše di utilwego felotsoko letlakaleng. Ka lebaka la gore plugin ya rena e šoma go idle data-targetgo swana, seo se dirwa gabonolo!

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