บทความที่สองเริ่มต้นด้วย bootstrap

ในบทความก่อนหน้านี้ฉันแนะนำความรู้พื้นฐานของ bootstrap ให้คุณ ต่อไปฉันจะแนะนำให้คุณรู้จักผ่านบทความนี้

เราสามารถดาวน์โหลดไฟล์ bootstrap ได้ที่ http://getbootstrap.com

คลิกที่การดาวน์โหลด bootstrap ทางด้านซ้ายเพื่อดาวน์โหลดเวอร์ชันคอมไพล์ของ CSS, JavaScript และ Font Library ของ Bootstrap คลิกแหล่งดาวน์โหลดที่อยู่ตรงกลางเพื่อดาวน์โหลด bootstrap โดยทั่วไปเราสามารถใช้ bootstrap เพื่อคลิกที่เวอร์ชันที่รวบรวมทางด้านซ้ายเพื่อดาวน์โหลด

หากดาวน์โหลดเวอร์ชันที่รวบรวมได้โครงสร้างคือ:

หากโครงสร้างซอร์สโค้ดที่ดาวน์โหลดคือ:

เนื้อหาในโฟลเดอร์ DIST นั้นเหมือนกับในเวอร์ชันที่รวบรวม

หากคุณต้องการใช้ bootstrap เฟรมเวิร์กส่วนหน้าคุณต้องตั้งค่าการจัดรูปแบบและแนะนำไฟล์บางไฟล์ นี่คือเทมเพลตพื้นฐานสำหรับการใช้ bootstrap

Bootstrap ใช้องค์ประกอบ HTML5 และคุณสมบัติ CSS เพื่อให้สิ่งเหล่านี้ทำงานได้อย่างถูกต้องคุณต้องใช้ประเภทเอกสาร HTML5 (Doctype) ดังนั้นตัวอย่างโค้ดต่อไปนี้จะรวมอยู่ที่จุดเริ่มต้นของหน้า:

เพื่อให้เบราว์เซอร์ IE6, 7, 8 (IE9 หรือต่ำกว่า) เข้ากันได้กับแท็กที่เพิ่มขึ้นใหม่ของ HTML5 สามารถแนะนำเทมเพลต bootstrap:

 <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script>

ในทำนองเดียวกันเพื่อให้เบราว์เซอร์ IE6, 7 และ 8 เข้ากันได้กับสไตล์ CSS3 ได้แนะนำรหัสต่อไปนี้

 <script src = "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> </script>

รหัสต่อไปนี้บอก IE เบราว์เซอร์ว่า IE8/9 และรุ่นใหม่กว่าจะแสดงหน้าด้วย IE เวอร์ชันสูงสุด

 <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = edge"> รหัสต่อไปนี้อนุญาตให้เบราว์เซอร์แสดงหน้าที่สอดคล้องกันในขนาดที่เหมาะสมที่สุด: <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์

ในการใช้ bootstrap เพื่อสร้างหน้าเว็บคุณต้องแนะนำไฟล์ CSS ของ Bootstrap

 <link href = "~/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel = "stylesheet"/>>>>

ในการใช้องค์ประกอบ JavaScript ใน Bootstrap คุณต้องแนะนำปลั๊กอิน JS ของ Bootstrap เนื่องจากปลั๊กอิน JS ขึ้นอยู่กับ jQuery คุณต้องแนะนำสคริปต์ jQuery ก่อน โปรดทราบว่าจำเป็นต้องวางสคริปต์ jQuery ไว้ด้านหน้าปลั๊กอิน JS ของ Bootstrap

 <script src = "~/bootstrap-3.2.0-dist/js/jQuery.min.js"> </script> <script src = "~/bootstrap-3.2.0-dist/js/bootstrap.min.js"> </script>

ข้างต้นเป็นคำอธิบายแบบเต็มของการเริ่มต้น bootstrap ครั้งที่สองที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!