Bootstrap คืออะไร รู้จักกับ Framework ทำเว็บไซต์ยอดนิยม
ในช่วงหลายปีที่ผ่านมามีเฟรมเวิร์คมากมายเกิดขึ้นทั้ง 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 ไฟล์หลัก
<link rel="stylesheet" href="css/bootstrap.min.css">
- JS เป็นโฟลเด้อเก็บไฟล์ Javascript ทั้งหมด วิธีใช้งานให้เรียกใช้งาน bootstrap.js เข้าไปใน html ไฟล์หลัก
<script src="js/bootstrap.min.js"></script>
- fonts เป็นโฟลเด้อเก็บ fonts ต้นแบบและ icon ต่าง ๆ ของ boostrap จะถูกเรียกใช้งานผ่าน id และ class ในไฟล์ bootstrap.css ตัวอย่างเช่น ถ้าเราต้องการใช้งานไอคอนแว่นขยาย ก็จะสามารถเรียกใช้งานผ่าน class ดังนี้
<i class="glyphicon glyphicon-zoom-in"></i>
ท่านนักพัฒนาทั้งหลายสามารถดาวน์โหลด ฺBootstrap Framework มาใช้งานแบบฟรี ๆ รวมไปถึงดูตัวอย่างการใช้งานได้ที่
http://getbootstrap.com