Source

Navbar

Dukumeenti iyo tusaalooyin loogu talagalay Bootstrap's awood badan, madax-wareejin ka jawaabaya, navbar. Waxaa ku jira taageerada summeynta, hagidda, iyo wax ka badan, oo ay ku jirto taageerada pluginkeenna burburka.

Sida ay u shaqeyso

Waa kuwan waxa aad u baahan tahay inaad ogaato ka hor intaadan bilaabin navbar:

Navbars-ku waxay u baahan yihiin in lagu duubo burburka jawaaba .navbarleh .navbar-expand{-sm|-md|-lg|-xl}iyo fasallada nidaamka midabka .
Navbars iyo waxa ku jira waa dareere ahaan. Isticmaal weel ikhtiyaari ah si aad u xaddiddo ballacooda jiifka ah.
U isticmaal kala dheeraynta iyo fasallada utility-ga dabacsan si aad u xakamayso kala dheeraynta iyo toosinta navbars gudahooda.
Navbars si toos ah ayey uga jawaabaan, laakiin si fudud ayaad u beddeli kartaa si aad taas u beddesho. Dabeecada jawaab celinta waxay ku xiran tahay Burburinta JavaScript plugin.
Navbars si toos ah ayaa loo qariyaa marka la daabacayo. Ku qas in la daabaco adoo ku .d-printdaraya .navbar. Eeg fasalka utility bandhigay .
Hubi gelitaanka adigoo isticmaalaya shay <nav>ama, haddii la isticmaalayo curiye ka badan sida a <div>, ku dar role="navigation"navbar kasta si aad si cad ugu aqoonsato inuu yahay gobol calaamad u ah isticmaalayaasha tignoolajiyada caawinta.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Akhri tusaale iyo liiska qayb-hoosaadyada la taageeray.

Waxyaabaha la taageeray

Navbars waxay la yimaadaan taageero ku dhisan qayb yar oo ka kooban qaybo hoose. Ka dooro kuwa soo socda haddii loo baahdo:

.navbar-brandee shirkaddaada, alaabtaada, ama magaca mashruuca.
.navbar-navloogu talagalay socodka dhererka buuxa iyo fududaanta (ay ku jirto taageerada hoos u dhaca).
.navbar-togglersi loogu isticmaalo pluginkeena burburay iyo dabeecadaha kale ee leexinta .
.form-inlineqaab kasta oo la xakameeyo iyo ficilada.
.navbar-textsi loogu daro xardho qoraal ah oo toosan.
.collapse.navbar-collapsekooxaynta iyo qarinta waxa ku jira navbar barta waalidka.

Waa kuwan tusaale dhammaan qaybaha-hoosaadka ee lagu daray navbar-fudud iftiin leh oo si toos ah ugu dunta meesha lg(weyn).

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

Tusaalahani waxa uu isticmaalaa midab ( bg-light) iyo kala dheerayn ( my-2, my-lg-0, mr-sm-0) my-sm-0fasalada utility.

Summada

Midda .navbar-brandwaxaa lagu dabaqi karaa inta badan walxaha, laakiin barroosintu waxay u shaqeysaa sida ugu fiican maadaama walxaha qaarkood ay u baahan karaan fasalo utility ama qaabab gaar ah.

<!-- 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 darista sawirada .navbar-brandwaxay u badan tahay inay had iyo jeer u baahan tahay qaabab gaar ah ama utility si ay u cabbiraan si sax ah. Waa kuwan tusaalooyin lagu muujinayo.

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

Nav

Isku xirka navbar navigation waxay ku dhismaan .navikhtiyaarkayaga fasalkooda wax ka beddelka waxayna u baahan yihiin isticmaalka fasallada toggler si habayn habboon looga jawaabo. Navigation in navbars ayaa sidoo kale kori doona si ay u qabsadaan inta badan oo bannaan oo siman inta suurtogalka ah si aad u ilaaliso waxa ku jira navbar si ammaan ah.

Dawladaha firfircoon — oo leh .active— si loo muujiyo bogga hadda jira waxaa si toos ah loogu dabaqi karaa .nav-links ama waalidkooda dhow .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>

Iyo sababta oo ah waxaan u isticmaalnaa xiisadaha maraakiibtayada, waxaad ka fogaan kartaa habka liiska ku saleysan gabi ahaanba haddii aad rabto.

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

Waxa kale oo aad isticmaali kartaa hoos u dhaca ku jira navbarkaaga. Liiska hoos-u-dhaca waxay u baahan yihiin cunsur wax lagu duubo meelaynta, markaa hubso inaad isticmaasho walxo gaar ah oo buul leh .nav-itemiyo .nav-linksida hoos ku cad.

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

Foomamka

Dhig kontaroolo kala duwan iyo qaybo kala duwan gudaha navbar leh .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>

Cunsurada carruurta ee isla markaaba .navbaristicmaalaya qaabka dabacsanaanta oo waxay noqon doonaan justify-content: space-between. Isticmaal qalab dabacsan oo dheeri ah markaad u baahan tahay si aad u hagaajiso dhaqankan.

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

Kooxaha wax-gelinta ayaa sidoo kale shaqeeya:

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

Badhamada kala duwan ayaa sidoo kale lagu taageeraa qayb ka mid ah foomamka navbar. Tani waxay sidoo kale xusuusin weyn u tahay in utility-ka toosan ee toosan loo isticmaali karo in lagu toosiyo walxaha kala duwan.

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

Qoraal

Navbars waxaa laga yaabaa inay ku jiraan qaybo qoraal ah iyadoo la kaashanayo .navbar-text. Fasalkani wuxuu hagaajiyaa toosinta toosan iyo kala dheeraynta toosan ee xargaha qoraalka.

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

Ku qas oo ku dhig qaybaha kale iyo adeegyada sida loo baahdo.

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

Nidaamyada midabka

Daabacaadda navbar-ka waligeed may fududayn iyada oo ay ugu wacan tahay isku darka xiisadaha mawduuca iyo background-coloradeegyada. Ka dooro .navbar-lightisticmaalka midabada asalka ah ee iftiinka, ama .navbar-darkmidabada asalka madow. Ka dib, ku beddel .bg-*adeegyada.

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

Konteenarada

In kasta oo aan loo baahnayn, waxaad ku duubi kartaa navbar a .containersi aad u dhex dhigto bogga ama waxaad ku dari kartaa mid ka mid ah dhexda kaliya ee ku jira navbar sare oo go'an ama taagan .

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

Marka weelku ku dhex jiro navbarkaaga, suufkiisa jiifka ah ayaa laga saarayaa meelaha jaban ee ka hooseeya .navbar-expand{-sm|-md|-lg|-xl}fasalkaaga cayiman. Tani waxay xaqiijinaysaa inaanaan labanlaabin suufka aan loo baahnayn ee meelaha hoose marka navbar kaaga uu burburay.

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

Meelaynta

Adeegso utility booskayaga si aad u dhigto navbars boosaska aan joogsiga lahayn. Ka dooro mid go'an ilaa sare, go'an xagga hoose, ama ku dheggan xagga sare (ku duub bogga ilaa ay ka gaadhayso xagga sare, ka dibna halkaa ku sii jir). Navbars go'an ayaa adeegsada position: fixed, taasoo la macno ah in laga soo jiiday socodka caadiga ah ee DOM waxaana laga yaabaa inay u baahdaan CSS caado ah (tusaale, padding-topon the <body>) si looga hortago isku dhafka walxaha kale.

Sidoo kale ogow .sticky-topisticmaalkaas position: sticky, kaas oo aan si buuxda u taageersanayn browser kasta .

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

Dabeecadaha ka jawaaba

Navbars waxay isticmaali karaan .navbar-toggler, .navbar-collapse, iyo .navbar-expand{-sm|-md|-lg|-xl}fasallo si ay u beddelaan marka nuxurkoodu ku burburo badhanka gadaashiisa. Marka lagu daro tas-hiilaadka kale, waxaad si fudud u dooran kartaa marka aad muujinayso ama qarinayso waxyaabo gaar ah.

Navbars aan waligood dumin, ku dar .navbar-expandfasalka navbar-ka. Navbar-yada had iyo jeer burbura, ha ku darin wax .navbar-expandfasal ah.

Toggler

Togglers Navbar si toos ah ayay bidix u toosan yihiin, laakiin haddii ay raacaan walxaha walaalaha ah sida a .navbar-brand, waxay si toos ah ula toosi doonaan midigta fog. Dib u noqoshada calaamadayntaada waxay beddeli doontaa meelaynta toggler-ka. Hoos waxaa ah tusaalayaal qaababka beddelka ee kala duwan.

Iyadoo aan .navbar-brandlagu tusin meesha ugu hoosaysa:

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

Leh magaca summada oo ka muuqda bidix iyo toggler dhanka midig:

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

Ku-rogeeyaha bidix iyo magaca summada ee midig:

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

Waxyaabaha dibadda

Mararka qaarkood waxaad rabtaa inaad isticmaasho plugin burburka si aad u kiciso waxyaabaha qarsoon ee meelo kale oo bogga ah. Sababtoo ah pluginkeena wuxuu ka shaqeeyaa isku id- data-targetdhafka, taas si fudud ayaa loo sameeyaa!

Waxyaabaha burburay

Lagu beddeli karo astaanta navbar

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