Kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot

.navbar-brend kompaniyangiz, mahsulotingiz yoki loyihangiz nomi uchun.   

.navbar-nav to'liq balandlik va yengil navigatsiya uchun (shu jumladan 

ochiladigan dasturlarni qo'llab-quvvatlash).  har qanday shaklni 

boshqarish va harakatlar uchun .form-inline.  .navbar-vertikal 

markazlashtirilgan satrlarni qo'shish uchun matn.   

.collapse.navbar-kollaps, navbar tarkibini parent to'xtash nuqtasi bilan guruhlash 

va yashirish uchun.  

Pastdan boshlab navbarlarga misol keltirishni boshlayman va u lg larni qo’llab 

quvvatlaydi,saytni kichraytirsak responsive holatga keladi.  

1-misol.  

 

 

<

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

" 

datatarget

="

#navbarSupportedContent

" 

aria-controls

="

navbarSupportedContent

" 

ariaexpanded

="

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

="

sronly

">

(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

" 

ariahaspopup

="

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

="

#

">

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

>

 

 

Dropdownni bossak ichki menyular hosil bo’ladi.  

  

Brand.Biz bootstrap yordamida menyubarga brand nomini .navbar-brand classi 

yordamida  har xil ko’rinishda kiritishimiz mumkin.  

  

 

 

<

nav

 

class

="

navbar navbar-light bg-light

">

 

 

    

<

a

 

class

="

navbar-brand

" 

href

="

#

">

Navbar

a

>

 

 

  

nav

>

 

 

   

 

  

 

 

  

<

nav

 

class

="

navbar navbar-light bg-light

">

 

 

    

<

span

 

class

="

navbar-brand mb-0 h1

">

Navbar

span

>

 

 

  

nav

>

 

 

Rasmlarni .navbar-brendga qo'shish uchun har doim moslashtirilgan uslublar yoki 

yordamchi dasturlar to'g'ri o'lchamlarini talab qilishi mumkin.  

  

<

nav

 

class

="

navbar navbar-light bg-light

">

 

 

    

<

a

 

class

="

navbar-brand

" 

href

="

#

">

 

 

      

<

img

 

src

="

/docs/4.1/assets/brand/bootstrapsolid.svg

" 

width

="

30

" 

height

="

30

" 

alt

="">

 

 

---

    

a

>

 

 

  

nav

>

 

 

 Yoki  

  

<

nav

 

class

="

navbar navbar-light bg-light

">

 

 

    

<

a

 

class

="

navbar-brand

" 

href

="

#

">

 

 

      

<

img

 

src

="

/docs/4.1/assets/brand/bootstrap-

 

solid.svg

" 

width

="

30

" 

height

="

30

" 

class

="

d-inline-block align-top

" 

alt

="">

 

 

      Bootstrap 

 

    

a

>

 

 

  

nav

>

 

 

  

     Navbar-navigatsiya havolalari bizning .nav-ning variantlarini o'zlarining 

modifikatorlari sinfi bilan yaratadi va to'g'ri javob berish uslubi uchun toggler 

sinflaridan foydalanishni talab qiladi. Navbarlardagi navigatsiya sizning 

navbaringiz tarkibini xavfsiz qilish uchun imkon qadar gorizontal joyni egallashga 

imkon beradi.  

    Joriy  sahifani  ko'rsatish  uchun  .active  bilan  faol  holatlar  to'g'ridan-to'g'ri 

.navhavolalariga yoki ularning bevosita parents .nav-elementlariga qo'llanilishi 

mumkin.  

  

<

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

" 

datatarget

="

#navbarNav

" 

aria-controls

="

navbarNav

" 

aria-expanded

="

false

" 

arialabel

="

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

="

sronly

">

(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

="

#

">

Disabled

a

>

 

 

        

li

>

 

 

---

      

ul

>

 

 

    

div

>

   

nav

>