แนะนำ Bootstrap และวิธีการติดตั้ง Botostrap4 เพื่อนำมาใช้ในการทำโปรเจคจบ


          ปัจจุบัน CSS Frameworwk นั้นมีให้เลือกใช้มากมายอยู่หลายตัว โดยที่ CSS Framework พวกนี้จะช่วยให้เราประหยัดเวลาในการมานั่งเขียน CSS ขึ้นมาใหม่ ทำให้งานเราเสร็จไวขึ้นและยังมี Layout ที่ดูแล้วสวยงามระดับนึง โดยในบทความนี้จะแนะนำ CSS Framework ชื่อ Bootstrap เวอร์ชั่น 4 ซึ่งเป็นเวอร์ชั่นล่าสุดในปัจจุบัน และกำลังเป็นที่นิยมเป็นอย่างมาก เนื่องจากสามารถดาวน์โหลดติดตั้งง่ายหรือจะเรียกใช้ผ่านเว็บก็ได้ สำหรับมือใหม่ที่ยังไม่รู้จักเจ้า Bootstrap ไปดูกันก่อนว่า Bootstrap4 คืออะไร ?
          Bootstrap4 เป็น CSS Framework ที่ทำงานอยู่ส่วนที่ติดต่อกับผู้ใช้งานรวมกับ HTML ถูกพัฒนาขึ้นมาแบบ Flat Design รองรับการแสดงผลในรูปแบบ Responsive สามารถแสดงผลได้ทุกอุปกรณ์ไม่ว่าจะขนาดใดก็ตาม ทำให้หน้าเว็บเราแสดงผลไม่ผิดเพี้ยนโดยมีระบบ Grid เข้ามาช่วยในการวาง Layout ของหน้าจอ สอดคล้องกับยุคปัจจุบันที่เน้นในเรื่องของ  Mobile First ที่ผู้คนส่วนใหญ่หันไปใช้อุปกรณ์ Smart Device เนื่องจากพกพาง่าย ทั้งยังมีเครื่องมืออื่นๆที่ช่วยอำนวยความสะดวกสบาย ส่งผลให้เว็บไซต์ที่พัฒนาใหม่นั้นต้องรองรับการแสดงผลบน Smart Device ตามไปด้วยนั่นเองครับ


การติดตั้ง Bootstrap4
ขั้นตอนแรกให้เข้าไปที่เว็บไซต์ของ Bootstrap ที่ https://getbootstrap.com/
โดยการติดตั้ง Bootstrap จะแบ่งออกเป็น 2 วิธีดังนี้
1.ติดตั้งด้วยการเรียกใช้ผ่านหน้าเว็บ CDN
          การติดตั้งแบบนี้ง่ายที่สุดคือไม่ต้องดาวน์โหลดอะไรมาติดตั้งให้ยุ่งยาก แต่ก็มีข้อเสียอยู่อย่างหนึ่งคือเครื่องคอมพิวเตอร์ของเราต้อทำการเชื่อมต่ออินเทอร์เน็ตอยู่ตลาดเวลา

1.1 ในหน้าแรกของเว็บ https://getbootstrap.com/ ให้เราเลื่อนหน้าจอลงมาด้านล่างเราจะเจอคำว่า BootstrapCDN ดังภาพ

1.2 จากนั้นให้เราทำการ ก๊อปปี้โค้ดในส่วนของ CSS ทั้งหมด

1.3 จากนั้นให้นำมาวางระหว่างแท๊ก <head>...</head> ดังภาพ

1.4 ให้ทำการก๊อปปี้โค้ดในส่วนของ JS, Popper.js, and jQuery มาวางไว้

1.5 ให้นำมาวางไว้ในไฟล์หน้าเว็บดังภาพ

1.6 ทดสอบการทำงานของ Bootstrap4 โดยผมจะใช้ดค้ดในส่วนของ jombotron มาทดสอบนะครับตามโค้ดด้านล่าง

            

                

                    

                        

Hello, world!

                        

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

                        


                        

It uses utility classes for typography and spacing to space content out within the larger container.

                        Learn more

                      

                

            

        

ได้ผลลัพธืออกมาหน้าตาเป็นแบบนี้ครับ


2.ติดตั้งโดยการดาวน์โหลดไฟล์มาติดตั้งในโปรเจคงาน
           วิธีนี้ต้องทำการดาวน์โหลดไฟล์จากหน้าเว็บมาติดตั้งที่โฟลเดอร์โปรเจค มีข้อดีคือเครื่องคอมพิวเตอร์ที่ใช้ทดสอบไม่ต้องทำการเชื่อมต่ออินเทอร์เน็ตก็ได้

2.1 จากหน้าเว็บไซต์ https://getbootstrap.com/ ให้กดที่ปุ่ม Download ในภาพจะมุมกลางหน้าจอหรือมุมขวาบนก็ได้นะครับ

2.2 จากนั้นให้เราเลือกดาวน์โหลดที่ใต้ Compiled CSS and JS นะครับ จริงๆแล้วตัว Source files ก็ใช้ได้เหมือกนันแตกต่างกันตรงที่แบบ Complied นั้นจะมีการบีบอัดโค้ด CSS กับ JS เพื่อลดขนาดของไฟล์ทำให้เล็กลงครับ ส่วนใครอยากจะใช้แบบ Source files ก็ได้เหมือนกัน

2.3 หลังจากโหลดเสร็จแล้วเราจะได้ไฟล์สำหรับติดตั้งมาให้เราทำการแตกไฟล์ zip ออกมาจะได้โฟลเดอร์ Bootstrap ซึ่งภายในจะประกอบด้วยโฟลเดอร์ CSS กับ JS นะครับ

2.4 ให้เราก๊อปปี้โฟลเดอร์ bootstrap ไปวางไว้ในโปรเจคของเรา

2.5 จากนั้นให้เข้าไปที่เว็บไซต์ของ Jquery ที่ https://jquery.com/ แล้วกดที่ปุ่ม Download

2.6 ให้เลือกตัวที่เป็น Compressed มานะครับ จากนั้นให้กด Ctrl + S ชื่อก็ตามนั้นเลยไม่ต้องเปลี่ยนแต่ให้เลือกมาเซิฟไว้ที่พาธ Bootstrap/Js/

2.7 ให้ทำการเรียกใช้ไฟล์ดังภาพ

2.6 ทำการทดสอบการทำงานของ Bootstrap ผมใช้โค้ด Jumbotron ตัวเดียวกับด้านบน ผลปรากฏออกมาดังภาพ

ถ้าชอบฝากกดติดตามที่ทางแฟนเพจด้วยนะครับ แล้วพบกัรบทความหน้า