เขียนเว็บให้สวยและรวดเร็วด้วย Bootstrap Framework สำหรับผู้เริ่มต้นเขียนเว็บไซต์
บทความนี้ เขียนขึ้นเพื่อที่ต้องการให้มือใหม่ผู้เริ่มหัดทำเว็บไซต์สามารถเริ่มเขียนเว็บไซต์ได้สวยและรวดเร็ว โดยไม่ต้องยุ่งยากกับการจัดหน้าให้สวยงาม และใช้เวลาที่เหลือในการพัฒนาความสามารถหลักของเว็บไซต์ โดยพึ่งพา framework ที่มีอยู่แล้วให้เกิดประโยชน์
หนึ่งในขั้นตอนการพัฒนาเว็บไซต์ก็คือการกำหนด template และ styling ของเว็บไซต์ เช่นการออกแบบ CSS การจัดหน้า การ styling components ต่างๆเช่น Input Box, Button และโครงสร้างหน้าต่างๆ ถือว่าเป็นขั้นตอนหนึ่งที่กินเวลาเป็นอย่างมาก แต่ปัจจุบันมี Tools ที่ช่วยกระบวนการนี้อยู่เป็นจำนวนมาก หนึ่งในนั้นก็คือ Bootstrap Framework ที่พัฒนาและออกแบบโดย Twitter
Bootstrap คืออะไร?
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap คือกลุ่มของโค้ด CSS และ Javascript ที่ออกแบบมาเพื่อใช้เป็นพื้นฐานของการพัฒนาส่วนติดต่อผู้ใช้บนเว็บไซต์ (Web UI) ซึ่งจะช่วยลดภาระการจัดวาง Web UI ในการพัฒนาเว็บไซต์ของเราไปได้มาก อีกทั้งยังใช้งานง่ายและสะดวกรวดเร็ว
วิธีการใช้งาน
เริ่มต้นจากการ ดาวน์โหลด Bootstrap จาก Github แล้วทำการแตกไฟล์ .zip ไว้ในโฟลเดอร์ของเว็บไซต์ หรือทำการ include ไฟล์ที่จำเป็นจาก CDN Server ดังนี้
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>ต่อจากนั้น ในทุกๆเพจที่ใช้ Bootstrap ให้ใช้ Template ดังด้านล่าง สังเกตว่า styling ของเว็บเพจที่ได้ จะดูเข้าที่เข้าทางมากขึ้น
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- PUT CONTENT HERE -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap ให้อะไรมาบ้าง?
ใน Bootstrap มีหลายสิ่งที่เราสามารถใช้ได้ อาทิเช่น
- การจัด layout หน้าแบบ Grid System โดยจะแบ่งหน้าเว็บเพจของเราออกเป็น 12 ส่วนในแนวนอน เท่ากับว่า เราอาจจะแบ่งเพจของเราออกเป็น 2 columns ในสัดส่วน 2:10 เป็นต้นโดยไม่ต้องใช้ <table> และตั้งความกว้างเอง ถ้านึกภาพไม่ออก ให้ดูตัวอย่างการใช้ Grid System ครับ
- รูปไอคอนต่างๆ สามารถนำมาใช้ในปุ่มได้ เช่นปุ่มเพิ่ม, บันทึก, ลบ เป็นต้น
รูปไอคอน (เรียกว่า Glyph) ต่างๆที่มีให้เลือกมากมายตามแต่สถานการณ์
- Form Inputs ต่างๆ เช่นช่องกรอกข้อความ ปุ่ม Dropdown Check Box, Radio Button ซึ่ง Bootstrap ได้ทำออกมาสวยงามและจัดไว้อย่างเหมาะสมแล้ว
ตัวอย่างของปุ่มรูปแบบต่างๆของ Bootstrap
- Navigation Bar สำหรับแสดงลิงค์ไปหน้าต่างๆ
- Alert Box ที่ทำงานด้วย Javascript ทำให้เราไม่จำเป็นต้องเขียน Javascript เอง และมี script เพื่อการใช้งานอื่นๆอีกมากมาย
ตัวอย่าง Alert Box ของ Bootstrap
- CSS Styles ต่างๆ เช่นสไตล์ของตัวอักษรประเภทต่างๆ (Typography) เช่น <h1> <p> เป็นต้น ไปจนถึงสไตล์สำหรับตาราง <table> รูป <img> โดยเพียงแค่ใส่ class ลงไป
ตัวอย่างการจัดรูปแบบของ
ให้สวยงาม โดยสามารถจัดให้มีกรอบ มีขอบมน และกรอบกลม
จริงๆแล้ว ยังมีอีกมากมายที่ Bootstrap มีไว้ให้ใช้งาน ซึ่งสามารถอ่านเพิ่มเติมได้ที่เว็บไซต์ของ Bootstrap และ ตัวอย่างการใช้งานจริงของ Bootstrap