CSS navigatsiya menyulari
Tablar va pill’lar
| Klass | Tavsif | Misol |
|---|---|---|
| .nav nav-tabs | Navigatsiya tablarini yaratadi | Sinab ko‘ring |
| .nav nav-pills | Navigatsiya pill’larini yaratadi | Sinab ko‘ring |
| .nav nav-pills nav-stacked | Vertikal navigatsiya pill’larini yaratadi | Sinab ko‘ring |
| .nav-justified | 768px dan keng ekranlarda navigatsiya tablari/pill’larini ota element kengligi bo‘yicha teng kenglikda qiladi. Kichikroq ekranlarda navigatsiya tablari/pill’lari ustma-ust joylashadi | Sinab ko‘ring |
| .disabled | Nofaol (bosib bo‘lmaydigan) tab/pill’ni bildiradi | Sinab ko‘ring |
| Ochiluvchi menyuli navigatsiya tablari | Sinab ko‘ring | |
| Ochiluvchi menyuli navigatsiya pill’lari | Sinab ko‘ring | |
| .tab-content | .tab-pane va data-toggle="tab" (pill’lar uchun data-toggle="pill") bilan birga tab/pill’ni almashtiriladigan qiladi | Sinab ko‘ring |
| .tab-pane | .tab-content va data-toggle="tab" (pill’lar uchun data-toggle="pill") bilan birga tab/pill’ni almashtiriladigan qiladi | Sinab ko‘ring |
Navigatsiya panellari
| Klass | Tavsif | Misol |
|---|---|---|
| .navbar | Navigatsiya panelini yaratadi | Sinab ko‘ring |
| .navbar-brand | Logotip yoki sarlavhani ifodalash uchun navigatsiya paneli ichidagi havola yoki sarlavha elementiga qo‘shiladi | Sinab ko‘ring |
| .navbar-btn | Navigatsiya paneli ichidagi tugmani vertikal tekislaydi | Sinab ko‘ring |
| .navbar-collapse | Navigatsiya panelini yig‘adi (mobil telefonlar va kichik planshetlarda u yashiriladi va menyu/gamburger belgisi bilan almashtiriladi) | Sinab ko‘ring |
| .navbar-default | Standart navigatsiya panelini yaratadi (och kulrang fon rangi) | Sinab ko‘ring |
| .navbar-fixed-bottom | Navigatsiya panelini ekranning pastki qismida qotirib qo‘yadi (sticky/fixed) | Sinab ko‘ring |
| .navbar-fixed-top | Navigatsiya panelini ekranning yuqori qismida qotirib qo‘yadi (sticky/fixed) | Sinab ko‘ring |
| .navbar-form | Navigatsiya paneli ichidagi forma elementlarini vertikal markazlashtirish uchun ularga qo‘shiladi (to‘g‘ri ichki chekinish) | Sinab ko‘ring |
| .navbar-header | Logotip yoki sarlavhani ifodalovchi havola/elementni o‘z ichiga olgan konteyner elementga qo‘shiladi | Sinab ko‘ring |
| .navbar-inverse | Qora navigatsiya panelini yaratadi (och kulrang o‘rniga) | Sinab ko‘ring |
| .navbar-left | Navigatsiya panelidagi havolalar, formalar, tugmalar yoki matnni chapga tekislaydi | Sinab ko‘ring |
| .navbar-link | Elementni navigatsiya paneli ichidagi havola kabi ko‘rinadigan qilib bezaydi (havolalar (anchor) to‘g‘ri ichki chekinish va sichqoncha ustiga olib borilganda tagiga chiziq oladi, p yoki span kabi boshqa elementlar esa standart hover effektini oladi — inversiyalangan navigatsiya panelida oq rang, standart navigatsiya panelida esa qora rang) | Sinab ko‘ring |
| .navbar-nav | Navigatsiya paneli ichidagi havolali ro‘yxat elementlarini o‘z ichiga olgan <ul> konteynerida ishlatiladi | Sinab ko‘ring |
| .navbar-right | Navigatsiya panelidagi havolalar, formalar, tugmalar yoki matnni o‘ngga tekislaydi. | Sinab ko‘ring |
| .navbar-static-top | Navigatsiya panelidan chap, yuqori va o‘ng chegaralarni (yumaloq burchaklarni) olib tashlaydi (standart navigatsiya paneli odatda kulrang chegara va 4px border-radius’ga ega) | |
| .navbar-text | Navigatsiya paneli ichidagi havola bo‘lmagan har qanday elementni vertikal tekislaydi (to‘g‘ri ichki chekinishni ta’minlaydi) | Sinab ko‘ring |
| .navbar-toggle | Kichik ekranlarda navigatsiya panelini ochadigan tugmani bezaydi. Ochib-yopiladigan menyu belgisini (gamburger/chiziqlar) ko‘rsatish uchun ko‘pincha uchta .icon-bar klassi bilan birga ishlatiladi |
Sinab ko‘ring |
Breadcrumbs va sahifalash (pagination)
| Klass | Tavsif | Misol |
|---|---|---|
| .breadcrumb | Breadcrumb (navigatsiya yo‘li) yaratadi | Sinab ko‘ring |
| .pager | Oddiy sahifalash havolalarini taqdim etadi (Oldingi/Keyingi) | Sinab ko‘ring |
| .previous | .pager’ning "oldingi" tugmasini chapga tekislaydi | Sinab ko‘ring |
| .next | .pager’ning "keyingi" tugmasini o‘ngga tekislaydi | Sinab ko‘ring |
| .disabled | Bosib bo‘lmaydigan havolani bildiradi | Sinab ko‘ring |
| .pagination | Sahifalash havolalarini taqdim etadi | Sinab ko‘ring |
| .pagination-lg | Kattaroq sahifalash havolalarini hosil qilish uchun .pagination klassi bilan birga ishlatiladi | Sinab ko‘ring |
| .pagination-sm | Kichikroq sahifalash havolalarini hosil qilish uchun .pagination klassi bilan birga ishlatiladi | Sinab ko‘ring |
| .disabled | Bosib bo‘lmaydigan havolani bildiradi | Sinab ko‘ring |
| .active | Joriy sahifani bildiradi | Sinab ko‘ring |
Yorliqlar va nishonlar
| Klass | Tavsif | Misol |
|---|---|---|
| .label label-default | Standart kulrang yorliqni bildiradi | Sinab ko‘ring |
| .label label-primary | "primary" turidagi ko‘k yorliqni bildiradi | Sinab ko‘ring |
| .label label-success | "success" turidagi yashil yorliqni bildiradi | Sinab ko‘ring |
| .label label-info | "info" turidagi och ko‘k yorliqni bildiradi | Sinab ko‘ring |
| .label label-warning | "warning" turidagi sariq yorliqni bildiradi | Sinab ko‘ring |
| .label label-danger | "danger" turidagi qizil yorliqni bildiradi | Sinab ko‘ring |
| .badge | Yangi yoki o‘qilmagan elementlarni bildiradi | Sinab ko‘ring |
| .jumbotron | Tanlangan kontent yoki ma’lumotga alohida e’tibor qaratish uchun katta blokni bildiradi | Sinab ko‘ring |
| .jumbotron (qo‘shimcha) | .jumbotron bloki butun kenglikni egallashi va yumaloq burchaklarsiz bo‘lishi uchun uni .container klassidan tashqariga joylashtiring | Sinab ko‘ring |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!