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/form1-basic.html):
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การกำหนดค่าพื้นฐาน </title> <link rel = "stylesheet" href = "../ css/bootstrap.css"> <script src = " src = "../ lib/bootstrap.js"> </script> <!-วิธีการเครื่องมือ-> <script src = "../ scripts/global.js"> </script> <! action = "#" id = "formContainer"> </form> </div> <div> <dabled> บทนำ </label> </div> <div> <dable> บทนำ </label> </div> <div> <h3> องค์ประกอบรูปแบบที่รองรับรวมถึง: ข้อความเลือกวิทยุ eles = [{ele: {type: 'text', ชื่อ: 'ชื่อผู้ใช้', ชื่อเรื่อง: 'ชื่อผู้ใช้:'}}, [{ele: {type: 'วิทยุ', ชื่อ: 'เพศ', ชื่อ: 'เพศ:', รายการ: [text: 'male', ค่า: 1}, {text: ชื่อ: 'plant', ชื่อเรื่อง: 'แพลตฟอร์มผู้ใช้:', รายการ: [{text: 'แอพ', ค่า: 'แอป'}, {text: 'เว็บ', ค่า: 'เว็บ'}]}}, ], {ele: {type: 'select', ชื่อ: 'Province', ชื่อ: 'จังหวัด:', withnull: จริง, รายการ: [{text: 'guangdong', ค่า: 'gd'}, {text: 'hunan', ค่า: 'hn' ระยะเวลา: '}}, {ele: {type:' search ', ชื่อ:' selectName ', ชื่อ:' select: '}}, {ele: {type:' textarea ', ชื่อ:' ที่อยู่ ', ชื่อเรื่อง:' ที่อยู่: '} front: '}}, {ele: {ถัดไป: {text:' <อินพุต type = "วิทยุ" /> '}, พิมพ์:' ข้อความ ', ชื่อ:' ถัดไป ', ชื่อ:' หลังจากอยู่ข้างหลัง: '}}, {ele: {pre: {text:' ด้านหน้าและด้านหลัง: '}},]; // องค์ประกอบรูปแบบที่ซ่อนอยู่ส่วนใหญ่ใช้สำหรับการแก้ไขพื้นหลังสามารถแยกแยะได้ส่วนใหญ่เป็นส่วน JS ต่อไปนี้และแบบฟอร์มถูกสร้างขึ้นผ่านส่วนนี้ JS
รันเรนเดอร์:
รับผลลัพธ์ที่แสดงในรูป
ข้างต้นเป็นคำอธิบายเต็มรูปแบบของชุดการปฏิบัติสมาร์ทของ Bootstrap (ii) ที่ตัวแก้ไขแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!