Kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi toshkent axborot

.form-inline yordamida navbar ichiga turli xil formalar va komponentlarini 

joylashtirish mumkin:  

  

  

 

<

nav

 

class

="

navbar navbar-light bg-light

">

 

 

  

<

form

 

class

="

form-inline

">

 

 

    

<

input

 

class

="

form-control mr-sm-2

" 

type

="

search

" 

placeholder

="

Search

" 

arialabel

="

Search

">

 

 

    

<

button

 

class

="

btn btn-outline-success my-2 my-sm-

 

0

" 

type

="

submit

">

Search

button

>

 

 

  

form

>

 

nav

>

 

 

  

Menyubarlarni rangli qilsa ham bo’ladi.

 .

navbar-light

 bu yorqin rangli fon uchun,

 

.navbar-dark 

esa to’q rangli fon uchun ishlatiladi.  

  

<

nav

 

class

="

navbar navbar-dark bg-dark

">

 

 

    

 

 

  

nav

>

 

 

   

 

  

<

nav

 

class

="

navbar navbar-dark bg-primary

">

 

 

    

 

 

  

nav

>

 

 

   

 

  

<

nav

 

class

="

navbar navbar-light

" 

style

="

background-color: #e3f2fd;

">

 

 

    

 

 

  

nav

>

 

 

Biz saytimizga yashirin menyularni ham joylashimiz mumkin.Masalan:   

---

 

Mana shu holat.Dastur kodi esa:  

<

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

" 

datatarget

="

#navbarToggleExternalContent

" 

ariacontrols

="

navbarToggleExternalContent

" 

aria-expanded

="

false

" 

arialabel

="

Toggle navigation

">

 

 

        

<

span

 

class

="

navbar-toggler-icon

">span

>

 

 

      

button

>

 

 

    

nav

>

   

div

>

 

 

  

  

  

  

  

  

  

  

  

  

Pagination bilan ishlash. 

 

Biz saytlarga sahifalarni hammasini joylasak,saytimiz ko’rimsiz va juda ham kata 

bo’lib ketadi.Shuning uchun biz link orqali yana sahifalarni qo’shishimiz 

mumkin.Biz bunda saytini pastida joylashgan raqamlarni bootstrap orqali 

ishlatamiz. Masalan bu holat:  

---

  

 

<

nav

 

aria-label

="

Page navigation example

">

 

 

    

<

ul

 

class

="

pagination

">

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

Previous

a

>

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

1

a

>

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

2

a

>

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

3

a

>

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

Next

a

>

li

>

 

 

    

ul

>

 

 

  

nav

>

 

 

  

.sr-only buyrug’i orqali tugmachalar ham qo’shishimiz mumkin.  

  

<

nav

 

aria-label

="

Page navigation example

">

 

 

    

<

ul

 

class

="

pagination

">

 

 

      

<

li

 

class

="

page-item

">

 

 

        

<

a

 

class

="

page-link

" 

href

="

#

" 

aria-label

="

Previous

">

 

 

          

<

span

 

aria-hidden

="

true

">&

laquo

;span

>

 

 

          

<

span

 

class

="

sr-only

">

Previous

span

>

 

 

        

a

>

 

 

      

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

1

a

>

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

2

a

>

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

3

a

>

li

>

 

 

      

<

li

 

class

="

page-item

">

 

 

        

<

a

 

class

="

page-link

" 

href

="

#

" 

aria-label

="

Next

">

 

 

          

<

span

 

aria-hidden

="

true

">&

raquo

;span

>

 

 

          

<

span

 

class

="

sr-only

">

Next

span

>

 

 

        

a

>

 

 

      

li

>

 

 

    

ul

>

 

 

  

nav

>

 

 

  

  

 bu holatda biz o’sha sahifaga  

o’tganimizda,sahifada belgi qolishi.  

---

<

nav

 

aria-label

="

...

">

 

 

    

<

ul

 

class

="

pagination

">

 

 

      

<

li

 

class

="

page-item disabled

">

 

 

        

<

a

 

class

="

page-link

" 

href

="

#

" 

tabindex

="

-1

">

Previous

a

>

 

 

      

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

1

a

>

li

>

 

 

      

<

li

 

class

="

page-item active

">

 

 

        

<

a

 

class

="

page-link

" 

href

="

#

">

2 

<

span

 

class

="

sronly

">

(current)

span

>a

>

 

 

      

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

3

a

>

li

>

 

 

      

<

li

 

class

="

page-item

">

 

 

        

<

a

 

class

="

page-link

" 

href

="

#

">

Next

a

>

       

li

>

 

 

    

ul

>

 

 

  

nav

>

 

 

   

Bu belgilarni katta yoki kichik qilishimiz mumkin.Bularni 

.pagination-lg

 yoki 

.pagination-sm

  

buyruqlarini qo’shish orqali hosil qilamiz. 

 

  

 

<

nav

 

aria-label

="

...

">

 

 

    

<

ul

 

class

="

pagination pagination-lg

">

 

 

      

<

li

 

class

="

page-item disabled

">

 

 

        

<

a

 

class

="

page-link

" 

href

="

#

" 

tabindex

="

-1

">

1

a

>

 

 

      

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

2

a

>

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

3

a

>

li

>

 

 

    

ul

>

 

 

  

nav

>

 

 

  

  

<

nav

 

aria-label

="

...

">

 

 

    

<

ul

 

class

="

pagination pagination-sm

">

 

 

      

<

li

 

class

="

page-item disabled

">

 

 

        

<

a

 

class

="

page-link

" 

href

="

#

" 

tabindex

="

-1

">

1

a

>

 

 

      

li

>

 

 

      

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

2

a

>

li

>

       

<

li

 

class

="

page-item

"><

a

 

class

="

page-link

" 

href

="

#

">

3

a

>

li

>

 

 

    

ul

>

 

 

  

nav

>

 

 

  

---

Xulosa.  

Bootstrap saytimizni go’zallashtirishga hizmat qiluvchi freymvork 

hisoblanib,hozirda ko’pchilik foydalanib kelmoqda.Bootstrap soddaligi va 

natijaviyligi bilan boshqa freymvorklardan ajralib turadi.Bootstrap css ishini ancha 

kamaytirgan.Men ham Bootstrapdan ko’p hollarda foydalanaman.Navbarga 

keladigan bo’lsak,agarda uni html va css dan o’zimiz tayyorlaganimzda anchagina 

vaqtni yo’qotib qo’yishimiz mumkin va dastur kodimiz ko’payib 

ketadi.Bootstrapda esa bir kutubxonada foydalanamiz va ishimiz hal.  

  

Foydalanilgan veb saytlar: 

 

1. 

https://getbootstrap.com

 

 

2. 

https://translate.google.com

 

 

3. 

W3Schools Online Web Tutorials

 

 

  

---

Document Outline

• Mustaqil ish