Container Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-kontainer | Wadah untuk konten HTML (menambahkan bantalan 16px kiri dan kanan) | Cobalah |
Digunakan dengan kelas warna | Cobalah | |
Digunakan sebagai header | Cobalah | |
Digunakan sebagai footer | Cobalah | |
Digunakan dengan w3-leftbar | Cobalah | |
Digunakan dengan w3-bottombar | Cobalah | |
w3-bagian | Wadah untuk konten HTML (menambahkan 16px margin atas dan bawah) | Cobalah |
w3-badge | Lencana melingkar 8 | Cobalah |
w3-tag | Tag persegi panjang Lebih Kemudian! | Cobalah |
w3-ul | daftar unordered | Cobalah |
w3-display-kontainer | Wadah untuk kelas w3-Tampilan- (posisi elemen di kiri atas, kanan atas, kiri bawah atau sudut kanan bawah, atau di tengah-tengah wadah) | Cobalah |
w3-gambar | Usang. Gunakan w3-display-kontainer sebagai gantinya. | Cobalah |
w3-blockquote | Dihapus di 2.0 (menggunakan w3-leftbar gantinya) | Cobalah |
w3-kode | kode wadah | Cobalah |
w3-kemajuan-kontainer | Progress bar wadah | Cobalah |
tabel Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-tabel | Kontainer untuk tabel HTML | Cobalah |
w3-bergaris | tabel bergaris | Cobalah |
w3-perbatasan | tabel berbatasan | Cobalah |
w3-berbatasan | garis berbatasan | Cobalah |
w3 berpusat | tabel berpusat | Cobalah |
w3-hoverable | tabel Hoverable | Cobalah |
w3-meja-semua | Semua properti menetapkan | Cobalah |
Dengan w3-bergaris, w3-perbatasan, dan w3-berbatasan | Cobalah | |
Dengan kepala berwarna | Cobalah | |
Dengan w3-jawab | Cobalah | |
Dengan w3-kecil | Cobalah | |
Dengan w3-kecil | Cobalah | |
Dengan w3-besar | Cobalah | |
Dengan w3-xlarge | Cobalah | |
Dengan w3-xxlarge | Cobalah | |
Dengan w3-xxxlarge | Cobalah | |
dengan warna | Cobalah | |
Dengan w3-jumbo | Cobalah |
Kelas kartu
Kelas | mendefinisikan | |
---|---|---|
w3-card | Wadah untuk setiap konten HTML (Dengan perbatasan) | Cobalah |
w3-card-2 | Wadah untuk setiap konten HTML (2px shadow border) | Cobalah |
w3-card-4 | Wadah untuk setiap konten HTML (4 piksel shadow border) | Cobalah |
w3-card-8 | Wadah untuk setiap konten HTML (8px shadow border) | Cobalah |
w3-card-12 | Wadah untuk setiap konten HTML (12px berbatasan shadow) | Cobalah |
w3-card-16 | Wadah untuk setiap konten HTML (16px berbatasan shadow) | Cobalah |
w3-card-24 | Wadah untuk setiap konten HTML (24px berbatasan shadow) | Cobalah |
Kelas responsif
Kelas | mendefinisikan | |
---|---|---|
w3-baris | Wadah untuk satu baris dari konten responsif cairan | Cobalah |
w3-baris-bantalan | Baris di mana semua kolom memiliki bantalan standar | Cobalah |
w3-konten | Wadah untuk berpusat ukuran konten tetap | Cobalah |
w3-setengah | Setengah wadah kolom (1/2) layar | Cobalah |
w3-ketiga | Ketiga wadah kolom (1/3) layar | Cobalah |
w3-twothird | Dua ketiga wadah kolom (2/3) layar | Cobalah |
w3-kuartal | Quarter wadah kolom (1/4) layar | Cobalah |
w3-threequarter | Tiga perempat wadah kolom (3/4) layar | Cobalah |
w3-col | kontainer kolom untuk setiap konten HTML | Cobalah |
l1 - L12 | ukuran responsif untuk layar besar | Cobalah |
m1 - m12 | ukuran responsif untuk layar media | Cobalah |
s1 - s12 | ukuran responsif untuk layar kecil | Cobalah |
w3-hide-kecil | Sembunyikan konten pada layar kecil (kurang dari 601px) | Cobalah |
w3-hide-menengah | Menyembunyikan konten pada layar media | Cobalah |
w3-hide-besar | Sembunyikan konten pada layar besar (lebih besar dari 992px) | Cobalah |
Kelas navigasi
Kelas | mendefinisikan | |
---|---|---|
w3-navbar | bar navigasi | Cobalah |
bar navigasi dilipat | Cobalah | |
w3-topnav | navigation bar | Cobalah |
w3-sidenav | bar navigasi samping | Cobalah |
bar navigasi samping overlay konten utama | Cobalah | |
bar navigasi samping overlay semua konten utama | Cobalah | |
bar navigasi samping menggeser konten utama ke kanan | Cobalah | |
Side bar navigasi dengan latar belakang hamparan | Cobalah | |
w3-runtuhnya | Sepenuhnya otomatis navigasi samping responsif | Cobalah |
w3-dropnav | navigasi dropdown | Cobalah |
w3-dropdown-klik | elemen dropdown diklik | Cobalah |
w3-dropdown-melayang | elemen dropdown Hoverable | Cobalah |
Unsur dropdown Hoverable (digunakan di w3-navbar) | Cobalah | |
Unsur dropdown Hoverable (digunakan di w3-sidenav) | Cobalah | |
Unsur dropdown Hoverable (digunakan di w3-topnav) | Cobalah | |
w3-akordeon | Menyembunyikan dan menampilkan konten dilipat | Cobalah |
akordeon diklik dan dropdown yang digunakan dalam w3-sidenav | Cobalah | |
w3-pagination | link pagination | Cobalah |
tombol Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-btn | tombol HTML Rectangular | Cobalah |
tombol HTML persegi panjang dengan efek riak | Cobalah | |
w3-btn-apung | tombol mengambang melingkar | Cobalah |
tombol mengambang melingkar dengan efek riak | Cobalah | |
w3-btn-kelompok | tombol dikelompokkan | Cobalah |
w3-btn-blok | tombol-lebar penuh (100%) | Cobalah |
masukan Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-bentuk | Sama seperti w3-bantalan | Cobalah |
form input sebagai kartu | Cobalah | |
w3-masukan | elemen masukan | Cobalah |
elemen masukan (label top) | Cobalah | |
elemen masukan (label bawah) | Cobalah | |
w3-kelompok | Sekelompok elemen HTML | Cobalah |
w3-label | label masukan | Cobalah |
w3-memvalidasi | Memvalidasi input (Perubahan warna ketika input tidak valid) | Cobalah |
w3-cek | input type checkbox | Cobalah |
w3-radio | input type radio | Cobalah |
w3-pilih | Masukan elemen pilih | Cobalah |
w3-bernyawa-masukan | Menjiwai lebar masukan untuk 100% | Cobalah |
modal Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-modal | kontainer modal | Cobalah |
w3-modal-konten | Unsur pop-up modal | Cobalah |
w3-tooltip | elemen tooltip | Cobalah |
w3-teks | teks tooltip | Cobalah |
inline tooltip | Cobalah |
animasi Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-bernyawa-top | Menjiwai elemen dari -300px atas ke 0px | Cobalah |
w3-bernyawa-kiri | Menjiwai sebuah elemen dari -300px kiri ke 0px | Cobalah |
w3-bernyawa-bottom | Menjiwai elemen dari -300px bawah ke 0px | Cobalah |
w3-bernyawa-benar | Menjiwai sebuah elemen dari -300px hak untuk 0px | Cobalah |
w3-bernyawa-opacity | Menjiwai opacity sebuah elemen dari 0 ke 1 | Cobalah |
w3-bernyawa-zoom | Menjiwai elemen dari 0 sampai 100% dalam ukuran | Cobalah |
w3-bernyawa-memudar | Menjiwai opacity sebuah elemen dari 0 ke 1 dan 1-0 (memudar dalam dan keluar) | Cobalah |
w3-spin | Berputar ikon 360 derajat | Cobalah |
Berputar setiap elemen 360 derajat | Cobalah | |
w3-bernyawa-masukan | Menjiwai lebar field input untuk 100% | Cobalah |
utilitas Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-kecil | Menentukan ukuran font 10 piksel | Cobalah |
w3-kecil | Menentukan ukuran font 12 piksel | Cobalah |
w3-besar | Menentukan ukuran font 20 piksel | Cobalah |
w3-xlarge | Menentukan ukuran font 24 piksel | Cobalah |
w3-xxlarge | Menentukan ukuran font 32 piksel | Cobalah |
w3-xxxlarge | Menentukan ukuran font 48 piksel | Cobalah |
w3-jumbo | Menentukan ukuran font 64 piksel | Cobalah |
w3-slim | Menentukan teks lebih ramping | Cobalah |
w3-lebar | Menentukan teks yang lebih luas | Cobalah |
w3-vertikal | Menentukan teks vertikal | Cobalah |
w3-top | konten tetap di atas halaman | Cobalah |
w3-pusat | konten berpusat | Cobalah |
w3-lingkaran | konten dilingkari | Cobalah |
w3-hide | konten tersembunyi (display: none) | Cobalah |
w3-show | Tampilkan konten (display: block) | Cobalah |
w3-show-blok | Alias w3-acara (display: block) | Cobalah |
w3-show-inline-block | Tampilkan konten sebagai inline-block (display: inline-block) | Cobalah |
w3-hide-kecil | Sembunyikan konten pada layar kecil (kurang dari 601px) | Cobalah |
w3-hide-menengah | Menyembunyikan konten pada layar media | Cobalah |
w3-hide-besar | Sembunyikan konten pada layar besar (lebih besar dari 992px) | Cobalah |
w3-kiri | konten yang disesuaikan meninggalkan | Cobalah |
w3-benar | konten yang disesuaikan benar | Cobalah |
w3-kiri-align | Meninggalkan teks selaras | Cobalah |
w3-kanan-align | teks selaras tepat | Cobalah |
w3-membenarkan | Kanan dan teks selaras kiri | Cobalah |
w3-display-kontainer | Wadah untuk w3-Tampilan- kelas (position: relative) | Cobalah |
w3-display-topleft | konten posisi di sudut kiri atas | Cobalah |
w3-display-topright | konten posisi di sudut kanan atas | Cobalah |
w3-display-bottomleft | konten posisi di sudut kiri bawah | Cobalah |
w3-display-bottomRight | konten posisi di sudut kanan bawah | Cobalah |
w3-display-tengah | konten posisi di tengah (horizontal dan vertikal) | Cobalah |
w3-display-topmiddle | konten posisi di tengah di bagian atas elemen | Cobalah |
w3-display-bottommiddle | konten posisi di tengah di bagian bawah dari elemen | Cobalah |
w3-serif | Perubahan font untuk serif | Cobalah |
w3-opacity | Menambahkan opacity ke teks | Cobalah |
Menambahkan opacity ke setiap elemen | Cobalah | |
w3-overlay | Menciptakan efek overlay | Cobalah |
w3-text-shadow | Menambahkan bayangan untuk teks | Cobalah |
Kelas warna
Kelas | mendefinisikan | |
---|---|---|
w3-red | Warna merah latar belakang | Cobalah |
w3-merah muda | Background warna pink | Cobalah |
w3-ungu | warna latar belakang ungu | Cobalah |
w3-deep-ungu | warna latar belakang yang mendalam ungu | Cobalah |
w3-indigo | warna indigo latar | Cobalah |
w3-biru | biru warna latar belakang | Cobalah |
w3-cahaya biru | Latar belakang biru muda warna | Cobalah |
w3-cyan | cyan warna latar belakang | Cobalah |
w3-aqua | warna aqua latar | Cobalah |
w3-teal | warna teal latar | Cobalah |
w3-hijau | hijau warna latar belakang | Cobalah |
w3-lampu-hijau | Latar belakang hijau terang warna | Cobalah |
w3-lime | warna lime latar | Cobalah |
w3-pasir | pasir warna latar belakang | Cobalah |
w3-khaki | warna khaki latar | Cobalah |
w3-kuning | warna latar belakang kuning | Cobalah |
w3-amber | amber warna latar belakang | Cobalah |
w3-oranye | warna oranye latar | Cobalah |
w3-dalam-oranye | Background warna oranye yang mendalam | Cobalah |
w3-biru-abu-abu | Latar belakang warna biru abu-abu | Cobalah |
w3-coklat | warna coklat latar | Cobalah |
w3-abu-abu terang | Cahaya latar belakang warna abu-abu | Cobalah |
w3-abu | Warna abu-abu latar belakang | Cobalah |
w3-abu-abu gelap | Background warna abu-abu gelap | Cobalah |
w3-hitam | Background warna hitam | Cobalah |
w3-pucat-red | Latar belakang warna merah pucat | Cobalah |
w3-pucat-kuning | warna latar belakang kuning pucat | Cobalah |
w3-hijau pucat | Warna latar belakang hijau pucat | Cobalah |
w3-pucat-biru | Latar belakang warna biru pucat | Cobalah |
w3-transparan | Transparan background-color |
Hover Kelas
Semua warna di atas juga dapat digunakan sebagai kelas melayang:
Kelas | mendefinisikan | |
---|---|---|
w3-melayang-putih | Hover warna putih | Cobalah |
w3-melayang-hitam | Hover warna hitam | Cobalah |
w3-melayang-red | Warna merah Hover | Cobalah |
w3-melayang-biru | warna biru Hover | Cobalah |
w3-melayang-hijau | warna hijau Hover | Cobalah |
w3-melayang-aqua | warna aqua Hover | Cobalah |
w3-melayang-oranye | warna oranye Hover | Cobalah |
w3-melayang-abu | Warna abu-abu Hover | Cobalah |
w3-melayang-hijau pucat | warna Hover hijau pucat | Cobalah |
w3-hover teks-red | Arahkan warna teks merah | Cobalah |
w3-hover teks-red | Arahkan teks warna biru | Cobalah |
w3-hover teks-hijau | Arahkan warna teks hijau | Cobalah |
w3-hover teks-ungu | Warna teks Hover ungu | Cobalah |
w3-melayang-border- warna | Warna perbatasan Hover | Cobalah |
w3-melayang-opacity | Menambahkan transparansi untuk sebuah elemen di hover (60% opacity) | Cobalah |
w3-melayang-shadow | Menambahkan bayangan ke elemen di hover | Cobalah |
w3-melayang-none | Menghilangkan efek melayang dari unsur | Cobalah |
Kelas putaran
Kelas | mendefinisikan | |
---|---|---|
w3-round | Elemen bulat (border-radius) 4px | Cobalah |
w3-round-kecil | Elemen bulat (border-radius) 2px | Cobalah |
w3-round-menengah | Elemen bulat (border-radius) 4px | Cobalah |
w3-round-besar | Elemen bulat (border-radius) 8px | Cobalah |
w3-round-xlarge | Elemen bulat (border-radius) 16px | Cobalah |
w3-round-xxlarge | Elemen bulat (border-radius) 32px | Cobalah |
w3-round-jumbo | Elemen bulat (border-radius) 64px | Cobalah |
Padding Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-padding-0 | Menghapus semua lapisan dari sebuah elemen | Cobalah |
w3-bantalan | Padding 8px atas dan bawah, dan 16px kiri dan kanan. | Cobalah |
w3-padding-kecil | Padding 2px atas dan bawah, dan 4px kiri dan kanan. | Cobalah |
w3-padding-kecil | Padding 4px atas dan bawah, dan 8px kiri dan kanan. | Cobalah |
w3-padding-menengah | Padding 8px atas dan bawah, dan 16px kiri dan kanan. | Cobalah |
w3-padding-besar | Padding 12px atas dan bawah, dan 24px kiri dan kanan. | Cobalah |
w3-padding-xlarge | Padding 16px atas dan bawah, dan 32px kiri dan kanan. | Cobalah |
w3-padding-xxlarge | Padding 24px atas dan bawah, dan 48px kiri dan kanan. | Cobalah |
w3-padding-jumbo | Padding 32px atas dan bawah, dan 64px kiri dan kanan. | Cobalah |
w3-padding-top | Padding atas 8px | Cobalah |
w3-padding-right | Melapisi 16px tepat | Cobalah |
w3-padding-bottom | Padding bawah 8px | Cobalah |
w3-padding-left | Padding meninggalkan 16px | Cobalah |
w3-padding-hor-4 | Padding 4px atas dan bawah | Cobalah |
w3-padding-hor-8 | Padding 8px atas dan bawah | Cobalah |
w3-padding-hor-12 | Padding 12px atas dan bawah | Cobalah |
w3-padding-hor-16 | Padding 16px atas dan bawah | Cobalah |
w3-padding-hor-24 | Padding 24px atas dan bawah | Cobalah |
w3-padding-hor-32 | Padding 32px atas dan bawah | Cobalah |
w3-padding-hor-48 | Padding 48px atas dan bawah | Cobalah |
w3-padding-hor-64 | Padding 64px atas dan bawah | Cobalah |
w3-padding-hor-128 | Padding 128px atas dan bawah | Cobalah |
w3-padding-ver-4 | Padding 4px kiri dan kanan. | Cobalah |
w3-padding-ver-8 | Padding 8px kiri dan kanan. | Cobalah |
w3-padding-ver-16 | Padding 16px kiri dan kanan. | Cobalah |
w3-padding-ver-24 | Padding 24px kiri dan kanan. | Cobalah |
w3-padding-ver-32 | Padding 32px kiri dan kanan. | Cobalah |
w3-padding-ver-48 | Padding 48px kiri dan kanan. | Cobalah |
w3-padding-ver-64 | Padding 64px kiri dan kanan. | Cobalah |
Margin Kelas
Kelas | mendefinisikan | |
---|---|---|
w3-margin-0 | Menghapus semua margin dari elemen | Cobalah |
w3-marjin | Margin 16px | Cobalah |
w3-margin-top | Margin atas 16px | Cobalah |
w3-margin-right | Margin 16px tepat | Cobalah |
w3-margin-bottom | margin bawah 16px | Cobalah |
w3-margin-left | Margin kiri 16px | Cobalah |
Kelas perbatasan
Kelas | mendefinisikan | |
---|---|---|
w3-perbatasan | Borders (atas, kanan, bawah, kiri) | Cobalah |
w3-border-top | batas atas | Cobalah |
w3-border-benar | batas kanan | Cobalah |
w3-border-bottom | bawah perbatasan | Cobalah |
w3-perbatasan-kiri | perbatasan kiri | Cobalah |
w3-border-0 | Menghapus semua perbatasan | Cobalah |
warna w3-border- | Menampilkan setiap perbatasan didefinisikan dalam warna tertentu (seperti merah, dll) | Cobalah |
w3-bottombar | Menambahkan batas bawah tebal (bar) untuk elemen | Cobalah |
w3-leftbar | Menambahkan perbatasan tebal kiri (bar) untuk elemen | Cobalah |
w3-rightbar | Menambahkan batas kanan tebal (bar) untuk elemen | Cobalah |
w3-topbar | Menambahkan perbatasan atas tebal (bar) untuk elemen | Cobalah |
w3-melayang-border- warna | Warna perbatasan Hoverable | Cobalah |