ประโยชน์และวิธีติดตั้ง Bootstrap framework และ JQuery

[pond]

Bootstrap คืออะไร
Bootstrap คือ css สำเร็จรูป โดยการเรียกใช้งาน ให้เรียก class ที่มีอยู่ใน Bootstrap
วิธีการติดตั้งBootstrap
ให้ทำการเข้าเว็บBootstrap แล้วกดปุ่ม download

Workspace 1_116.png (292.55 KiB) Viewed 1048 times

แตกไฟล์แล้วจะพบ 3 ไฟล์ css fonts js ให้ทำการ copy ไปวางยังโปรเจ็คที่สร้างเอาไว้

Workspace 1_117.png (27.8 KiB) Viewed 1048 times

JQuery คืออะไร
JQueryคือ javascript สำเร็จรูป โดย Bootstrap จะทำงานภายใต้คำสั่งของ JQuery ด้วย
วิธีติดตั้ง JQuery
ให้เข้าเว็บ jquery.com แล้วกดที่ปุ่ม download

Workspace 1_118.png (246 KiB) Viewed 1048 times

เลือกเวอร์ชั่น

Workspace 1_119.png (180.34 KiB) Viewed 1048 times

copy code ทั้งหมด

Workspace 1_120.png (528.31 KiB) Viewed 1048 times

เปิด editter วาง code แล้วเปลี่ยนชื่อตาม เวอร์ชั่น save แล้วไปวางที่ โฟลเดอร์ js

Workspace 1_121.png (82.47 KiB) Viewed 1048 times

บรรทัดที่6 เชื่อมต่อ css ของ bootstrap
บรรทัดที่7 เชื่อมต่อ javascript ของ JQuery
บรรทัดที่8 เชื่อมต่อ javascript ของ Bootstrap
บรรทัดที่11 เรียกใช้งาน class จาก css ของ bootstrap ที่สร้างกล่องคอนเทนเนอร์
บรรทัดที่12 เรียกใช้งาน class จาก css ของ bootstrap ทำให้พื้นหลังใน div เป็นสีออกเทาๆ

Workspace 1_124.png (121.01 KiB) Viewed 1048 times

ผลลัพธ์

Workspace 1_125.png (57.36 KiB) Viewed 1048 times

สามารถอ่านความรู้ฟรีๆเกี่ยวกับ สอนCSS ได้ที่