Bootstrap เป็นเฟรมเวิร์กส่วนหน้ายอดนิยม พูดง่ายๆก็คือชุดเครื่องมือสำหรับ HTML, CSS และ JavaScript เราสามารถใช้ Bootstrap เพื่อสร้างเว็บไซต์หรืออินเทอร์เฟซซอฟต์แวร์ที่เรียบง่ายและสดใหม่ ด้วย bootstrap นักพัฒนาแบ็คเอนด์ไม่ต้องกังวลเกี่ยวกับการสร้างอินเทอร์เฟซส่วนหน้าอีกต่อไป
Bootstrap (1) มีส่วนประกอบของเว็บมากมายตามส่วนประกอบเหล่านี้คุณสามารถสร้างเว็บไซต์ที่สวยงามและใช้งานได้อย่างสมบูรณ์ มันมีส่วนประกอบต่อไปนี้: เมนูแบบเลื่อนลง, กลุ่มปุ่ม, เมนูแบบเลื่อนลงปุ่ม, การนำทาง, แถบนำทาง, breadcrumbs, เพจ, การเรียงพิมพ์, รูปขนาดย่อ, กล่องโต้ตอบเตือน, แถบความคืบหน้า, กล่องโต้ตอบสื่อ ฯลฯ
(2) มันมาพร้อมกับปลั๊กอิน jqery 13 ตัวซึ่งให้ชีวิตกับส่วนประกอบใน bootstrap เหล่านี้รวมถึง: กล่องโต้ตอบโหมด, แท็บ, แถบเลื่อน, กล่องป๊อปอัพ ฯลฯ
Bootstrap ได้รับการพัฒนาโดยวิศวกร Twitter ในเวลาว่าง หลังจากเปิดแหล่งข่าวในไซต์โอเพนซอร์สที่ใหญ่ที่สุดและเป็นที่นิยมมากที่สุดคือ GitHub, Xunsu กลายเป็นโครงการที่ได้รับการปรับปรุงบ่อยที่สุดในเว็บไซต์ วิศวกรจำนวนมากมีส่วนร่วมในรหัสโครงการและเว็บไซต์จำนวนมากที่สร้างขึ้นโดยใช้ bootstrap เกิดขึ้นในช่วงเวลาสั้น ๆ เหตุใดความเร็วในการพัฒนาของ bootstrap จึงน่าทึ่ง? ส่วนใหญ่เป็นเพราะคุณสมบัติที่ยอดเยี่ยมของ bootstrap:
อุปกรณ์มือถือเป็นที่ต้องการ: วางคุณสมบัติที่มุ่งเน้นไปที่มือถือก่อน
การสนับสนุนเบราว์เซอร์: เบราว์เซอร์กระแสหลักทั้งหมดรองรับ bootstrap
เริ่มต้นได้ง่าย: ตราบใดที่คุณมีพื้นฐานของ HTML และ CSS คุณสามารถเริ่มเรียนรู้ bootstrap
การออกแบบที่ตอบสนอง: CSS ที่ตอบสนองของ Bootstrap สามารถปรับให้เข้ากับเดสก์ท็อปแท็บเล็ตและโทรศัพท์มือถือ
มันมีส่วนประกอบในตัวที่มีประสิทธิภาพเพื่อการปรับแต่งได้ง่าย
มาดูหน้าง่ายที่สุดที่สร้างขึ้นด้วย bootstrap
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" edge = edge "> bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim และตอบกลับ js ie8 การสนับสนุนองค์ประกอบ html5 และการสืบค้นสื่อ-> <!-คำเตือน: ตอบกลับ src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <สคริปต์ src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> <! [endif]-> </head> <body> <div> <div> <h1> </p> </div> <div> <div> <h3> คอลัมน์ 1 </h3> <p> สิ่งที่คุณเรียนรู้ไม่เพียง แต่เทคโนโลยี แต่ยังฝัน! </p> <p> ไม่ว่าความฝันของคุณจะยอดเยี่ยมแค่ไหนมันก็ไม่สามารถทนต่อการคงอยู่ของคุณงี่เง่าได้! </p> </div> <div> <h3> คอลัมน์ 2 </h3> <p> สิ่งที่คุณเรียนรู้ไม่เพียง แต่เทคโนโลยี แต่ยังฝัน! </p> <p> ไม่ว่าความฝันของคุณจะยอดเยี่ยมแค่ไหนมันก็ไม่สามารถทนต่อการคงอยู่ของคุณงี่เง่าได้! </p> </div> <div> <h3> คอลัมน์ 3 </h3> <p> สิ่งที่คุณเรียนรู้ไม่เพียง แต่เทคโนโลยี แต่ยังฝัน! </p> <p> ไม่ว่าความฝันของคุณจะยอดเยี่ยมแค่ไหนมันก็ไม่สามารถทนต่อการคงอยู่ของคุณงี่เง่าได้! </p> </div> </div> </div> </body> </html>
ข้างต้นเป็นบทความแรกเกี่ยวกับการเรียนรู้เกี่ยวกับ bootstrap ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!