Bootstrap คืออะไร?
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าสำหรับการพัฒนาอย่างรวดเร็วของเว็บแอปพลิเคชันและเว็บไซต์ Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript
รูปแบบของแบบฟอร์มแบ่งออกเป็น สองประเภท: เลย์เอาต์อัตโนมัติและเค้าโครงที่กำหนดเอง:
เค้าโครงอัตโนมัติ คือการใช้ bootstrap rasters ที่แตกต่างกันโดยอัตโนมัติตามความยาวของอาร์เรย์ในรายการการกำหนดค่าระดับที่สองในรายการการกำหนดค่า เค้าโครงอัตโนมัติสามารถทำได้โดยการตั้งค่า autolayout เป็นจริง
เค้าโครงอัตโนมัติคือการกำหนดกริดที่ใช้ตาม Autolayout โดยการตั้งค่า autolayout: '1,2,1,2,2,4' หมายความว่าคอลัมน์แรกและที่สองครอบครอง 3 กริดและคอลัมน์ที่สามบัญชีสำหรับ 6 กริด
รหัสเลย์เอาต์อัตโนมัติ มีดังนี้ (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-auto-layout.html):
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เลย์เอาต์อัตโนมัติ </title> <link rel = "stylesheet" href = "../ css/bootstrap.css" src = "../ lib/bootstrap.js"> </script> <!-เครื่องมือ-> <script src = "../ scripts/global.js"> </script> <! action = "#" id = "formContainer"> </form> </div> <div> <dabled> บทนำ </label> </div> <div> <dlable> บทนำ </label> </div> <div> <h3> การจัดวางอัตโนมัติที่เรียกว่า: เพื่อใช้ rasters ที่แตกต่างกันโดยอัตโนมัติ ตัวอย่างเช่น: จำนวนรายการในอาร์เรย์คือ 2 จากนั้นใช้ 2, 4, 2, 4 เลย์เอาต์ </h3> <p> ขึ้นอยู่กับสไตล์ bootstrap raster และรองรับรูปแบบ 12 ส่วนเท่านั้น หากคุณกำหนดค่า 5 รายการจะไม่รองรับ </p> </div> </div> <script> $ (function () {var eles = [[{ele: {type: 'text', ชื่อ: 'username' ex ', title:' เพศ: ', รายการ: [{text:' male ', value: 1}, {text:' female ', value: 2}]}},], [{ele: {type:' ช่องทำเครื่องหมาย ', ชื่อ: 'Plant', ชื่อ: 'การใช้ แพลตฟอร์ม: ', รายการ: [{text:' app ', value:' app '}, {text:' web ', value:' web '}]}}, {ele: {type:' select ', ชื่อ:' Province ', title:' Province: ', withnull: true, รายการ: : 'hn'}]}}], [{ele: {type: 'text', ชื่อ: 'displayName', ชื่อ: 'แสดงชื่อ:'}}, {ele: {type: 'dateTime', ชื่อ: 'fromedate', ชื่อ: 'ถูกต้อง ระยะเวลา: '}}, {ele: {type:' dateTime ', ชื่อ:' todate ', ชื่อเรื่อง:' ~ '}}]]; // องค์ประกอบรูปแบบที่ซ่อนอยู่ส่วนใหญ่ใช้สำหรับการแก้ไขพื้นหลังสามารถแยกแยะได้จาก hides var = [id:' guid '} }). render ('formContainer');}); </script> </body> </html>รันเรนเดอร์:
คุณจะเห็นว่ารายการแรกและ 2 รายการในไฟล์การกำหนดค่าของฉันมี 2 คอลัมน์และรายการที่สามถูกกำหนดค่าด้วย 3 คอลัมน์ดังนั้นรายการแรกและที่สองของ Div.-Form-Group ที่สร้างขึ้นถูกใช้: 2,4 รายการที่สามถูกใช้: 1,3 จากอินเตอร์เฟส
รหัสเลย์เอาต์ที่กำหนดเอง (https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form2-fix-layout.html):
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เลย์เอาต์ที่กำหนดเอง </title> <link rel = "stylesheet" href = "../ css/bootstrap.css"> <! src = "../ lib/jQuery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <!-วิธีการเครื่องมือ-> <script src = "../ scripts/global.js"> </script> <! src = "../ scripts/plugin.js"> </script> </head> <body> <div> <darm> <dable> เค้าโครงที่กำหนดเอง </label> </div> <div> <div> <form action = "#" id = "FormContainer" เลย์เอาต์ </h3> <p> หากคุณกำหนดค่า AutoLayout: 1,2 1,2 แรสเตอร์จะแสดง </p> <p> หากคุณกำหนดค่า AutoLayout: 1,2,2,4 องค์ประกอบแรกจะถูกจัดวางโดยใช้ 1,2 และอันที่สองจะเป็นเค้าโครงโดยใช้ 2,4 หากไม่มีระบบ 2,4 จะมองหา 1,2 </p> </div> </div> <script> $ (function () {var โดยอัตโนมัติ eles = [[{ele: {type: 'text', ชื่อ: 'ชื่อผู้ใช้', ชื่อเรื่อง: 'ชื่อผู้ใช้', ชื่อเรื่อง: 'ชื่อผู้ใช้', ชื่อเรื่อง: 'ชื่อผู้ใช้:' ต้องการ: จริง}}, {ele: {ty PE: 'วิทยุ', ชื่อ: 'เพศ', ชื่อ: 'เพศ:', รายการ: [{text: 'male', ค่า: 1}, {text: 'หญิง', ค่า: 2}]}, {ele: {ประเภท: ชื่อ: 'Plant', ชื่อ: 'การใช้ แพลตฟอร์ม: ', รายการ: [{text:' app ', value:' app '}, {text:' web ', value:' web '}]}}, {ele: {type:' select ', ชื่อ:' provi nce ', title:' จังหวัด: ', withnull: จริง, รายการ: [{text:' guangdong ', ค่า:' gd '}, {text:' hunan ', ค่า:' hn '}]}} ], [{ele: {type: 'text', ชื่อ: 'displayName', ชื่อเรื่อง: 'ชื่อแสดงชื่อ:'}}, {ele: {type: 'datetime', ชื่อ: 'fromedate', ชื่อ: 'การตรวจสอบ:'}, {lele: {ประเภท: 'datetime', ชื่อ: สำหรับการแก้ไขการเรนเดอร์มีดังนี้:
หมายเหตุ: หากหน้ามี 4 คอลัมน์ แต่ AutoLayout ที่กำหนดค่าไม่เพียงพอส่วนต่อไปนี้จะใช้เลย์เอาต์ก่อนหน้านั่นคือคอลัมน์แรกจะใช้เป็นคอลัมน์การกำหนดค่าเริ่มต้น
ข้างต้นเป็นคำอธิบายแบบเต็มของชุดรูปแบบการใช้งาน Smart Form (IV) การแนะนำรูปแบบการแนะนำที่บรรณาธิการแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!