W3.CSS Kitchen Sink (barcha klasslar namoyishi)
W3.CSS bir qarashda
Bu sahifa bitta sahifada ko‘plab W3.CSS klasslarini namoyish etadi.
Undan tezkor vizual ma’lumotnoma yoki o‘z sahifalaringiz uchun ilhom manbai sifatida foydalaning.
W3.CSS konteynerlar
w3-container klassi veb-sahifaga standart tashqi va ichki bo‘shliqlarni (margin va padding) hamda standart vertikal va gorizontal tekislashni beradi:
Bu sarlavha qismi (header)
London
London is the most populous city in the United Kingdom.
It has a metropolitan area of over 9 million inhabitants.
w3-container klassi odatda quyidagi kabi HTML konteyner elementlari bilan ishlatiladi:
- <div>
- <header>
- <footer>
- <nav>
- <article>
- <section>
- <form>
W3.CSS panellar
w3-panel klassi — yuqori va pastki tashqi bo‘shliq (margin) qo‘shilgan konteyner klassi.
Men panelman.
W3.CSS chegaralar
Chegara
W3.CSS kartochkalar
w3-card klassi rasmlar uchun ham, eslatmalar uchun ham mos keladi:
A Car
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, and to typically have four wheels.
(Wikipedia)
Amazing
French Alps
W3.CSS moslashuvchan sahifa o‘lchamlari
w3-content kontentni maksimal kenglik bilan markazga joylashtiradi.
w3-auto moslashuvchan, markazlashtirilgan konteyner yaratadi.
W3.CSS Flexbox
w3-flex klassi flexbox elementlari uchun konteynerni belgilaydi.
Flexbox konteynerining bola elementlari avtomatik ravishda flexbox elementlariga aylanadi.
1
2
3
Qat’iy
Egiluvchan
W3.CSS Grid
w3-grid klassi grid elementlari uchun ota konteyner yaratadi.
Grid konteynerining bola elementlari avtomatik ravishda grid elementlariga aylanadi.
1
2
3
4
5
6
7
8
W3.CSS qatorlar
w3-row klassi qatorlarni ikki, uch va to‘rt teng qismga bo‘lishi mumkin.
Kichik ekranlarda ustunlar avtomatik ravishda ustma-ust joylashadi.
w3-half
w3-half
w3-third
w3-third
w3-third
w3-quarter
w3-threequarter
W3.CSS kataklar
w3-cell klassi oddiy ustunli maketlar yaratadi.
Katakchalar o‘z kengligi va balandligini avtomatik moslashtira oladi hamda vertikal tekislanishi mumkin.
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
12 ustunli maket
w3-row klassi veb-sahifani 12 ta ustunga ham bo‘lishi mumkin.
Bu klass small, medium va large klasslari bilan 12 ustunli, mobile-first yondashuvdagi moslashuvchan (fluid) gridni qo‘llab-quvvatlaydi.
s12 m6 l4
s12 m6 l4
s12 m12 l4
- s12 kichik ekranda 12 ta ustunni egallaydi
- m6 o‘rta ekranda oltita ustunni egallaydi
- l4 katta ekranda 4 ta ustunni egallaydi
W3.CSS maket variantlari
| Maket | Qo‘llanilishi |
|---|---|
| Flexbox | Qatorlar yoki ustunlar, tekislash va moslashuvchan elementlar |
| Grid | Qator va ustunli zamonaviy maketlar |
| Qatorlar (rows) | Oddiy yarimlar, uchdan birlar va choraklar |
| Katakchalar (cells) | Balandligi teng, jadvalga o‘xshash oddiy maketlar |
| 12 ustunli maket | Eski W3.CSS moslashuvchan maketlari bilan moslik |
Yangi maketlar uchun odatda Flexbox va Grid eng moslashuvchan tanlov hisoblanadi.
Eski W3.CSS maket klasslari moslik va qulaylik uchun hamon qo‘llab-quvvatlanadi.
W3.CSS display klasslari
w3-display klasslari HTML elementlarini ma’lum joylarda ko‘rsatish imkonini beradi:
W3.CSS ichki bo‘shliq (padding)
Ichki bo‘shliq (padding) element ichida bo‘shliq hosil qiladi.
W3.CSS turli miqdordagi ichki bo‘shliq qo‘shish uchun klasslarni taqdim etadi.
Ichki bo‘shliq (padding)
Bu matn atrofidagi ko‘k bo‘shliq — ichki bo‘shliq (padding).
W3.CSS tashqi bo‘shliq (margin)
Tashqi bo‘shliqlar (margin) element tashqarisida bo‘shliq hosil qiladi.
W3.CSS elementlar atrofiga yoki yoniga tashqi bo‘shliq (margin) qo‘shish uchun klasslarni taqdim etadi.
Tashqi bo‘shliq (margin)
Bu yashil element atrofidagi oq bo‘shliq — uning tashqi bo‘shlig‘i (margin).
W3.CSS eslatmalar
Eslatma
Sariq rang ko‘pincha bildirishnomalar uchun ishlatiladi.
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
W3.CSS iqtiboslar
W3.CSS ogohlantirishlar
Xavf!
Nimadir zudlik bilan e’tibor talab qiladi.
Ogohlantirish!
Nimadir e’tibor talab qilishi mumkin.
Muvaffaqiyatli!
Amal muvaffaqiyatli yakunlandi.
Ma’lumot
Mana foydali ma’lumot.
W3.CSS tugmalar
w3-button va w3-btn klasslari barcha o‘lcham va turdagi tugmalarni taqdim etadi.
Keng tugmalar:
Doira yoki kvadrat shaklidagi tugmalar:
W3.CSS jadvallar
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
W3.CSS ro‘yxatlar
A’zolar
- John
- Paul
- Lisa
W3.CSS rasmlar
Moslashuvchan kenglik
Yumaloq burchakli
Doira
Oddiy
Shaffoflik
Kulrang tus
Sepiya
W3.CSS kiritish formalari
w3-input klassi boshqa kiritish klasslari — w3-check, w3-radio va w3-select bilan birga ishlaydi.
Input Form
W3.CSS yumaloq burchaklar
w3-round klasslari istalgan HTML elementga yumaloq burchaklar qo‘shadi.
Round Round Large Round XLarge
W3.CSS teglar
w3-tag klassi har xil turdagi teglar, yorliqlar va lavhalarni ko‘rsata oladi:
Yangi Ogohlantirish Xavf Ma’lumot
BREATHE
UNDER WATER
W3.CSS nishonlar
w3-badge klassi doira shaklidagi nishonlar (badge) yaratadi. Standart rang — qora.
1 2 3 4
A B C D
W3.CSS barlar
w3-bar klassi gorizontal panellarni (bar) bezash uchun ishlatiladi.
W3.CSS navigatsiya
W3.CSS ochiluvchi menyular
W3.CSS akkordeonlar
Akkordeon kontenti.
W3.CSS tablar
London
London is the capital of England.
Progress barlar
W3.CSS modal oynalar
Tooltiplar
Sichqonchani bu matn ustiga olib boring Tooltip kontenti
W3.CSS effektlar
Oddiy
w3-opacity
w3-grayscale-max
w3-sepia-max
W3.CSS animatsiyalar
Yuqori
Chap
O‘ng
Zoom
W3.CSS sahifalash
Qorong‘i rejim
Qorong‘i kontent
W3.CSS rang klasslaridan qorong‘i interfeyslar yaratishda foydalanish mumkin.
W3.CSS ranglari
Red
Green
Blue
Yellow
Amber
Olive
Indigo
Lime
Light Grey
Black
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!