Apa itu Bootstrap?
Bootstrap adalah kerangka kerja front-end untuk pengembangan cepat aplikasi dan situs web Web. Bootstrap didasarkan pada HTML, CSS, dan JavaScript.
Tata letak formulir dibagi menjadi dua jenis: tata letak otomatis dan tata letak yang disesuaikan:
Tata letak otomatis adalah untuk secara otomatis menggunakan raster bootstrap yang berbeda berdasarkan panjang array di item konfigurasi tingkat kedua dalam item konfigurasi. Tata letak otomatis dapat dicapai dengan mengatur autolayout ke true.
Tata letak otomatis adalah untuk menentukan kisi yang digunakan sesuai Autolayout. Dengan mengatur autolayout: '1,2,1,2,2,4', itu berarti bahwa kolom pertama dan kedua menempati 3 grid, dan kolom ketiga menyumbang 6 kisi.
Kode tata letak otomatis adalah sebagai berikut (https://github.com/xiexingen/boottrap-smartform/blob/master/demo/form2-auto-layout.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> tata letak otomatis </iteme> <tautan rel = "stylesheet" href = "../ css/bootstrap.css"> <skrip script = "../ lib/jQuery.csss"> <cript scrips = "../ lib/jQuery.csss"> <cript scrips = "../ lib/jquery.csss"> <cript scrips = "../ lib/jQuery.csss"> <cript scrips = "../ lib/jQuery. src="../lib/bootstrap.js"></script><!--Tools--><script src="../scripts/global.js"></script><!--Plug-in--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Automatic layout</label></div><div><form action = "#" id = "FormContainer"> </form> </div> <div> <label> PENDAHULUAN </LABEL> </DIV> <SEV> <LABEL> PENDAHULUAN </LABEL> </SIV> <SIV> <H3> Tata letak otomatis yang disebut secara otomatis adalah secara otomatis menggunakan raster yang berbeda sesuai dengan jumlah kelompok konfigurasi individual. Misalnya: Jumlah item dalam array adalah 2, kemudian gunakan 2, 4, 2, 4 tata letak </h3> <p> Mengandalkan gaya raster bootstrap dan hanya mendukung format 12-segmen. Jika Anda mengonfigurasi 5 item, itu tidak didukung </p> </div> </div> <script> $ (function () {var eles = [[{ele: {type: 'text', name: 'username', judul: 'nama pengguna:', wajib: true}}, {ele: {type: 'radio', name: 's ex ', title:' gender: ', item: [{text:' Male ', value: 1}, {text:' female ', value: 2}]}},], [{ELE: {type:' centang kotak ', Nama: 'Tanam', Judul: 'Menggunakan Platform: ', item: [{text:' app ', value:' app '}, {text:' web ', value:' web '}]}}, {ele: {type:' pilih ', nama:' provinsi ', judul:' provinsi: ', withnull: true, item: [{text:' goangdong ', value:' guangdong : 'Hn'}]}}], [{ele: {type: 'text', name: 'displayName', judul: 'nama tampilan:'}}, {ele: {type: 'datetime', nama: 'fromedate', title: 'valid Periode: '}}, {ele: {type:' datetime ', nama:' todate ', judul:' ~ '}]]]; // elemen bentuk tersembunyi terutama digunakan untuk mengedit, latar belakang dapat dibedakan dari var hides = [{{id: hyides, hyids, hyres, hing: hold: hy {{{{{{{hyides', HYOD: HOD: VAR BSFORM = {{{{{{{hyides '; }). Render ('FormContainer');}); </cript> </body> </html>Menjalankan rendering:
Anda dapat melihat bahwa item pertama dan 2 dalam file konfigurasi saya dilengkapi dengan 2 kolom, dan item ketiga dikonfigurasi dengan 3 kolom, sehingga item pertama dan kedua dari div.Form-group yang dihasilkan digunakan: 2,4 item ketiga digunakan: 1,3 dari antarmuka, tampilan UI sangat tidak ramah, jadi Autolayout: true umum yang digunakan dalam skeno khusus dan ketika masing-masing adegan khusus dan ketika masing-masing.
Kode tata letak khusus (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-fix-layout.html):
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> tata letak khusus </iteme> <tautan rel = "stylesheet" href = "../ css/bootstrap.css"> <!-custom site style-> <link = "csss/bootstrap.css"> <!-custom site style-> <link = "stills" ccss = "ccule" custom custom custom Site style-> <link = "csss/csss =" ccule "custom" custom "custom" .. "ccss" ccule "custom" .. "ccsss" .. "ccust" customy "custom link" csss/csss ".. src = "../ lib/jQuery.js"> </script> <script src = "../ lib/bootstrap.js"> </cript> <!-Metode Alat-> <script src = "../ skrip/global.js"> </script> <!-plugin-> <skrip src="../scripts/plugin.js"></script></head><body><div><div><label>Custom layout</label></div><div><form action="#" id="formContainer"></form></div><div><label>Introduction</label></div><div><label>Fixed layout, that is, layout according to the configured Tata letak </h3> <p> Jika Anda mengonfigurasi autolayout: 1,2 1,2 raster akan ditampilkan </p> <p> Jika Anda mengkonfigurasi autolayout: 1,2,2,4 elemen pertama akan ditata menggunakan 1,2, dan yang kedua akan menjadi tata letak menggunakan 2,4. Jika tidak ada sistem 2,4 akan secara otomatis mencari 1,2 </p> </div> <script> $ (function () {var eles = [[{ele: {type: 'text', name: 'username', judul: 'username', judul: 'nama pengguna', judul: 'nama pengguna:' diperlukan: true}}, {ele: {ty PE: 'Radio', Nama: 'Seks', Judul: 'Jenis Kelamin:', Item: [{Teks: 'Pria', Nilai: 1}, {Teks: 'Wanita', nilai: 2}]}}, {ele: {type: 'centang kotak', Nama: 'Tanam', Judul: 'Menggunakan platform: ', item: [{text:' app ', value:' app '}, {text:' web ', value:' web '}]}}, {ele: {type:' pilih ', name:' provi nce ', judul:' provinsi: ', withnull: true, item: [{text:' guangdong ', value:' gd '}, {text:' hunan ', value:' hn '}]}} ], [{ele: {type: 'text', name: 'displayName', judul: 'nama tampilan:'}}, {ele: {type: 'datetime', nama: 'fromedate', judul: 'periode validasi:'}} {eLE: {{type: 'datetime', name: 'ToDate'; untuk pengeditan.Rendering adalah sebagai berikut:
Catatan: Jika halaman memiliki 4 kolom, tetapi Autolayout yang dikonfigurasi tidak cukup, bagian berikut akan menggunakan tata letak sebelumnya, yaitu, kolom pertama digunakan sebagai kolom konfigurasi default.
Di atas adalah deskripsi lengkap dari Bootstrap Smart Form Series Practical Series (IV) Layout Layout Pendahuluan yang diperkenalkan oleh 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!