Get Adobe Flash player

การใช้งาน Bootstrap 4

การใช้งาน Bootstrap 4

BOOTSTRAP 4 VS BOOTSTRAP 3 แตกต่างกันยังไง

ก่อนอื่นเลยคนที่เคยใช้ Bootstrap 3 มาก่อนน่าจะมีพอสมควรครับ ข้อแตกต่างของ Bootstrap 4 กับ Bootstrap 3 คือ:

  • โค้ดของ Bootstrap 4 เขียนขึ้นใหม่ทั้งหมดตั้งแต่ต้น
  • Bootstrap 3 รองรับตั้งแต่ Internet Explorer 8 ส่วน Bootstrap 4 รองรับตั้งแต่ Internet Explorer 9
  • Bootstrap 3 เขียนด้วย LESS CSS ส่วน Bootstrap 4 เขียนด้วย SASS
    แต่ใครไม่ได้ใช้ LESS / SASS ก็ไม่เป็นไร เพราะเค้ามีเวอร์ชั่น CSS ธรรมดาให้ด้วย และสำหรับโปรเจคส่วนใหญ่ CSS ก็เพียงพอแล้วครับ
  • Bootstrap 4 สามารถใช้ Grid แบบ Flexbox ได้ (มีทั้งเวอร์ชั่น Flexbox และเวอร์ชั่นไม่ใช่ Flexbox) – ข้อดีของ Flexbox คือ เราสามารถทำให้คอลัมน์สูงเท่ากันอัตโนมัติได้ และสลับตำแหน่งในแต่ละหน้าจอได้ ถ้าใครสนใจกริดแบบ Flexbox แอดขอแนะนำ Bulma CSS Framework ที่เขียนถึงไปก่อนหน้านี้ด้วยครับ
  • Bootstrap 4 ขนาดไฟล์เบากว่า Bootstrap 3 เล็กน้อย
    • Bootstrap 3 ขนาดไฟล์ CSS = 121kb + JS = 37kb รวมเป็น 158kb
    • Bootstrap 4 ขนาดไฟล์ CSS = 105kb + JS = 45kb รวมเป็น 150kb
  • Bootstrap 3 เปิดตัวมานานแล้ว จะหาวิธีแก้ปัญหาต่าง ๆ ใน Google / Stackoverflow ได้ง่ายกว่า
  • Bootstrap 4 เพิ่มกริดขนาด xl และปรับความกว้างในแต่ละระดับจาก Bootstrap 3

 

การใช้งาน Bootstrap แบบไม่ต้อง Download

Bootstrap มีสิ่งที่เราเรียกว่า CDN หรือ Content Delivery Network ซึ่งมีผู้ใหญ่ใจดีโฮสต์ไฟล์ CSS และ JavaScript ของ Bootstrap ให้เราเรียกมาใช้ฟรี ๆ โดยคลิกเข้าไปที่:

เว็บไซต์ของ Bootstrap 4 

 

– โดยสามารถ Copy โค๊ดด้านบนมาวางในไฟล์ HTML ของเราได้เลยโดยใส่ไว้ภายใน tag <head>

 

– การเพิ่ม Plugin Javascript , Jquery ทำได้โดย copy โค้ดไปวางก่อนปิด tag </body>

 

การใช้งาน BootStrap แบบ Download

– คลิกที่ Download Bootstrap

– จากนั้นแตกไฟล์แล้วจะได้ โฟล์เดอร์ ดังรูปภาพ

– โดย Copy โฟล์เดอร์ทั้งสองไปวางไว้ในโฟล์เดอร์งาน Project ของเรา

 

– ภายในไฟล์ HTML นั้น Bootstrap นั้นจะเรียกใช้ HTML DOCTYPE  ซึ่งถ้าไม่มีการเรียกใช้งานและการแสดงผลจะออกมาไม่สมบูรณ์

 

 

– การเรียกใช้งานจะใช้โค้ดดังรูปภาพด้านบนซึ่งจะเรียกตามที่อยู่ของไฟล์ css ในโฟล์เดอร์

– โดยนำโค้ดมาใส่ไว้ภายใน tag <head>..</head> ดังรูปภาพ

 

Leave a Reply

Your email address will not be published. Required fields are marked *