Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Poin -poin penting untuk belajar:
1. Tabel
2. Tombol
Dalam pelajaran ini, kami terutama belajar tentang tabel bootstrap dan fungsi tombol, dan menampilkan berbagai efek kaya melalui definisi CSS bawaan.
satu. lembaran
Bootstrap menyediakan beberapa gaya meja yang kaya untuk digunakan pengembang.
1. Format Dasar
// Menerapkan gaya tabel dasar <able>
Catatan: Kita dapat melihat CSS yang sesuai melalui Firebug.
2. Bentuk bergaris
// Biarkan garis di <tbody> menghasilkan satu baris demi satu dan efek latar belakang monokrom <ables>
Catatan: Efek tabel harus didasarkan pada format dasar
3. Meja dengan perbatasan
// Tambahkan perbatasan ke tabel <able>
4. Arahkan Manduk Mouse
// Biarkan tabel di bawah <tBody> mengarahkan mouse untuk mencapai efek latar belakang <able>
5. Kelas Status
// Gaya latar belakang setiap baris dapat diatur secara terpisah <tr>
Catatan: Ada lima gaya berbeda untuk dipilih.
Deskripsi Gaya:
Mouse aktif melayang di atas baris atau sel
Tanda Sukses Berhasil atau Tindakan Positif
Info menandai informasi atau tindakan cepat normal
Peringatan Logo Peringatan atau Perhatian Pengguna diperlukan
Bahaya menunjukkan tindakan negatif yang berbahaya atau potensial
6. Sembunyikan garis
// Sembunyikan garis <tr>
7. Tabel Responsif
// Ada bentuk responsif untuk elemen induk tabel, kurang dari 768px, dan perbatasan muncul <body>
dua. Tombol
Bootstrap menyediakan banyak tombol kaya untuk digunakan pengembang.
1. Label atau elemen yang dapat digunakan sebagai tombol
// Konversi ke tombol normal <a href = "###"> tautan </a> <button> </button> <input type = "tombol" value = "input">
Ada tiga hal yang perlu diperhatikan:
(1). Hal -hal yang perlu diperhatikan tentang komponen
Meskipun kelas tombol dapat diterapkan pada elemen <a> dan <button>, komponen navigasi dan bilah navigasi hanya mendukung elemen <utton>.
(2). Hal -hal yang perlu diperhatikan saat tautan digunakan sebagai tombol
Jika elemen <a> digunakan sebagai tombol - dan digunakan untuk memicu fungsi tertentu pada halaman saat ini - daripada menghubungkan halaman lain atau menghubungkan bagian lain dari halaman saat ini, pastikan untuk mengatur properti peran = "tombol" untuk itu.
(3). Tampilan lintas-browser
Praktik terbaik yang kami ringkas adalah sangat disarankan untuk menggunakan elemen <ututy> bila memungkinkan untuk mendapatkan efek gambar yang cocok pada setiap browser.
Selain itu, kami juga menemukan bug di browser di Firefox <30, yang menunjukkan bahwa itu mencegah kami dari mengatur atribut garis-tinggi untuk tombol yang dibuat berdasarkan elemen <sput>, yang menyebabkan browser Firefox tidak sepenuhnya konsisten dengan tombol lain.
2. Gaya yang telah ditentukan
// Informasi Umum <button> Tombol </button>
Deskripsi gaya
Gaya default BTN-default
Gaya BTN-Success
BTN-Info Gaya Informasi Umum
Gaya peringatan peringatan BTN
Gaya berbahaya BTN-Danger
Gaya preferensi primer BTN
Gaya tautan BTN-Link
3. Ukuran
// Ukuran dari Besar ke Kecil <button> Tombol </button> <button> </button> <button> Button </button> <button> Button </button>
4. Tombol Level Blok
// BLOCK LEVEL Break Break <TOMTON> </button> <button> Tombol </button>
5. Status Aktivasi
// Aktifkan tombol <button> </button>
6. Nonaktifkan status
// Nonaktifkan tombol <button> </button>
Di atas adalah tabel bootstrap dan fungsi tombol yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!