Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS navigatsiya paneli (navbar)

ULASHISH

Navigatsiya panellari

Navigatsiya paneli — sahifaning yuqori qismida joylashadigan navigatsiya sarlavhasi:

Bootstrap yordamida navigatsiya paneli ekran o‘lchamiga qarab kengayishi yoki yig‘ilishi mumkin.

Standart navigatsiya paneli <nav class="navbar navbar-default"> yordamida yaratiladi.

Quyidagi misolda sahifaning yuqori qismiga navigatsiya panelini qanday qo‘shish ko‘rsatilgan:

Misol

<nav class="navbar navbar-default">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Page 1</a></li>       <li><a href="#">Page 2</a></li>       <li><a href="#">Page 3</a></li>     </ul>   </div> </nav> ...
O‘zingiz sinab ko‘ring »

Eslatma: Ushbu sahifadagi barcha misollarda navigatsiya paneli kichik ekranlarda juda ko‘p joy egallaydi (biroq katta ekranlarda navigatsiya paneli bitta qatorda joylashadi, chunki Bootstrap moslashuvchan). Bu muammo (kichik ekranlardagi) ushbu sahifadagi oxirgi misolda hal qilinadi.

Teskari ranglardagi navigatsiya paneli (inverted)

Agar standart navigatsiya panelining ko‘rinishi sizga yoqmasa, Bootstrap muqobil variant — qora navigatsiya panelini taqdim etadi:

Shunchaki .navbar-default klassini .navbar-inverse ga o‘zgartiring:

Misol

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Page 1</a></li>       <li><a href="#">Page 2</a></li>       <li><a href="#">Page 3</a></li>     </ul>   </div> </nav>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyuli navigatsiya paneli

Navigatsiya panellari ochiluvchi menyularni ham o‘z ichiga olishi mumkin.

Quyidagi misolda "Page 1" tugmasi uchun ochiluvchi menyu qo‘shiladi:

Misol

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li class="dropdown">         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1         <span class="caret"></span></a>         <ul class="dropdown-menu">           <li><a href="#">Page 1-1</a></li>           <li><a href="#">Page 1-2</a></li>           <li><a href="#">Page 1-3</a></li>         </ul>       </li>       <li><a href="#">Page 2</a></li>       <li><a href="#">Page 3</a></li>     </ul>   </div> </nav>
O‘zingiz sinab ko‘ring »

O‘ngga tekislangan navigatsiya paneli

.navbar-right klassi navigatsiya paneli tugmalarini o‘ngga tekislash uchun ishlatiladi.

Quyidagi misolda navigatsiya panelining o‘ng tomoniga "Sign Up" (ro‘yxatdan o‘tish) va "Login" (kirish) tugmalarini qo‘shamiz. Shuningdek, ikkala yangi tugmaning har biriga glyphicon qo‘shamiz:

Misol

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Page 1</a></li>       <li><a href="#">Page 2</a></li>     </ul>     <ul class="nav navbar-nav navbar-right">       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>     </ul>   </div> </nav>
O‘zingiz sinab ko‘ring »

Navigatsiya panelidagi tugmalar

Navigatsiya paneli ichiga tugmalar qo‘shish uchun Bootstrap tugmasiga .navbar-btn klassini qo‘shing:

Misol

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>     </ul>     <button class="btn btn-danger navbar-btn">Button</button>   </div> </nav>
O‘zingiz sinab ko‘ring »

Navigatsiya panelidagi formalar

Navigatsiya paneli ichiga forma elementlarini qo‘shish uchun forma elementiga .navbar-form klassini qo‘shing va bir yoki bir nechta kiritish maydonini joylashtiring. E’tibor bering, kiritish maydonini o‘z ichiga olgan div konteynerga .form-group klassini qo‘shdik. Agar kiritish maydonlari bir nechta bo‘lsa, bu to‘g‘ri ichki chekinishni (padding) ta’minlaydi (bu haqda "Formalar" bobida batafsil bilib olasiz).

Misol

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Page 1</a></li>       <li><a href="#">Page 2</a></li>     </ul>     <form class="navbar-form navbar-left" action="/action_page.php">       <div class="form-group">         <input type="text" class="form-control" placeholder="Search">       </div>       <button type="submit" class="btn btn-default">Submit</button>     </form>   </div> </nav>
O‘zingiz sinab ko‘ring »

Kiritish maydoni yoniga belgi yoki yordamchi matn biriktirish uchun .input-group va .input-group-addon klasslaridan ham foydalanishingiz mumkin. Bu klasslar haqida "Bootstrap kiritish maydonlari" bobida batafsil bilib olasiz.

Misol

<form class="navbar-form navbar-left" action="/action_page.php">   <div class="input-group">     <input type="text" class="form-control" placeholder="Search">     <div class="input-group-btn">       <button class="btn btn-default" type="submit">         <i class="glyphicon glyphicon-search"></i>       </button>     </div>   </div> </form>
O‘zingiz sinab ko‘ring »

Navigatsiya panelidagi matn

Navigatsiya paneli ichidagi havola bo‘lmagan har qanday elementlarni vertikal bo‘yicha tekislash uchun .navbar-text klassidan foydalaning (to‘g‘ri ichki chekinish va matn rangini ta’minlaydi).

Misol

<nav class="navbar navbar-inverse">   <ul class="nav navbar-nav">     <li><a href="#">Link</a></li>     <li><a href="#">Link</a></li>   </ul>   <p class="navbar-text">Some text</p> </nav>
O‘zingiz sinab ko‘ring »

Qotirilgan navigatsiya paneli

Navigatsiya panelini sahifaning yuqori yoki pastki qismiga qotirib qo‘yish ham mumkin.

Qotirilgan navigatsiya paneli sahifa aylantirilishidan qat’i nazar, belgilangan joyda (yuqorida yoki pastda) ko‘rinib turadi.

.navbar-fixed-top klassi navigatsiya panelini yuqorida qotirib qo‘yadi:

Misol

<nav class="navbar navbar-inverse navbar-fixed-top">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Page 1</a></li>       <li><a href="#">Page 2</a></li>       <li><a href="#">Page 3</a></li>     </ul>   </div> </nav>
O‘zingiz sinab ko‘ring »

.navbar-fixed-bottom klassi navigatsiya panelini pastda qotirib qo‘yadi:

Misol

<nav class="navbar navbar-inverse navbar-fixed-bottom">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Page 1</a></li>       <li><a href="#">Page 2</a></li>       <li><a href="#">Page 3</a></li>     </ul>   </div> </nav>
O‘zingiz sinab ko‘ring »

Navigatsiya panelini yig‘ish

Kichik ekranda navigatsiya paneli ko‘pincha juda ko‘p joy egallaydi.

Navigatsiya panelini yashirib, uni faqat kerak bo‘lganda ko‘rsatishimiz lozim.

Quyidagi misolda navigatsiya paneli yuqori o‘ng burchakdagi tugma bilan almashtirilgan. Navigatsiya paneli faqat shu tugma bosilgandagina ko‘rsatiladi:

Misol

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <div class="collapse navbar-collapse" id="myNavbar">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Home</a></li>         <li><a href="#">Page 1</a></li>         <li><a href="#">Page 2</a></li>         <li><a href="#">Page 3</a></li>       </ul>       <ul class="nav navbar-nav navbar-right">         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>       </ul>     </div>   </div> </nav>
O‘zingiz sinab ko‘ring »

Mashqlar yordamida o‘zingizni sinang

Mashq:

Standart navigatsiya panelini yaratish uchun kerakli klass nomlarini qo‘shing.

<nav class="">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Mashqni boshlash


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish