Bootstrap คืออะไร
Bootstrap คือ css สำเร็จรูป โดยการเรียกใช้งาน ให้เรียก class ที่มีอยู่ใน Bootstrap
วิธีการติดตั้งBootstrap
ให้ทำการเข้าเว็บBootstrap แล้วกดปุ่ม download
- Workspace 1_116.png (292.55 KiB) Viewed 1445 times
แตกไฟล์แล้วจะพบ 3 ไฟล์ css fonts js ให้ทำการ copy ไปวางยังโปรเจ็คที่สร้างเอาไว้
- Workspace 1_117.png (27.8 KiB) Viewed 1445 times
JQuery คืออะไร
JQueryคือ javascript สำเร็จรูป โดย Bootstrap จะทำงานภายใต้คำสั่งของ JQuery ด้วย
วิธีติดตั้ง JQuery
ให้เข้าเว็บ jquery.com แล้วกดที่ปุ่ม download
- Workspace 1_118.png (246 KiB) Viewed 1445 times
เลือกเวอร์ชั่น
- Workspace 1_119.png (180.34 KiB) Viewed 1445 times
copy code ทั้งหมด
- Workspace 1_120.png (528.31 KiB) Viewed 1445 times
เปิด editter วาง code แล้วเปลี่ยนชื่อตาม เวอร์ชั่น save แล้วไปวางที่ โฟลเดอร์ js
- Workspace 1_121.png (82.47 KiB) Viewed 1445 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 1445 times
ผลลัพธ์
- Workspace 1_125.png (57.36 KiB) Viewed 1445 times
สามารถอ่านความรู้ฟรีๆเกี่ยวกับ
สอนCSS ได้ที่
[b][u][url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2448-twitter-bootstrap.html?bb_limitstart=40]Bootstrap[/url] คืออะไร[/u][/b]
Bootstrap คือ css สำเร็จรูป โดยการเรียกใช้งาน ให้เรียก class ที่มีอยู่ใน Bootstrap
[b][u]วิธีการติดตั้งBootstrap[/u][/b]
ให้ทำการเข้าเว็บBootstrap แล้วกดปุ่ม download
[attachment=7]Workspace 1_116.png[/attachment]
แตกไฟล์แล้วจะพบ 3 ไฟล์ css fonts js ให้ทำการ copy ไปวางยังโปรเจ็คที่สร้างเอาไว้
[attachment=6]Workspace 1_117.png[/attachment]
[b][u]JQuery คืออะไร[/u][/b]
JQueryคือ javascript สำเร็จรูป โดย Bootstrap จะทำงานภายใต้คำสั่งของ JQuery ด้วย
[b][u]วิธีติดตั้ง JQuery[/u][/b]
ให้เข้าเว็บ jquery.com แล้วกดที่ปุ่ม download
[attachment=5]Workspace 1_118.png[/attachment]
เลือกเวอร์ชั่น
[attachment=4]Workspace 1_119.png[/attachment]
copy code ทั้งหมด
[attachment=3]Workspace 1_120.png[/attachment]
เปิด editter วาง code แล้วเปลี่ยนชื่อตาม เวอร์ชั่น save แล้วไปวางที่ โฟลเดอร์ js
[attachment=2]Workspace 1_121.png[/attachment]
บรรทัดที่6 เชื่อมต่อ css ของ bootstrap
บรรทัดที่7 เชื่อมต่อ javascript ของ JQuery
บรรทัดที่8 เชื่อมต่อ javascript ของ Bootstrap
บรรทัดที่11 เรียกใช้งาน class จาก css ของ bootstrap ที่สร้างกล่องคอนเทนเนอร์
บรรทัดที่12 เรียกใช้งาน class จาก css ของ bootstrap ทำให้พื้นหลังใน div เป็นสีออกเทาๆ
[attachment=1]Workspace 1_124.png[/attachment]
ผลลัพธ์
[attachment=0]Workspace 1_125.png[/attachment]
สามารถอ่านความรู้ฟรีๆเกี่ยวกับ [url=https://www.mindphp.com/forums/viewforum.php?f=73]สอนCSS[/url] ได้ที่