screenshot-2016-09-26-22-41-59

bootstrap cheat sheet

Print Friendly

Bootstrap คือเครื่องมือ (ฟรี!) ที่ช่วยให้การออกแบบ web ทำได้ง่ายขึ้น มีจุดเด่นคือ responsive design ซึ่งหมายถึงการที่เนื้อหาของเว็บปรับการแสดงผลให้เหมาะสมกับขนาดของหน้าจอ เมื่อมองบน desktop ก็สวยงามไม่โหลงเหลง เมื่อมองบนโทรศัพท์ก็อ่านง่ายไม่อึดอัด

ที่มา

ขอบคุณ Mark Otto และ Jacob Thornton แห่ง Twitter ที่ให้กำเนิด Bootstrap โดยเริ่มใช้เป็นเครื่องมือภายในบริษัท ต่อมาเมื่อมีคนให้ความร่วมมือมากขึ้น เขาก็ใจกว้าง แจกของดีชิ้นนี้ให้เป็นสาธารณะสมบัติ (open source) ชาวโลกจึงได้รับประโยชน์ตั้งแต่นั้นเป็นต้นมา

ต้องขอขอบคุณน้องโอ๊ต Nuttanon Pornpipak ที่ช่วยสอน Bootstrap ให้ผู้เขียนเป็นครั้งแรก ผ่านทาง project ที่เคยทำงานร่วมกัน บทความนี้เขียนไว้เพื่อถ่ายทอดความรู้ให้ผู้อื่นต่อไป

Outline

บทความนี้ไม่ใช่แบบเรียน ไม่ใช่ตำรา และไม่ใช่ tutorial ที่สมบูรณ์ในตัวเอง แต่เป็นแหล่งรวบรวม references และ comments สั้นๆ เพื่อให้ผู้ที่ต้องการฝึกใช้ Bootstrap ด้วยตนเอง สามารถค้นหาตัวอย่างและตำราจากแหล่งอื่นๆ ได้ง่ายขึ้น

ผู้เขียนจะมอบ short examples ให้ โดยแปะ code ที่สำคัญที่สุดลงในนี้เลย และจะ link สิ่งที่สำคัญเป็นลำดับรองๆ ไปยังแหล่งข้อมูลภายนอก ตัวอย่าง code ในบทความนี้เป็น code ที่ใช้ได้จริง (มั้ง) แต่อาจไม่ถูกต้องตามทำนองคลองธรรมทุกประการ อาจมีการฉีกขนบไปบ้างเพื่อให้ได้ผลลัพธ์ที่ต้องการโดยง่าย (คือการ hack นั่นแหละ) ทั้งนี้เพื่อให้ผู้อ่านสามารถฝึกฝนเพื่อนำไปใช้งานจริงได้อย่างรวดเร็ว ดังนั้นหากมีผู้รู้ท่านอื่นท้วงติงว่าวิธีบางอย่างในที่นี้ไม่ควรทำ ด้วยเหตุผลประการใดก็ขอให้น้อมรับฟัง และถ้าจะกรุณาบอกผู้เขียนให้ทราบผ่านทาง comment ผู้เขียนก็จะน้อมรับฟังด้วยความขอบคุณ

ผู้เขียนจะไม่จำกัดขอบเขตของเนื้อหาอยู่เพียงแค่ Bootstrap แต่จะรวมไปถึงความรู้เรื่องอื่นที่เกี่ยวข้องด้วย เช่น HTML, CSS, PHP, Javascript แต่คงจะยังไม่ไปถึง MySQL

ผู้เขียนจะตั้งสมมติฐานว่าผู้อ่านมีพื้นฐานการทำเว็บมาบ้างแล้ว ในระดับที่น้อยมาก

ข้อจำกัด?

เช่นเดียวกับเครื่องมือทุกชนิน เครื่องมือชิ้นนี้ก็มีข้อจำกัด บางคนอาจวิจารณ์ว่าเว็บที่ออกแบบด้วย Boostrap มีหน้าตาคล้ายกันหมด ดูจืดชืด แต่ข้อจำกัดนี้แท้จริงแล้วกลับเป็นข้อดีทั้งต่อผู้ใช้และผู้ออกแบบเว็บ เพราะผู้ใช้สามารถทำความคุ้นเคยกับหน้าตาและ interaction ของ component ต่างๆ ได้ง่าย ส่วนผู้ออกแบบก็สามารถทำตาม pattern (กระบวนท่า) มาตรฐานเพื่อให้ได้ UI ที่ปฏิบัติงานตามที่ตนต้องการ โดยมุ่งความใส่ใจไปที่ usability และ functionality หลักๆ ของเว็บ มากกว่ารายละเอียดยิบย่อยของ UI ทำให้ออกแบบเว็บที่ตอบโจทย์ได้ในระยะเวลาอันสั้น และมีหน้าตาที่สวยงามแบบ professional พอสมควร แม้จะไม่หวือหวาอะไร

แท้จริงแล้วข้อจำกัดที่ว่านั้นหาใช่ข้อจำกัดไม่!

แม้เว็บที่ออกแบบบน Bootstrap มาตรฐานจะมีหน้าตาคล้ายกันหมด แต่เว็บที่ต้องการสร้างความแตกต่างใหักับอัตลักษณ์ของตนเอง สามารถปรับเปลี่ยนหน้าตา และเพิ่มเติมลูกเล่นบน Bootstrap ได้หลากหลายวิธี ผู้อ่านสามารถหา online course ได้ง่ายที่โฆษณาว่าสามารถสอน Bootstrap โดยที่รับรองว่าเว็บที่คุณทำออกมาจะมีหน้าตาที่ดูไม่ออกว่าทำจาก Bootrstrap ได้เลย (ต.ย. ดูจาก Lynda.com)

 

เอาไว้ข้างบน

Code ต่อไปนี้ให้เอาไว้ข้างบนสุดของไฟล์ แล้วไม่ต้องไปแตะต้องมัน

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/boostrapv3/css/bootstrap.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<script src="/lib/jquery/jquery-1.11.1.min.js"></script> 
<script src="/lib/boostrapv3/js/bootstrap.min.js"></script>

ข้อความใน list ต่อไปนี้ ไม่ต้องอ่านก็ได้

  • มันคือการ import กระบวนท่าของ Bootstrap (ซึ่งประกอบไปด้วย css style sheet และ javascript code)
  • บรรรทัด font-awesome.min.css นั้นจริงๆ ไม่เกี่ยวกับ Bootstrap แต่มันคือ Font Awesome ซึ่งเป็น icon สวยๆ ที่สมควรนำมาใช้ยิ่งนัก
  • บรรทัด jquery คือ javascript library ชื่อ jQuery ที่เรามักจะต้องใช้ (แต่จริงๆ แล้วมันไม่เกี่ยวกับ Bootstrap โดยตรง)
  • บรรทัด bootstrap.min.js คือ javascript code ของ Bootstrap ซึ่งใช้ในการทำเมนูที่ซ่อนตัวได้, tooltip และลูกเล่นต่างๆ ที่ interactive
  • การเขียน path เช่นนี้ จะใช้งานได้บน web server ของ LI/CELT เท่านั้น เพราะเราได้ลง library ต่างๆ ไว้ใน /lib เรียบร้อยแล้ว แต่ใน server เครื่องอื่นๆ ท่านอาจจะต้องเปลี่ยน path ให้เหมาะสม แล้วแต่ว่าท่านเก็บ library ไว้ที่ใด ถ้าท่านฟังแล้วงง ให้อ่านข้อต่อไป
  • library พวกนี้ท่านไม่จำเป็นต้องเก็บไว้บน server ตัวเองก็ได้ โดยสามารถกำหนดให้ client อ่านจากเว็บแจกของ อื่นๆ (Content Delivery Network: CDN) ก็ได้เช่น
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

sources: http://getbootstrap.com/getting-started/, https://www.bootstrapcdn.com/fontawesome/

เอาไว้ข้างล่าง

$( document ).ready(function() {
 $('[data-toggle="tooltip"]').tooltip(); 
});

References

  1. ตัวอย่าง html template ของ Bootstrap: http://getbootstrap.com/getting-started/#template
  2. เมนูอาหาร: http://getbootstrap.com/components/#input-groups-basic
  3. เมนู icon สวยๆ: http://fontawesome.io/icons/
  4. สร้างตาราง: http://www.tablesgenerator.com/html_tables
  5. สร้างกราฟสวยๆ ด้วย Google Charts: https://developers.google.com/chart/interactive/docs/gallery/wordtree