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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
pond
PHP Super Hero Member
PHP Super Hero Member
Posts: 570
Joined: 25/05/2016 9:44 am

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

Post by pond »

Bootstrap คืออะไร
Bootstrap คือ css สำเร็จรูป โดยการเรียกใช้งาน ให้เรียก class ที่มีอยู่ใน Bootstrap
วิธีการติดตั้งBootstrap
ให้ทำการเข้าเว็บBootstrap แล้วกดปุ่ม download
Workspace 1_116.png
Workspace 1_116.png (292.55 KiB) Viewed 999 times
แตกไฟล์แล้วจะพบ 3 ไฟล์ css fonts js ให้ทำการ copy ไปวางยังโปรเจ็คที่สร้างเอาไว้
Workspace 1_117.png
Workspace 1_117.png (27.8 KiB) Viewed 999 times
JQuery คืออะไร
JQueryคือ javascript สำเร็จรูป โดย Bootstrap จะทำงานภายใต้คำสั่งของ JQuery ด้วย
วิธีติดตั้ง JQuery
ให้เข้าเว็บ jquery.com แล้วกดที่ปุ่ม download
Workspace 1_118.png
Workspace 1_118.png (246 KiB) Viewed 999 times
เลือกเวอร์ชั่น
Workspace 1_119.png
Workspace 1_119.png (180.34 KiB) Viewed 999 times
copy code ทั้งหมด
Workspace 1_120.png
Workspace 1_120.png (528.31 KiB) Viewed 999 times
เปิด editter วาง code แล้วเปลี่ยนชื่อตาม เวอร์ชั่น save แล้วไปวางที่ โฟลเดอร์ js
Workspace 1_121.png
Workspace 1_121.png (82.47 KiB) Viewed 999 times
บรรทัดที่6 เชื่อมต่อ css ของ bootstrap
บรรทัดที่7 เชื่อมต่อ javascript ของ JQuery
บรรทัดที่8 เชื่อมต่อ javascript ของ Bootstrap
บรรทัดที่11 เรียกใช้งาน class จาก css ของ bootstrap ที่สร้างกล่องคอนเทนเนอร์
บรรทัดที่12 เรียกใช้งาน class จาก css ของ bootstrap ทำให้พื้นหลังใน div เป็นสีออกเทาๆ
Workspace 1_124.png
Workspace 1_124.png (121.01 KiB) Viewed 999 times
ผลลัพธ์
Workspace 1_125.png
Workspace 1_125.png (57.36 KiB) Viewed 999 times
สามารถอ่านความรู้ฟรีๆเกี่ยวกับ สอนCSS ได้ที่
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests