การเพิ่ม jQuery และ Bootstrap เพื่อเขียนเว็บแอปพลิเคชันที่เหมาะกับมือถือและตอบสนอง


ในส่วนที่ 1 ของชุดนี้เราได้สร้างโปรเจ็กต์ HTML 5 พื้นฐานโดยใช้ Netbeans เป็น IDE ของเราและเรายังนำเสนอองค์ประกอบบางอย่างที่เพิ่มเข้ามาในข้อกำหนดใหม่ของภาษานี้

พูดไม่กี่คำคุณอาจคิดว่า jQuery เป็นไลบรารี Javascript แบบข้ามเบราว์เซอร์และข้ามแพลตฟอร์มที่สามารถลดความซับซ้อนของการเขียนสคริปต์ฝั่งไคลเอ็นต์ในหน้า HTML ได้อย่างมาก ในทางกลับกัน Bootstrap สามารถอธิบายได้ว่าเป็นเฟรมเวิร์กที่สมบูรณ์ซึ่งรวมเครื่องมือ HTML, CSS และ Javascript เพื่อสร้างหน้าเว็บที่เหมาะกับอุปกรณ์เคลื่อนที่และตอบสนอง

ในบทความนี้เราจะแนะนำให้คุณรู้จักกับ jQuery และ Bootstrap ซึ่งเป็นยูทิลิตี้ล้ำค่าสองรายการเพื่อเขียนโค้ด HTML 5 ได้ง่ายขึ้น ทั้ง jQuery และ Bootstrap ได้รับอนุญาตภายใต้ใบอนุญาต MIT และ Apache 2.0 ซึ่งเข้ากันได้กับ GPL และเป็นซอฟต์แวร์ฟรี

โปรดทราบว่าแนวคิดพื้นฐานของ HTML, CSS และ Javascript ไม่ได้กล่าวถึงในบทความใด ๆ ในชุดนี้ หากคุณรู้สึกว่าต้องเร่งความเร็วกับหัวข้อนี้ก่อนที่จะดำเนินการต่อขอแนะนำให้ใช้บทช่วยสอน HTML 5 ใน W3Schools

รวม jQuery และ Bootstrap ไว้ในโครงการของเรา

หากต้องการดาวน์โหลด jQuery ให้ไปที่เว็บไซต์ของโครงการที่ http://jquery.com แล้วคลิกปุ่มที่แสดงข้อความแจ้งสำหรับเวอร์ชันเสถียรล่าสุด

ในขณะที่เขียนนี้เป็น v1.11.3 สำหรับความเข้ากันได้กับเบราว์เซอร์เต็มรูปแบบ (รวมถึง Internet Explorer เวอร์ชัน 6, 7 และ 8) หรือ v2.1.4 หากคุณแน่ใจว่าผู้เยี่ยมชมของคุณจะไม่ใช้ IE เวอร์ชันเหล่านั้น

เราจะไปกับตัวเลือกที่สองนี้ในคู่มือนี้ อย่าคลิกที่ลิงค์ดาวน์โหลด (ภาพประกอบต่อไปนี้มีไว้เพื่อระบุว่าตัวเลือกใดเป็นตัวเลือกที่เหมาะสมเท่านั้น)

คุณจะสังเกตเห็นว่าคุณสามารถดาวน์โหลด jQuery เวอร์ชันบีบอัด .min.js หรือ .js ที่ไม่มีการบีบอัด ประการแรกมีไว้สำหรับเว็บไซต์โดยเฉพาะและช่วยลดเวลาในการโหลดหน้าเว็บ (ดังนั้น Google จะจัดอันดับเว็บไซต์ของคุณให้ดีขึ้น) ในขณะที่อย่างที่สองมีเป้าหมายที่ coders เพื่อจุดประสงค์ในการพัฒนาเป็นส่วนใหญ่

เพื่อความกะทัดรัดและความสะดวกในการใช้งานเราจะดาวน์โหลดเวอร์ชันบีบอัด (หรือที่เรียกว่าย่อขนาด) ลงในโฟลเดอร์สคริปต์ภายในโครงสร้างไซต์ของเรา

คลิกขวาที่ลิงก์สำหรับเวอร์ชันบีบอัดเวอร์ชันที่ใช้งานจริงและเลือกบันทึกลิงก์เป็น ... จากนั้นไปที่ไดเร็กทอรีที่ระบุ (คุณอาจต้องการอ้างถึงเส้นทางที่ระบุว่าเราเลือกบันทึกโครงการของเราไว้ที่ใดในส่วนที่ 1)

สุดท้ายคลิกบันทึกที่ด้านล่างของกล่องโต้ตอบปัจจุบัน:

ตอนนี้ได้เวลาเพิ่ม Bootstrap ในโครงการของเราแล้ว ไปที่ http://getbootstrap.com และคลิกที่ดาวน์โหลด Bootstrap ในหน้าถัดไปให้คลิกตัวเลือกที่ไฮไลต์ตามที่ระบุไว้ด้านล่างเพื่อดาวน์โหลดส่วนประกอบที่ย่อขนาดพร้อมใช้งานในไฟล์ zip:

เมื่อการดาวน์โหลดเสร็จสิ้นให้ไปที่โฟลเดอร์ดาวน์โหลดของคุณคลายซิปไฟล์และคัดลอกไฟล์ที่ไฮไลต์ไปยังไดเร็กทอรีที่ระบุภายในโปรเจ็กต์ของคุณ:

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist
# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

หากคุณขยายโครงสร้างของเว็บไซต์ใน Netbeans แล้วควรมีลักษณะดังนี้: