การติดตั้ง Bootstrap นั้นง่ายมาก บทความนี้เป็นบทสรุปของการศึกษาของฉันซึ่งสะดวกสำหรับการสอบถามและการเรียนรู้ในอนาคต ในเวลาเดียวกันฉันหวังว่าจะช่วยคุณ
1. ดาวน์โหลด bootstrap
คุณสามารถดาวน์โหลด Bootstrap เวอร์ชันล่าสุดได้จาก http://getbootstrap.com/ เมื่อคุณคลิกที่ลิงค์นี้คุณจะเห็นหน้าเว็บเช่นนี้:
คุณจะเห็นสองปุ่ม:
ดาวน์โหลด bootstrap: ดาวน์โหลด bootstrap คลิกปุ่มนี้และคุณสามารถดาวน์โหลด Bootstrap CSS, JavaScript และแบบอักษรที่บีบอัดได้ เอกสารและไฟล์ซอร์สโค้ดดั้งเดิมไม่รวมอยู่
ดาวน์โหลดแหล่งที่มา: ดาวน์โหลดซอร์สโค้ด คลิกปุ่มนี้และคุณสามารถรับ bootstrap ล่าสุดน้อยลงและซอร์สโค้ด JavaScript โดยตรงจากจาก
หากคุณใช้ซอร์สโค้ดที่ไม่ได้รวบรวมคุณต้องรวบรวมไฟล์ที่น้อยกว่าเพื่อสร้างไฟล์ CSS ที่ใช้ซ้ำได้ สำหรับการรวบรวมไฟล์ที่น้อยลง Bootstrap รองรับการพักผ่อนเท่านั้นซึ่งเป็นพรอมต์ CSS ที่ใช้น้อยกว่าของ Twitter
เพื่อความเข้าใจที่ดีขึ้นและใช้งานได้ง่ายขึ้นเราจะใช้ Bootstrap เวอร์ชันที่รวบรวมไว้ล่วงหน้าในบทช่วยสอนนี้
เนื่องจากไฟล์ถูกรวบรวมและบีบอัดคุณไม่จำเป็นต้องรวมไฟล์อิสระเหล่านี้ทุกครั้งในการพัฒนาการทำงานอิสระ
หมายเหตุการศึกษานี้เป็นเวอร์ชันล่าสุด (Bootstrap 3)
2. โครงสร้างไฟล์
1. bootstrap ที่คอมไพล์ล่วงหน้า
เมื่อคุณดาวน์โหลด Bootstrap และคลายซิปไฟล์ ZIP เวอร์ชันที่รวบรวมไว้คุณจะเห็นโครงสร้างไฟล์/ไดเรกทอรีต่อไปนี้:
ดังที่แสดงในภาพด้านบนคุณสามารถเห็น CSS และ JS ที่รวบรวมได้ (bootstrap.*) เช่นเดียวกับ CSS ที่บีบอัดและ JS ที่บีบอัด (bootstrap.min.*) นอกจากนี้ยังรวมถึงตัวอักษรของ glyphicons ซึ่งเป็นธีม bootstrap เสริม
2. ซอร์สโค้ด bootstrap
หากคุณดาวน์โหลดซอร์สโค้ด bootstrap โครงสร้างไฟล์จะมีลักษณะเช่นนี้:
ไฟล์ภายใต้ Less/, JS/ และ Fonts/ เป็นซอร์สโค้ดของ Bootstrap CSS, JS และ Icon Fonts ตามลำดับ
DIST/ โฟลเดอร์มีไฟล์และโฟลเดอร์ที่แสดงไว้ในส่วนดาวน์โหลดที่คอมไพล์ล่วงหน้าด้านบน
Docs-Assets/, ตัวอย่าง/, และไฟล์ *.html ทั้งหมดเป็นเอกสาร bootstrap
3. เทมเพลต HTML
เทมเพลต HTML พื้นฐานที่ใช้ bootstrap เป็นแบบนี้:
<! doctype html> <html> <head> <title> เทมเพลต bootstrap </title> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0"> <!-แนะนำ bootstrap-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "Stylesheet"> <! ไฟล์ไม่สามารถมีเอฟเฟกต์-> <!-[ถ้า lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! src = "https://code.jquery.com/jquery.js"> </script> <!-รวมปลั๊กอินที่รวบรวมทั้งหมด-> <script src = "js/bootstrap.min.js"> </script> </body> </html>
ที่นี่คุณสามารถดู jQuery.js, bootstrap.min.js และ bootstrap.min.css ไฟล์ที่ใช้เพื่อทำให้ไฟล์ HTML ปกติเป็นเทมเพลตที่ใช้ bootstrap
iv. ตัวอย่าง
ตอนนี้ลองส่งออก "สวัสดีโลก!" ใช้ bootstrap:
<! doctype html> <html> <head> <title> ลองใช้อินสแตนซ์ bootstrap ออนไลน์ </title> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3 World! </h1> </body> </html>
<!-ไฟล์ Bootstrap Core CSS ใหม่-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <! src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </script> <!-ไฟล์ jQuery อย่าลืมแนะนำ-> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> <! src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและสร้างสภาพแวดล้อมการติดตั้ง bootstrap ได้อย่างถูกต้อง