Apa itu Bootstrap?
Bootstrap adalah kerangka kerja front-end untuk pengembangan cepat aplikasi dan situs web Web. Bootstrap didasarkan pada HTML, CSS, dan JavaScript.
sejarah
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton dari Twitter. Bootstrap adalah produk open source yang dirilis di GitHub pada Agustus 2011.
Isi paket bootstrap
Struktur Dasar: Bootstrap menyediakan struktur dasar dengan sistem grid, gaya tautan, dan latar belakang. Ini akan dijelaskan secara rinci di bagian Struktur Dasar Bootstrap.
CSS: Bootstrap hadir dengan fitur -fitur berikut: Pengaturan CSS global, definisi gaya elemen HTML dasar, kelas yang dapat diperluas, dan sistem grid canggih. Ini akan dijelaskan secara rinci di bagian Bootstrap CSS.
Komponen: Bootstrap berisi lebih dari selusin komponen yang dapat digunakan kembali untuk membuat gambar, menu drop-down, navigasi, kotak peringatan, kotak pop-up, dan banyak lagi. Ini akan dijelaskan secara rinci di bagian Tata Letak Komponen.
Plugin Javascript: Bootstrap berisi lebih dari selusin plugin jQuery khusus. Anda dapat memasukkan semua plugin secara langsung atau satu per satu. Ini akan dijelaskan secara rinci di bagian plug-in Bootstrap.
Kustomisasi: Anda dapat menyesuaikan komponen bootstrap, lebih sedikit variabel, dan plug-in jQuery untuk mendapatkan versi Anda sendiri.
Mari kita mulai topik di bawah ini. Untuk detailnya, silakan lihat di bawah:
Kode ini adalah sebagai berikut (alamat tautan: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form1-basic.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Konfigurasi Dasar </iteme> <tautan rel = "stylesheet" href = "../ css/bootstrap.css"> <skrip src = "../ lib/jQuery.js"> <cript script> </script> <cript scrips = "../ lib/jquery.js src="../lib/bootstrap.js"></script><!--Tool Methods--><script src="../scripts/global.js"></script><!--Plug-in--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Basic configuration</label></div><div><form Action = "#" id = "FormContainer"> </form> </div> <div> <label> PENDAHULUAN </LABEL> </DIV> <SEV> <LABEL> PENDAHULUAN </LABEL> </SIV> <SIV> <H3> Elemen formulir yang didukung termasuk: Teks, Pilih, Radio, Kotak Data, DATETIME, PENGURIAN, TEXTARAE, KUSTOM </H3> </Fungsi Kustom </H3> </Kustom </Div> eles = [{ele: {type: 'text', name: 'username', title: 'username:'}}, [{ELE: {type: 'Radio', nama: 'sex', title: 'gender:', item: [{text: 'MALE', Value: 1}, {Text: 'wanita', value '{2 {2 {{Text: {{1 {{1 {{{{1 {{{1 {{{1 {{1 {{1 { Nama: 'Plant', Judul: 'Platform Pengguna:', Item: [{Text: 'App', Value: 'App'}, {Text: 'Web', Value: 'Web'}]}}, ], {ele: {type: 'pilih', nama: 'provinsi', judul: 'provinsi:', withnull: true, item: [{text: 'guangdong', value: 'gd'}, {text: 'hunan', value: 'hn'}]}}, {ele: {type: 'datime:' hn '}]}}, {ele: {{type:' datime ' Periode: '}}, {ele: {type:' Search ', nama:' selectName ', judul:' pilih: '}}, {ele: {type:' textarea ', nama:' alamat ', judul:' alamat: '}}, {eLE: {pre: {teks:' <input type = "for" (radio " front: '}}, {ele: {next: {text:' <input type = "radio" /> '}, type:' text ', name:' next ', title:' After Behind: '}}, {ele: {pre: {text:' <input type = "centang kotak" " /> '}, Next: {Teks:' $ '}, ketik:' Teks ', nama:' Pre & Next ', judul:' Fork depan dan belakang: '},]; // elemen bentuk tersembunyi terutama digunakan untuk mengedit. }). Render ('FormContainer');}); </cript> </body> </html>Ini terutama bagian JS berikut, dan bentuk formulir dihasilkan melalui bagian ini JS
Menjalankan rendering:
Dapatkan hasil yang ditunjukkan pada gambar
Di atas adalah deskripsi lengkap dari Bootstrap Smart Form Practical Series (II) yang diperkenalkan editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!