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. Formulir
2. Gambar
Dalam pelajaran ini, kami terutama belajar tentang bentuk bootstrap dan fungsi gambar, dan menampilkan berbagai efek kaya melalui definisi CSS bawaan.
satu. Membentuk
Bootstrap menyediakan beberapa gaya bentuk yang kaya untuk digunakan pengembang.
1. Format Dasar
// Implementasikan gaya bentuk dasar <orm> <div> <label> Email </label> <input type = "email" placeholder = "Harap masukkan email Anda"> </div> <viv> <label> Kata sandi </label> <input type = "kata sandi" placeholder = "Harap masukkan kata sandi Anda"> </div> </formulir>
Catatan: Gaya yang benar hanya dapat diberikan jika jenis jenis kotak input diatur dengan benar. Kontrol kotak input yang didukung meliputi: teks, kata sandi, datetime, datetime-lokal, tanggal, bulan, waktu, minggu, nomor, email, URL, pencarian, tel, dan warna.
2. Formulir inline
// Biarkan formulir dibiarkan disejajarkan dan melayang, dan berperilaku sebagai struktur blok inline blok inline <sorm>
Catatan: Ketika kurang dari 768px, gaya eksklusif akan dipulihkan.
3. Pengelompokan formulir
// Tambahkan fragmen sebelum dan sesudah <div> <div> ￥ </div> <input type = "text"> <div> .00 </div> </div>
4. Pengaturan horizontal
// Simpan elemen dalam formulir yang diatur secara horizontal <Morm> <div> <label> Email </label> <div> <input type = "email" placeholder = "Harap masukkan email Anda"> </div> </div> </form>
Catatan: Sistem raster Col-SM digunakan di sini, dan bab-bab berikut akan fokus pada menjelaskannya, sedangkan label kontrol mewakili sinkronisasi dengan gaya elemen induk.
5. Kotak centang dan kotak radio
//Set the checkbox, on a line <div><label> <input type="checkbox">Sports</label></div><div><label> <input type="checkbox">Music</label></div> //Set the disabled checkbox <div><label> <input type="checkbox" disabled>Music</label></div> //Set the checkbox displayed inline with a line <label> <input type = "checkbox"> Sports </label> <label> <input type = "centang kotak" disabled> musik </label> // atur kotak radio <div> <label> <input type = "radio" name = "sex" disabled> pria </label> </div>
6. Daftar drop-down
// Atur daftar drop-down <dolly> <pect> 1 </pection> <pection> 2 </pection> <pection> 3 </pection> <pection> 4 </pection> <pection> 5 </pection> </ pilih>
7. Verifikasi Status
// Atur ke Status Kesalahan <SIV>
Catatan: Ada status lain sebagai berikut:
Deskripsi Gaya Status Kesalahan Hador Status Keberhasilan Had-Success Status Peringatan Peringatan // Label Sinkronisasi Sinkronisasi Status yang sesuai <LABEL> INPUT DENGAN SUCCESS </LABEL>
8. Tambahkan ikon tambahan
// Ikon Teks Built-in Di sisi kanan Kotak Teks <div> <LABEL> Email </Label> <Input type = "Email"> <span> </span> </div>
CATATAN: Selain Glyphicon-OK, ada beberapa tabel di bawah ini:
Deskripsi Gaya Glyphicon-OK Sukses Status Glyphicon-Warning-Sign Peringatan Status Glyphicon-Remove Status Kesalahan
9. Kontrol ukurannya
// dari besar hingga kecil <input type = "password"> <input type = "password"> <input type = "password">
CATATAN: Anda juga dapat mengatur elemen induk-kelompok-kelompok-LG dan Form-Group-SM untuk menyesuaikan.
dua. gambar
Bootstrap menyediakan beberapa gaya gambar yang kaya untuk digunakan pengembang.
1. Bentuk gambar
// tiga bentuk <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png"> // gambar responsif <img src = "img/pic.png">
Di atas adalah konten yang terkait dengan formulir dan gambar bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!