Bootstrap คืออะไร รู้จักกับ Framework ทำเว็บไซต์ยอดนิยม

post Image

 

ในช่วงหลายปีที่ผ่านมามีเฟรมเวิร์คมากมายเกิดขึ้นทั้ง Front-end Framework และส่วน Back-end Framework และนั่นทำให้เราเริ่ม
รู้จักเฟรมเวิร์คที่ชือว่า Bootstrap ในวงกว้าง ไม่ไช่เฉพาะกลุ่ม front-end programmer และรวมไปถึงกลุ่มลูกค้า Customer, AE
ล้วนมีคำถามหรือมีความรู้เบื้องต้น หรืออย่างน้อย ๆ ก็เคยได้ยินคำ ๆ นี้มาบ้างแล้วแทบทั้งสิ้น นั่นทำให้เฟรมเวิร์คตัวนี้น่าสนใจมากขึ้นเรื่อย ๆ

 

Bootstrap คืออะไร ?

Bootstrap คือชุดคำสั่งที่ประกอบด้วยภาษา CSS, HTML และ Javascript เป็นชุดคำสั่งที่ถูกพัฒนาขึ้นมาเพื่อกำหนดกรอบหรือ
รูปแบบการพัฒนาเว็บไซต์ในส่วนของการปฏิสัมพันธ์กับผู้ใช้งานเว็บไซต์ ( User Interface ) เราจึงสามารถเรียก Bootstrap
ว่าเป็น Front-end framework คือใช้สำหรับ พัฒนาเว็บไซต์ส่วนการแสดงผล ซึ่งแตกต่างจากภาษาประเภท Server Side Script
อย่าง PHP, Python หรือภาษาอื่น ๆ


รู้จักทีมผู้พัฒนา

Bootstrap ถูกพัฒนาขึ้นโดย Mark Otto และ Jacob Thornton ทีมพัฒนาของ Twitter Inc. ก่อนหน้านี้ใช้ชื่อว่า Twitter Blueprint
และเปิดให้นักพัฒนาสามารถนำไปใช้งานพัฒนาเว็บไซต์ได้แบบฟรี ( Open Source ) ในชื่อว่า Bootstrap Framework


จุดเด่นของของ Bootstrap Framework

มี UI เริ่มต้นแบบที่สวยงามและใช้งานง่าย
มีการปรับปรุงและพัฒนาอย่างต่อเนื่อง ปัจจุบันเป็นเวอร์ชั่น 3.3.0
เป็นที่นิยมของนักพัฒนาทั่วโลก ทำให้สามารถเรียนรู้และแก้ปัญหาได้ง่าย
โค๊ดหรือชุดคำสั่งต่าง ๆ ค่อนข้างสะอาดมีโฟลเด้อต้นแบบแค่ 3 ส่วนคือ js, css, fonts
ประหยัดเวลาในการพัฒนาเว็บไซต์และนำไปพัฒนาต่อได้ง่าย
เป็น Responsive Framework พัฒนาเว็บไซต์ที่รองรับการแสดงผลได้หลากหลาย Device


โครงสร้างไฟล์

หลังจากที่ดาวน์โหลด Boostrap framework มาแล้วเราจะได้มา 3 โฟลเด้อสำหรับใช้งานหลัก ๆ ดังนี้

CSS เป็นโฟลเด้อเก็บไฟล์ CSS ทั้งหมด วิธีใช้งานให้เรียกใช้งาน bootstrap.css เข้าไปใน html ไฟล์หลัก

1
<link rel="stylesheet" href="css/bootstrap.min.css">
JS เป็นโฟลเด้อเก็บไฟล์ Javascript ทั้งหมด วิธีใช้งานให้เรียกใช้งาน bootstrap.js เข้าไปใน html ไฟล์หลัก

1
<script src="js/bootstrap.min.js"></script>
fonts เป็นโฟลเด้อเก็บ fonts ต้นแบบและ icon ต่าง ๆ ของ boostrap จะถูกเรียกใช้งานผ่าน id และ class ในไฟล์ bootstrap.css ตัวอย่างเช่น ถ้าเราต้องการใช้งานไอคอนแว่นขยาย ก็จะสามารถเรียกใช้งานผ่าน class ดังนี้

1
<i class="glyphicon glyphicon-zoom-in"></i>
ท่านนักพัฒนาทั้งหลายสามารถดาวน์โหลด ฺBootstrap Framework มาใช้งานแบบฟรี ๆ รวมไปถึงดูตัวอย่างการใช้งานได้ที่
http://getbootstrap.com