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.
Bab ini memperkenalkan cara menampilkan data model ke dalam bentuk formulir setelah menghasilkan formulir (biasanya digunakan untuk mengedit halaman)
Kode ini adalah sebagai berikut (alamat koneksi: https://github.com/xiexingen/boottrap-smartform/blob/master/demo/form4-initdata.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <iteme> pengikatan data </iteme> <meta name = "viewport" content = "width = device-width, skala awal = 1"> <link = "stylesheet" href = "../css/css. rel = "stylesheet" href = "../ css/site.css"> <script src = "../ lib/jQuery.js"> </script> <script src = "../ lib/bootstrap.js"> <script> <!-Metode alat-> <skrip src = "../scripts/-scrips/-scrips/-script/—jit/</script/</script/</script/</script/</script/</script —! src = "../ Scripts/plugin.js"> </cript> </head> <body> <div> <div> <label> pengikatan data </label> <vect> <button id = "btnsubmit"> Kirimkan formulir </diver> </Div> </Div> <Form Action = "#" ID = "FormContainer"> </form> </div> <div> <div> <label> PENDAHULUAN </LABEL> </DIV> <SEV> <LABEL> PENDAHULUAN </LABEL> </SEV> <SIV> <H3> Formulir Pengikatan Data </h3> <blockquote> <p> BIND JSON Format model untuk membentuk, menggunakan data yang disimulasikan di sini. Di lingkungan yang sebenarnya, ia harus berinteraksi dengan server untuk mendapatkan data. Di objek konfigurasi, diperlukan metode panggilan balik. Beberapa operasi lain dari formulir dapat dilakukan dalam metode pengembalian, seperti menambahkan verifikasi formulir dan menambahkan dukungan plug-in tanggal ==== </p> <p> Catatan: Sumber data kotak centang ada dalam formulir array </p> </lockquote> </div> <script> $ (function () {var eles = [{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{TEKST) UserName: '}, ele: {type:' text ', name:' username ', judul:' nama pengguna: ', wajib: true}}, {ele: {type:' Radio ', nam e: 'sex', judul: 'gender:', item: [{text: 'Male', value: 1}, {text: 'female', value: 2}]}}, {ele: {type: 'centang kotak', Nama: 'Plant', Judul: 'Menggunakan Platform:', Item: [{Text: 'App', Value: 'App'}, {Text: 'Web', Value: 'Web'}]}} ], [{ELE: {type: 'SELECT', NAME: 'Province', title: 'Province:', withnull: true, item: [{text: 'Guangdong', value: 'gd'}, {text: 'hunan', value: 'hn'}]}}, {ele: {{pre: {pre: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{pre type = "Radio"> '}, type:' Text ', nama:' displayName ', judul:' nama tampilan: '}}, {ele: {type:' cari ', judul:' produk ', id:' ProductName '}}], [{ele: {type:' datetime ', nama:' fromedate ', judul:' validasi: 'validasi:' validasi Periode: '}}, {ele: {type:' datetime ', nama:' todate ', judul:' ~ '},]]; // elemen bentuk tersembunyi terutama digunakan untuk mengedit. }). Render ('formContainer', function (bf) {var model = {primaryKey: 1, nama pengguna: 'xxg', seks: 1, tanaman: ['aplikasi', 'web'], provinsi: 'gd', displayname: 'test', productName: 'noteB ook ', Fromedate:' 2015-06-10 ', todate:' 2015-08-08 '}; bf.initformdata (model);}); $ ("#btnsubmit"). bind (' klik ', fungsi () {var postdata = bsform.getFormData (); peringatan ("Data ekspresi yang diperoleh adalah:"+json.stringify (postdata));})}); </script> </body> </html>Di sini, model tipe JSON dibuat menggunakan JS. Dalam pengembangan aktual, Anda akan berinteraksi dengan server untuk mendapatkan model. Model ditampilkan dalam bentuk formulir melalui metode initFormData dari plug-in form.
Rendering adalah sebagai berikut:
Data yang ditentukan ditampilkan dengan sukses dalam formulir
Catatan: Dalam hal beberapa pilihan untuk kotak centang, yang perlu dikembalikan adalah array
Di atas adalah deskripsi lengkap dari pengikatan data dari halaman pengeditan formulir Bootstrap Smart Form Series (VI) yang diperkenalkan kepada Anda oleh editor. 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!