Bootstrap คืออะไร?
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าสำหรับการพัฒนาอย่างรวดเร็วของเว็บแอปพลิเคชันและเว็บไซต์ Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript
ประวัติศาสตร์
Bootstrap ได้รับการพัฒนาโดย Mark Otto และ Jacob Thornton ของ Twitter Bootstrap เป็นผลิตภัณฑ์โอเพ่นซอร์สที่วางจำหน่ายใน GitHub ในเดือนสิงหาคม 2011
เนื้อหาของแพ็คเกจ bootstrap
โครงสร้างพื้นฐาน: Bootstrap จัดเตรียมโครงสร้างพื้นฐานด้วยระบบกริดสไตล์การเชื่อมโยงและพื้นหลัง สิ่งนี้จะถูกอธิบายโดยละเอียดในส่วนโครงสร้างพื้นฐาน bootstrap
CSS: Bootstrap มาพร้อมกับคุณสมบัติดังต่อไปนี้: การตั้งค่า CSS ทั่วโลก, คำจำกัดความของรูปแบบองค์ประกอบ HTML พื้นฐาน, คลาสที่ขยายได้และระบบกริดขั้นสูง สิ่งนี้จะถูกอธิบายโดยละเอียดในส่วน Bootstrap CSS
ส่วนประกอบ: Bootstrap มีส่วนประกอบที่นำกลับมาใช้ใหม่ได้มากกว่าหนึ่งโหลสำหรับการสร้างภาพเมนูแบบเลื่อนลงการนำทางกล่องเตือนกล่องป๊อปอัพและอื่น ๆ สิ่งนี้จะถูกอธิบายโดยละเอียดในส่วนองค์ประกอบเลย์เอาต์
ปลั๊กอิน JavaScript: Bootstrap มีปลั๊กอิน jQuery ที่กำหนดเองมากกว่าหนึ่งโหล คุณสามารถรวมปลั๊กอินทั้งหมดโดยตรงหรือทีละตัว สิ่งนี้จะอธิบายอย่างละเอียดในส่วนปลั๊กอิน bootstrap
การปรับแต่ง: คุณสามารถปรับแต่งส่วนประกอบ bootstrap ตัวแปรน้อยลงและปลั๊กอิน jQuery เพื่อรับเวอร์ชันของคุณเอง
บทนี้แนะนำ วิธีการแสดงข้อมูลโมเดลลงในรูปแบบฟอร์มหลังจากสร้างแบบฟอร์ม (มักจะใช้ในการแก้ไขหน้า)
รหัสมีดังนี้ (ที่อยู่การเชื่อมต่อ: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form4-initdata.html):
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การเชื่อมโยงข้อมูล </title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "Stylesheet" href = " rel = "stylesheet" href = "../ css/site.css"> <script src = "../ lib/jQuery.js"> </script> <script src = "../ lib/bootstrap.js"> </script> <! src = "../ scripts/plugin.js"> </script> </head> <body> <div> <divel id = "formContainer"> </dorm> </div> <div> <div> <dable> บทนำ </label> </div> <divel ในสภาพแวดล้อมจริงควรโต้ตอบกับเซิร์ฟเวอร์เพื่อรับข้อมูล ในวัตถุการกำหนดค่าจำเป็นต้องใช้วิธีการโทรกลับ การดำเนินการอื่น ๆ ของแบบฟอร์มสามารถทำได้ในวิธีการส่งคืนเช่นการเพิ่มการตรวจสอบแบบฟอร์มและการเพิ่มการสนับสนุนปลั๊กอินวันที่ ==== </p> <p> หมายเหตุ: แหล่งข้อมูลของกล่องกาเครื่องหมายอยู่ในรูปแบบอาร์เรย์ </p> </blockquote> ชื่อผู้ใช้: '}, ele: {type:' text ', ชื่อ:' ชื่อผู้ใช้ ', ชื่อ:' ชื่อผู้ใช้: ', ต้องการ: true}}, {ele: {type:' Radio ', nam E: 'Sex', title: 'เพศ:', รายการ: [{text: 'male', value: 1}, {text: 'female', value: 2}]}}, {ele: {type: 'ช่องทำเครื่องหมาย', ชื่อ: 'plant', ชื่อ: 'การใช้แพลตฟอร์ม:', รายการ: [{text: 'แอพ', ค่า: 'แอป'}, {text: 'เว็บ', ค่า: 'เว็บ'}]}} ], [{ele: {type: 'select', ชื่อ: 'Province', ชื่อ: 'จังหวัด:', withnull: จริง, รายการ: [{text: 'guangdong', ค่า: 'gd'}, {text: 'hunan', ค่า: 'hn'} type = "Radio"> '}, type:' text ', ชื่อ:' displayName ', ชื่อเรื่อง:' ชื่อแสดงชื่อ: '}}, {ele: {type:' search ', title:' product ', id:' productname '}}], [{ele: {type:' dateTime ' ระยะเวลา: '}}, {ele: {type:' datetime ', ชื่อ:' todate ', ชื่อ:' ~ '},]]; // องค์ประกอบรูปแบบที่ซ่อนอยู่ส่วนใหญ่ใช้สำหรับการแก้ไข '1,3'}). render ('formContainer', ฟังก์ชัน (bf) {var model = {primarykey: 1, ชื่อผู้ใช้: 'xxg', เพศ: 1, พืช: ['แอพ', 'เว็บ'], จังหวัด: 'gd', displayName: 'test', productName: 'noteb ook ', fromedate:' 2015-06-10 ', todate:' 2015-08-08 '}; bf.initformdata (รุ่น);}); $ ("#btnsubmit"). () {var postdata = bsform.getFormData (); การแจ้งเตือน ("ข้อมูลนิพจน์ที่ได้รับคือ:"+json.stringify (postdata));})}); </script> </body> </html>ที่นี่โมเดลประเภท JSON ถูกสร้างขึ้นโดยใช้ JS ในการพัฒนาจริงคุณจะโต้ตอบกับเซิร์ฟเวอร์เพื่อรับโมเดล โมเดลจะแสดงในรูปแบบฟอร์มผ่านวิธีการเริ่มต้น Data ของปลั๊กอินแบบฟอร์ม
การเรนเดอร์มีดังนี้:
ข้อมูลที่กำหนดจะแสดงสำเร็จในแบบฟอร์ม
หมายเหตุ: ในกรณีที่มีการเลือกหลายช่องสำหรับกล่องกาเครื่องหมายสิ่งที่ต้องส่งคืนคืออาร์เรย์
ข้างต้นเป็นคำอธิบายที่สมบูรณ์ของการเชื่อมโยงข้อมูลของหน้าการแก้ไขแบบฟอร์ม Smart Form Series (VI) แบบฟอร์ม (VI) ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!