บทความวิกิฮาวนี้จะแนะนำวิธีการดาวน์โหลดไฟล์ Bootstrap ลงในคอมพิวเตอร์ของคุณ และเชื่อมโยงไปยังข้อความ HTML เพื่อใช้องค์ประกอบ Bootstrap ในโค้ดของคุณ เมื่อคุณดาวน์โหลดและเชื่อมโยงไฟล์ Bootstrap แล้ว คุณสามารถเริ่มใช้สไตล์ชีตและองค์ประกอบ JavaScript ทั้งหมดของ Bootstrap ในการออกแบบเว็บของคุณได้
ขั้นตอน
ขั้นตอนที่ 1. เปิดเว็บไซต์ Bootstrap ในอินเทอร์เน็ตเบราว์เซอร์ของคุณ
พิมพ์ https://getbootstrap.com ในแถบ address แล้วกด ↵ Enter หรือ ⏎ Return บนคีย์บอร์ด
ขั้นตอนที่ 2 คลิกปุ่มดาวน์โหลด
ซึ่งจะเปิดหน้า "ดาวน์โหลด"
ขั้นตอนที่ 3 คลิกปุ่มดาวน์โหลดด้านล่าง "Compiled CSS and JS
" การดำเนินการนี้จะดาวน์โหลดไฟล์ Bootstrap ทั้งหมดลงในคอมพิวเตอร์ของคุณเป็นไฟล์ ZIP
หากคุณได้รับพร้อมท์ ให้เลือกตำแหน่งบันทึกสำหรับ Bootstrap ZIP
ขั้นตอนที่ 4 แตกไฟล์จากไฟล์ ZIP
ค้นหาไฟล์ ZIP ที่คุณเพิ่งดาวน์โหลด และดับเบิลคลิกเพื่อแยกไฟล์ทั้งหมดในไฟล์นั้นไปยังโฟลเดอร์เดียวกัน
- นี่จะแยกสองโฟลเดอร์ชื่อ " css" และ " js."
- หากแอป unzipper ของคุณไม่แตกไฟล์โดยอัตโนมัติ ให้อ่านบทความนี้เพื่อดูวิธีทั้งหมดที่คุณสามารถส่งออกไฟล์ ZIP ได้
ขั้นตอนที่ 5 ย้ายโฟลเดอร์ที่แยกแล้วไปยังโฟลเดอร์เดียวกับไฟล์ HTML ของเว็บไซต์ของคุณ
เปิดโฟลเดอร์ที่มีไฟล์ HTML ทั้งหมดของเว็บไซต์ของคุณ แล้วลาก " css" และ " js" โฟลเดอร์ที่นี่เพื่อย้ายไปยังโฟลเดอร์เดียวกับเอกสารเว็บไซต์ของคุณ
ตอนนี้คุณสามารถเชื่อมโยงไฟล์กับไฟล์ HTML ของคุณ และเริ่มใช้ Bootstrap ในโค้ดของคุณ
ขั้นตอนที่ 6 คลิกขวาที่ไฟล์ HTML ที่คุณต้องการใช้กับ Bootstrap
คุณสามารถใช้ Bootstrap ในไฟล์ HTML ไฟล์เดียวหรือทั้งหมดก็ได้
ขั้นตอนที่ 7 วางเมาส์เหนือเปิดด้วยเมนูคลิกขวา
เมนูย่อยจะปรากฏขึ้นพร้อมกับแอพที่เข้ากันได้
ขั้นตอนที่ 8 เลือกโปรแกรมแก้ไขข้อความของคุณ
การดำเนินการนี้จะเปิดไฟล์ HTML ที่เลือกในโปรแกรมแก้ไขข้อความของคุณ
คุณสามารถใช้โปรแกรมแก้ไขข้อความอย่างง่ายเช่น แผ่นจดบันทึก หรือ TextEdit รวมถึงโปรแกรมแก้ไขโค้ดเฉพาะเช่น อะตอม (https://atom.io) หรือ โคดา (https://panic.com/coda)
ขั้นตอนที่ 9 เพิ่มลิงก์ Bootstrap ไปที่ส่วนหัวของไฟล์ HTML
ก่อนใช้โค้ด Bootstrap ใน HTML คุณจะต้องพิมพ์หรือวางบรรทัดด้านล่างที่ส่วนหัวของโค้ด:
หากคุณต้องการเชื่อมโยงและใช้ไฟล์อื่นๆ จากโฟลเดอร์ css และ js เพียงเพิ่มบรรทัดใหม่ในส่วนหัว และแทนที่ส่วน css/bootstrap.css และ js/bootstrap.js ด้วยชื่อของไฟล์ที่คุณต้องการ เชื่อมต่อ
ขั้นตอนที่ 10 ตรวจสอบตำแหน่งของลิงก์ Bootstrap ในโค้ด
ในส่วนหัวของ HTML ทั้งสองบรรทัดควรอยู่ระหว่างบรรทัดและบรรทัด
- เมื่อคุณเพิ่มบรรทัดเหล่านี้ในส่วนหัวแล้ว คุณสามารถเริ่มใช้องค์ประกอบ Bootstrap ในไฟล์ HTML นี้ได้
- คุณสามารถค้นหารายการองค์ประกอบ Bootstrap ทั้งหมดได้ที่ https://getbootstrap.com/docs/4.3/getting-started/introduction เพียงคลิกหมวดหมู่ใดก็ได้เช่น เค้าโครง หรือ ส่วนประกอบ ที่เมนูด้านซ้าย
- เมื่อคุณติดตั้ง Bootstrap แล้ว คุณสามารถแทรกหรือคัดลอก/วางโค้ดใดก็ได้จากที่นี่ไปยังโค้ดของคุณเอง
