Source

Navbar

Matsalwa na swikombiso swa nhloko ya matimba ya ku famba-famba ya Bootstrap, leyi hlamulaka, navbar. Ku katsa na nseketelo wa branding, navigation, na swin’wana, ku katsa na nseketelo wa plugin ya hina ya ku wa.

Ndlela leyi swi tirhaka ha yona

Hi leswi u faneleke ku swi tiva u nga si sungula ku tirhisa navbar:

  • Navbars yi lava ku phutsela .navbarna .navbar-expand{-sm|-md|-lg|-xl}for responsive collapsing na titlilasi ta xikimi xa mihlovo .
  • Ti-navbar na leswi nga endzeni ka tona swi khuluka hi ku tiyimisela. Tirhisa swibye leswi nga hlawuriwa ku hunguta ku anama ka swona loku nga etlhelo.
  • Tirhisa titlilasi ta hina ta vukorhokeri bya ku hambana na ku flex ku lawula ku hambana na ku ringanisa endzeni ka ti-navbar.
  • Ti-navbar ti hlamula hi ku tiyimisela, kambe u nga ti cinca hi ku olova leswaku u cinca sweswo. Mahanyelo yo hlamula ya titshege hi xiengetelo xa hina xa Collapse JavaScript.
  • Ti-navbar ti fihliwile hi ku tiyimisela loko u kandziyisa. Ti sindzisa leswaku ti kandziyisiwa hi ku engetela .d-printeka .navbar. Vona tlilasi ya vukorhokeri bya nkombiso .
  • Tiyisisa ku fikelela hi ku tirhisa <nav>elemente kumbe, loko u tirhisa elemente yo angarhela swinene yo fana na a <div>, engetela a role="navigation"eka navbar yin’wana na yin’wana ku yi kombisa hi ku kongoma tanihi ndhawu ya xikombiso xa misava eka vatirhisi va thekinoloji yo pfuneta.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Hlaya emahlweni ku kuma xikombiso na nxaxamelo wa swiphemu-ntsongo leswi seketeriwaka.

Swilo leswi seketeriwaka

Ti-navbar ti ta na nseketelo lowu akiweke endzeni wa swiphemu-ntsongo swi nga ri swingani. Hlawula eka leswi landzelaka loko swi laveka:

  • .navbar-brandeka khampani ya wena, xiendliwa kumbe vito ra phurojeke.
  • .navbar-navku kuma ku famba loku tlakukeke loku heleleke ni loku olovaka (ku katsa ni nseketelo wa swilo leswi nga ehansi).
  • .navbar-togglerku tirhisiwa na plugin ya hina ya collapse na mahanyelo man’wana yo cinca-cinca ya ku famba-famba .
  • .form-inlineeka vulawuri byihi kumbe byihi bya xivumbeko na swiendlo.
  • .navbar-textku engetela tintambhu ta matsalwa leti nga exikarhi hi ku kongoma.
  • .collapse.navbar-collapseku hlengeleta na ku tumbeta swilo swa navbar hi breakpoint ya mutswari.

Hi lexi xikombiso xa swiphemu-ntsongo hinkwaswo leswi katsiweke eka navbar leyi hlamulaka ya nhlokomhaka ya ku vonakala leyi hi yoxe yi wa eka ndhawu lgyo wisa (leyikulu).

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

Xikombiso lexi xi tirhisa titlilasi ta vukorhokeri bya mihlovo ( bg-light) na ku hambana ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Muxaka

The .navbar-brandyi nga tirhisiwa eka swiaki swo tala, kambe anchor yi tirha kahle tanihileswi swiaki swin’wana swi nga ha lavaka titlilasi ta vukorhokeri kumbe switayele swa ntolovelo.

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

Ku engetela swifaniso eka .navbar-brandswi nga ha endleka leswaku minkarhi hinkwayo swi lava switayele leswi endleriweke wena kumbe switirhisiwa leswaku swi va ni mpimo lowu faneleke. Hi leswi swikombiso swin’wana leswi u nga swi kombisaka.

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

Swihlanganisi swa ku famba-famba swa Navbar swi aka eka .navswihlawulekisi swa hina hi tlilasi ya swona ya mucinci naswona swi lava ku tirhisiwa ka titlilasi ta toggler ku kuma xitayili lexi hlamulaka lexi faneleke. Ku famba-famba eka ti-navbar swi ta tlhela swi kula ku teka ndhawu yo tala leyi nga etlhelo hilaha swi nga kotekaka hakona ku hlayisa swilo swa wena swa navbar swi ringanise hi ndlela leyi sirhelelekeke.

Swiyimo leswi tirhaka—na .active—ku kombisa tluka ra sweswi swi nga tirhisiwa hi ku kongoma eka .nav-links kumbe mutswari wa vona wa le kusuhi .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>

Naswona hikuva hi tirhisa titlilasi eka ti-nav ta hina, u nga papalata endlelo leri sekeriweke eka nxaxamelo hi ku helela loko u swi tsakela.

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

U nga ha tlhela u tirhisa swilo leswi nga ehansi eka navbar nav ya wena. Timenyu ta dropdown ti lava element yo phutsela eka xiyimo, kutani tiyisisa leswaku u tirhisa swiaki leswi hambaneke na leswi pfanganisiweke eka .nav-itemna .nav-linktanihilaha swi kombisiweke hakona laha hansi.

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

Swivumbeko

Veka swilawuri swo hambana swa xivumbeko na swiphemu endzeni ka navbar hi .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>

Swiaki swa vana swa xihatla leswi .navbartirhisiwaka swi flex layout naswona swi ta default eka justify-content: space-between. Tirhisa switirhisiwa swo engetela swa flex tanihilaha swi lavekaka hakona ku lulamisa mahanyelo lawa.

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

Mintlawa ya swingheniso ya tirha, na yona:

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

Swikomba-nkarhi swo hambana-hambana swi seketeriwa tanihi xiphemu xa swivumbeko leswi swa navbar, na swona. Leswi switlhela swiva xitsundzuxo lexikulu xa leswaku switirhisiwa swa vertical alignment swinga tirhisiwa ku ringanisa swiaki swa vukulu byo hambana.

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

Tsalwa

Ti-navbar ti nga ha va ni swiphemu swa matsalwa hi ku pfuniwa hi .navbar-text. Tlilasi leyi yi lulamisa ku ringanisa loku yimisiweke na ku hambana loku nga etlhelo ka tintambhu ta matsalwa.

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

Hlanganisa na ku fambisana na swiphemu swin’wana na switirhisiwa loko swi laveka.

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

Swikimi swa mihlovo

Theming the navbar a yi si tshama yi olova hikwalaho ka ku hlanganisiwa ka titlilasi ta theming na background-colorswitirhisiwa. Hlawula eka .navbar-lightku tirhisiwa na mihlovo yo vonikela ya le ndzhaku, kumbe .navbar-darkeka mihlovo ya le ndzhaku ya ntima. Kutani, customize hi .bg-*switirhisiwa.

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

Swikhomela-ndhawu

Hambileswi swi nga lavekiki, u nga phutsela navbar eka a .containerku yi veka exikarhi eka tluka kumbe u engetela yin’we endzeni ku veka ntsena exikarhi ka leswi nga endzeni ka navbar ya le henhla leyi nga cinciki kumbe leyi nga cinciki .

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

Loko xikhomela-ndhawu xi ri endzeni ka navbar ya wena, padding ya xona leyi nga etlhelo yi susiwa eka tindhawu to wisa leti nga ehansi ka .navbar-expand{-sm|-md|-lg|-xl}tlilasi ya wena leyi u yi boxiweke. Leswi swi tiyisisa leswaku a hi phindhi kambirhi eka padding swi nga fanelanga eka swivono swa le hansi loko navbar ya wena yi wile.

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

Ku vekiwa ka swilo

Tirhisa switirhisiwa swa hina swa xiyimo ku veka ti-navbar eka swiyimo leswi nga cinciki. Hlawula eka leswi nga cinciki ku ya ehenhla, leswi nga cinciki ehansi kumbe leswi namarhetiwe ehenhla (swiphepherhele ni tluka ku kondza ri fika ehenhla, ivi u tshama kwalaho). Ti navbar leti nga cinciki ti tirhisa position: fixed, leswi vulaka leswaku ti kokiwa eka ku khuluka ka ntolovelo ka DOM naswona ti nga ha lava CSS ya ntolovelo (xikombiso, padding-topeka <body>) ku sivela ku hlangana na swiaki swin’wana.

Nakambe xiya leswaku .sticky-topyi tirhisa position: sticky, leyi nga seketeriwiki hi ku helela eka browser yin'wana ni yin'wana .

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

Mahanyelo yo hlamula

Ti-navbar ti nga tirhisa .navbar-toggler, .navbar-collapse, na .navbar-expand{-sm|-md|-lg|-xl}titlilasi ku cinca loko nhundzu ya tona yi wa endzhaku ka buti. Loko swi hlanganisiwa ni switirhisiwa swin’wana, u nga hlawula hi ku olova leswaku u ta kombisa rini kumbe u tumbeta swiaki swo karhi.

Eka ti-navbar leti nga si tshamaka ti wa, engetela .navbar-expandtlilasi eka navbar. Eka ti navbar leti tshamaka ti ri karhi ti wa, u nga engeteli .navbar-expandtlilasi yihi na yihi.

Xitirhisiwa xo cinca-cinca

Ti-toggler ta Navbar ti ringanisiwa hi ximatsi hi ku tiyimisela, kambe loko ti fanele ti landzelela elemente ya makwavo ku fana na .navbar-brand, ti ta ringanisiwa hi ku tisungulela eka tlhelo ra xinene swinene. Ku tlherisela endzhaku markup ya wena swi ta tlherisela endzhaku ku vekiwa ka toggler. Laha hansi ku na swikombiso swa switayele swo hambana swa toggle.

Ku nga ri na .navbar-brandleswi kombisiweke eka breakpoint ya le hansi:

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

Hi vito ra brand leri kombisiweke eximatsini na toggler hi tlhelo ra xinene:

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

Hi toggler etlhelo ra ximatsi na vito ra brand hi tlhelo ra xinene:

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

Nhundzu ya le handle

Minkarhi yin’wana u lava ku tirhisa xiengetelo xa collapse ku pfuxa swilo leswi fihliweke kun’wana eka tluka. Hikuva plugin ya hina yi tirha eka idna ku data-targetfambisana, sweswo swi endliwa hi ku olova!

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