Bootstrap คืออะไร + สอนวิธีใช้แบบเข้าใจง่าย

Published in

SiamHTML

7 min readJul 14, 2013

หลายๆ คน คงเคยได้ยินมาว่า Bootstrap ช่วยให้เราเขียนเว็บได้ไวขึ้นใช่มั้ยครับ บางคนอาจจะเคยลองใช้มาบ้างแล้ว แต่ถ้าใครยังไม่เคย และอยากลองใช้ดูบ้าง วันนี้เราจะมาพูดถึงเจ้า front-end framework ตัวนี้กันครับ ทำไมทั่วโลกเค้าถึงนิยมใช้ มันมีข้อดี ข้อเสียอะไรบ้าง อ่านจบแล้วรับรองใช้เป็นแน่นอนครับ

รู้จักกับ Front-end Framework

ก่อนอื่นต้องเข้าใจก่อนครับ ว่า Bootstrap นี้มันคือ Front-end Framework ตัวหนึ่ง คำว่า front-end หมายถึง ส่วนที่แสดงผลให้ Users ทั่วไปเห็น พูดง่ายๆ ก็คือหน้าเว็บไซต์ของเรานั่นเอง ส่วนคำว่า framework นั้นจะหมายถึง สิ่งที่เข้ามาช่วยกำหนดกรอบของการทำงานให้เป็นไปในทางเดียวกันครับ ในสมัยก่อน เรายังไม่มี framework ปัญหาที่เราพบเป็นประจำในการทำงานร่วมกันก็คือ ต่างคนต่างทำ คนหนึ่งเขียนแบบหนึ่ง ส่วนอีกคนก็เขียนอีกแบบหนึ่ง พอใครจะมาแก้งานต่อ หรือพัฒนาต่อ ก็จะไม่เข้าใจกัน เพราะไม่ได้มีการกำหนดข้อตกลงกันไว้ล่วงหน้า ทำให้เสียเวลาโดยใช่เหตุ framework จะเข้ามาแก้ปัญหาตรงนี้ครับ โดยมันจะเป็นตัวกำหนดให้สมาชิกในทีมเข้าใจตรงกัน ปฏิบัติไปในแนวทางเดียวกัน สมมติ ว่าโจทย์ของเราคือการสร้างกล่องสี่เหลี่ยมสีน้ำเงินขึ้นมาสักกล่องหนึ่ง ถ้าเราใช้ framework แล้วล่ะก็ พนักงานแต่ละคนจะใช้วิธีเดียวกันในการสร้างกล่องนี้ขึ้นมา แม้ว่าพวกเค้าจะไม่ได้คุยกันเลยก็ตาม และพนักงานคนอื่นๆ ที่ไม่เคยทราบโจทย์มาก่อน ก็จะสามารถรู้ได้ทันทีว่าโค้ดที่พวกเค้าเขียนขึ้นมามันคือการสร้างกล่องสีน้ำเงิน

Bootstrap คืออะไร?

อย่างที่บอกไปนะครับว่า Bootstrap มันก็คือ Front-end Framework ตัวหนึ่ง ที่จะช่วยให้การพัฒนาเว็บไซต์ของเราเร็วขึ้น ง่ายขึ้น และเป็นระบบมากขึ้น ซึ่งคำว่า Bootstrap นี้ในภาษาอังกฤษมันมักจะหมายถึง “สิ่งที่ช่วยทำให้ง่ายขึ้น” หรือ “สิ่งที่ทำได้ด้วยตัวของมันเอง” ซึ่งในที่นี้น่าจะหมายความว่า ถ้าเราใช้ Bootstrap แล้ว เราก็ไม่จำเป็นต้องไปหาอะไรมาเพิ่มอีก

Bootstrap ให้อะไรมาบ้าง?

สิ่งที่ Bootstrap ให้มา มี 4 อย่าง ดังนี้ครับ

Scaffoldinggrid system จำนวน 12 คอลัมน์ สามารถเลือกใช้ได้ทั้งแบบ fixed และแบบ fluid
Base CSSstyle sheets สำหรับ html elements พื้นฐาน เช่น typography, tables, forms และ images
Componentsstyle sheets สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น navigation, breadcrumbs รวมไปถึง pagination
JavaScriptjQuery plugins ต่างๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip

บางคนอาจจะไม่ค่อยคุ้นกับคำว่า Scaffolding ใช่มั้ยครับ จริงๆ แล้วมันก็เป็นเหมือนโครงของหน้าเว็บครับ ในการใช้ Bootstrap เราจะต้องสร้าง layouts ขึ้นมาก่อน เราอยากได้กี่คอลัมน์ แต่ละคอลัมน์มีความกว้างแค่ไหน ข้างในคอลัมน์มีกล่องอะไรบ้าง ให้เราสร้างขึ้นมาก่อนครับ เมื่อเราได้โครงของหน้าเว็บมาแล้ว ทีนี้ก็เหลือแค่หยิบของที่ Bootstrap เตรียมให้ มาใส่ตามกล่องที่เราได้สร้างไว้ก่อนหน้านี้เท่านั้นเอง ฟังดูไม่ยากเลยใช่มั้ยล่ะครับ เราลองมา workshop กันเลยดีกว่าครับ

เตรียมพร้อมก่อนใช้ Bootstrap

ให้เราไป Download Bootstrap มาติดตั้งก่อนครับ เมื่อเราแตกไฟล์ออกมา เราจะได้ 3 folders ดังนี้ครับ

cssเก็บ style sheets ของ Bootstrap
imgเก็บ sprite image สำหรับ icons ต่างๆ
jsเก็บ jQuery plugins ต่างๆ

จากนั้นให้เราสร้างไฟล์ index.html ขึ้นมาครับ แล้วใส่โค้ด html ตามนี้

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap tutorials by Siam HTML</title>
</head>
<body>
</body>
</html>

เมื่อได้ไฟล์ index.html มาแล้ว ให้เราเพิ่ม style sheets ของ Bootstrap เข้าไปที่ <head> ครับ

<link href="css/bootstrap.min.css" rel="stylesheet">

ถ้าเราต้องการจะทำ responsive web ให้เราเพิ่ม style sheets ของ Bootstrap สำหรับ responsive เข้าไปอีกตัว แล้วกำหนดค่าของ viewport ตามโค้ดด้านล่างนี้ครับ

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">

เพื่อให้เราสามารถใช้งาน javascript ที่ Bootstrap เตรียมมาได้ ให้เรา Download jQuery มาใส่ไว้ใน folder js ของเรา แล้วใส่โค้ดด้านล่างนี้ก่อนปิด <body> ครับ

<body>
.
.
.
.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

เพียงเท่านี้ เราก็พร้อมที่จะใช้งาน Bootstrap แล้วล่ะครับ

Workshop — Scaffolding ของ Bootstrap

เริ่มด้วยการสร้าง Container

ก่อนอื่นให้เราสร้าง container ขึ้นมาก่อนครับ เจ้า container นี้ จะมีหน้าที่ “wrap(ห่อ)” เนื้อหาของเรา การสร้าง container ของ Bootstrap ให้เราใส่โค้ดแบบนี้ครับ

<body>
    <div class="container">
    ...
    </div>
</body>

เราก็จะได้ container ที่แสดงอยู่กึ่งกลางหน้าจอมาครับ ซึ่ง container นี้จะมีความกว้างอยู่ที่ 940px เมื่อได้ container มาแล้ว ทีนี้เราก็มาเริ่มสร้างกล่องเนื้อหาต่างๆ กันต่อเลยครับ

Grid System ของ Bootstrap

ปกติแล้ว grid system ที่ Bootstrap ให้มาจะเป็นแบบ 12 คอลัมน์ ครับ ซึ่งจะใช้ร่วมกับ container ที่เราเพิ่งสร้างขึ้นมานั่นเอง โดยแต่ละคอลัมน์จะมีความกว้างเท่ากันคือ 60px และจะอยู่ห่างกัน 20px จะได้ว่า (60*12) + (20*11) = 940 หรือความกว้างของ container เรานั่นเองครับ

การจะสร้าง layouts ด้วย Bootstrap ให้เราสร้าง html element ที่มี class “row” ขึ้นมาก่อนครับ ทีนี้เราจะสามารถสร้างแต่ละคอลัมน์ขึ้นมาได้ด้วยการใส่ html element ที่มี class “span*” เข้าไปข้างใน โดย * ที่อยู่ข้างหลัง span นั้นจะเป็นตัวเลขที่จะระบุว่าเราต้องการให้คอลัมน์นี้ “กาง” แค่ไหน สมมติว่าเราจะสร้าง layouts แบบ 12 คอลัมน์ ให้เราใส่โค้ดด้านล่างนี้เข้าไปที่ container ของเราครับ

12 คอลัมน์

<div class="row">
    <div class="span1">Column 1</div>
    <div class="span1">Column 2</div>
    <div class="span1">Column 3</div>
    <div class="span1">Column 4</div>
    <div class="span1">Column 5</div>
    <div class="span1">Column 6</div>
    <div class="span1">Column 7</div>
    <div class="span1">Column 8</div>
    <div class="span1">Column 9</div>
    <div class="span1">Column 10</div>
    <div class="span1">Column 11</div>
    <div class="span1">Column 12</div>
</div>

จากโค้ดด้านบน เราใส่ html elements ที่มี class ชื่อ “span1” รวมทั้งหมด 12 elements ด้วยกัน เมื่อพรีวิวดู เราจะพบว่า container ของเราถูกแบ่งออกเป็นคอลัมน์ต่างๆ ที่มีความกว้างเท่ากันทั้งหมดจำนวน 12 คอลัมน์ ด้วยกัน

2 คอลัมน์

หากเราต้องการแค่ 2 คอลัมน์ โดยเราอยากให้คอลัมน์ทางซ้ายใหญ่กว่าทางขวา เราก็เขียนแบบนี้ได้ครับ

<div class="row">
    <div class="span8">Main</div>
    <div class="span4">Sidebar</div>
</div>

จะเห็นว่าความกว้างของทั้ง 2 คอลัมน์ นี้จะเป็น 8 + 4 = 12 พอดี สาเหตุที่เราต้องกำหนดความกว้างให้รวมกันเท่ากับ 12 ก็เพราะว่า grid system ของ bootstrap นั้นเป็นแบบ 12 คอลัมน์ ครับ นั่นหมายความว่าทั้ง 2 คอลัมน์นี้จะกางเต็ม container พอดี

3 คอลัมน์

ในทำนองเดียวกัน หากเราต้องการ 3 คอลัมน์ ก็ให้เรากำหนดความกว้างรวมให้ได้เท่ากับ 12 เหมือนเดิม

<div class="row">
    <div class="span3">Secondary</div>
    <div class="span6">Primary</div>
    <div class="span3">Sidebar</div>
</div>

Offsetting columns

ในบางครั้ง เราอาจต้องการเพิ่มระยะห่างระหว่างคอลัมน์ เราสามารถทำได้ด้วยการเพิ่ม class ที่ชื่อ “offset*” เข้าไป โดย * นั้นหมายถึงจำนวนของคอลัมน์ที่จะกลายมาเป็นระยะห่าง ลองดูตัวอย่างนี้ครับ

<div class="row">
    <div class="span2">Logo</div>
    <div class="span4 offset6">Search</div>
</div>

เมื่อพรีวิวดู เราจะพบว่าทั้ง 2 คอลัมน์นี้ยังคงกางเต็ม container อยู่ เนื่องจาก 2 + 4 + 6 = 12 ครับ

Nesting columns

นอกจากนั้น เรายังสามารถสร้างคอลัมน์ซ้อนภายในคอลัมน์ได้อีกด้วยนะครับ ลองดูตัวอย่างนี้

<div class="row">
    <div class="span8">
        Main
        <div class="row">
            <div class="span2">Menu</div>
            <div class="span6">Content</div>
        </div>
    </div>
    <div class="span4">Sidebar</div>
</div>

จะเห็นว่าเราได้สร้างคอลัมน์ “span2” กับ “span6” ซ้อนข้างในคอลัมน์ “span8” ซึ่งคอลัมน์ที่อยู่ภายในทั้ง 2 คอลัมน์ จะกางเต็มคอลัมน์ข้างนอกพอดีเนื่องจาก 2 + 6 = 8

หากยังมองไม่เห็นภาพเกี่ยวกับการใช้งาน grid system ของ Bootstrap ลองดูภาพนี้ครับ

Fluid Grid System

Bootstrap ได้เตรียม fluid grid system มาให้เราด้วยครับ วิธีใช้ก็ง่ายๆ คือ ก่อนอื่นเราต้องเปลี่ยน container มาเป็นแบบ fluid ก่อน ด้วยการเปลี่ยน class จาก “container” มาเป็น “container-fluid” แบบนี้ครับ

<body>
    <div class="container-fluid">
    ...
    </div>
</body>

จากนั้นเราก็ต้องเปลี่ยน grid ของเรามาเป็นแบบ fluid เหมือนกัน ให้เราเปลี่ยน class จาก “row” มาเป็น “row-fluid” ครับ

<div class="row-fluid">
    <div class="span8">Main</div>
    <div class="span4">Sidebar</div>
</div>

เพียงเท่านี้ grid system ของเราก็จะเปลี่ยนมาใช้หน่วย percents แทนหน่วย pixels ในการกำหนดความกว้างของแต่ละคอลัมน์แล้วล่ะครับ สำหรับการใช้งาน fluid grid system นั้นจะเหมือนกับ fixed grid system แทบทุกประการครับ แต่มันจะต่างกันตรง nesting columns เท่านั้นเอง ลองมาดูตัวอย่างนี้ครับ

<div class="row-fluid">
    <div class="span8">
        <div class="row-fluid">
            <div class="span3">Menu</div>
            <div class="span9">Content</div>
        </div>
    </div>
    <div class="span4">Sidebar</div>
</div>

จะสังเกตว่าความกว้างของคอลัมน์ “Menu” กับ “Content” จะมีผลรวมเท่ากับ 3 + 9 = 12 ซึ่งก็คือ 100% นั่นเอง ไม่เหมือนกับ fixed grid system ที่ผลรวมจะต้องเท่ากับ 8

Responsive Design

ถ้าใครอยากจะทำ Responsive Web แล้วล่ะก็ Bootstrap ได้เตรียม features รองรับไว้แล้วครับ ให้เรา enable responsive features ด้วยการเพิ่มโค้ดด้านล่างนี้ไว้ที่ <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">

สไตล์ชีท “bootstrap-responsive.min.css” จะเข้ามาช่วยเราจัดการในเรื่องของ responsive แบบอัตโนมัติครับ ไม่ว่าจะเป็นขนาดของ margin และ padding รวมไปถึงการเรียงกันของ grid ที่ viewport ขนาดต่างๆ หรือถ้าเราอยากให้ html elements ซ่อน/แสดง บน devices ไหน เราก็สามารถทำได้ง่ายๆ ด้วยการเพิ่ม class ที่ Bootstrap เตรียมไว้ให้ตามตารางนี้ครับ

ClassPhones
(767px and below)Tablets
(979px to 768px)Desktops
(Default).visible-phoneVisibleHiddenHidden.visible-tabletHiddenVisibleHidden.visible-desktopHiddenHiddenVisible.hidden-phoneHiddenVisibleVisible.hidden-tabletVisibleHiddenVisible.hidden-desktopVisibleVisibleHidden
ตารางด้านบนจะแสดง class ต่างๆ ที่เอาไว้ ซ่อน/แสดง content ต่างๆ ในแต่ละ devices การใช้งานก็ง่ายๆ เพียงแค่เราเพิ่ม class เข้าไปที่ html element ที่ต้องการจะ ซ่อน/แสดง แบบนี้ครับ

<div class="row">
    <div class="span3">Secondary</div>
    <div class="span6">Primary</div>
    <div class="span3 visible-desktop">Sidebar</div>
</div>

จากตัวอย่างนี้จะได้ว่า คอลัมน์ “Sidebar” จะแสดงต่อเมื่อเป็นเคส Desktop เท่านั้น ในขณะที่คอลัมน์อื่นๆ จะแสดงในทุกๆ devices ครับ

Workshop — Base CSS ของ Bootstrap

หลังจากที่เราได้แบ่งหน้าเว็บออกเป็นส่วนๆ โดยใช้ grid system แล้ว ทีนี้ก็มาถึงขั้นตอนการนำของต่างๆ ที่ Bootstrap เตรียมไว้มาใช้งานจริงแล้วล่ะครับ สำหรับ Base CSS นั้น จะเป็นการตกแต่งสไตล์ให้กับ html elements พื้นฐาน ไม่ว่าจะเป็น typography, tables, forms, buttons, icons และ images การเรียกใช้นั้นเรียกได้ว่าง่ายเอามากๆ ลองมาดูตัวอย่างการใช้ table ใน Bootstrap กันครับ

หากเราต้องการจะใช้สไตล์สำหรับ <table> ที่ Bootstrap เตรียมไว้ให้ ให้เราเพิ่ม class “table” ไว้ที่ <table> ครับ

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

หากเรายังไม่พอใจสไตล์แบบ default ที่ Bootstrap ให้มา เราสามารถปรับแต่งเพิ่มเติมได้ด้วยการเพิ่ม optional classes ต่อเข้าไปที่ <table> ดังนี้ครับ

.table-stripedทำให้สีพื้นหลังของแต่ละแถวสลับกันไปเรื่อยๆ
.table-borderedใส่ borders และ rounded corners ให้กับ table
.table-hoverเมื่อ hover ที่ row ไหน จะไฮไลท์สีพื้นหลังที่ row นั้นๆ
.table-condensedลด padding ของแต่ละ cell ลงครึ่งหนึ่ง

เพียงเท่านี้ เราก็จะได้ตารางสวยๆ มาใช้งานแล้วล่ะครับ สำหรับรายละเอียดของ Base CSS ทั้งหมด เพื่อนๆ สามารถเข้าไปดูได้ที่ Base CSS · Bootstrap

Workshop — Components ของ Bootstrap

นอกจาก Base CSS แล้ว Bootstrap ยังได้จัดเตรียมสไตล์สำหรับสิ่งที่เราต้องใช้บ่อยๆ เช่น navigation, breadcrumbs รวมไปถึง pagination มาด้วยครับ Components จะต่างกับ Base CSS ตรงที่มันจะเป็นกลุ่มของ html elements ต่างๆ ที่มารวมตัวกันเพื่อทำหน้าที่ใดหน้าที่หนึ่งโดยเฉพาะ ส่วนวิธีใช้ก็ง่ายๆ คือให้เรา copy โค้ด html ของ Components ไปวางในตำแหน่งที่เราต้องการจะให้มันแสดงผลได้เลย ลองมาดูตัวอย่างการใช้ Components ที่มีชื่อว่า “Navs” กันครับ

สมมติเราอยากจะสร้าง navigation ขึ้นมาสักอันหนึ่ง โค้ด html ของเราจะเป็นแบบนี้ครับ

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Messages</a>
    </li>
</ul>

หากเราต้องการจะใช้สไตล์ของ navigation นี้ จาก Bootstrap ให้เราเพิ่ม class ที่ชื่อ “nav” เข้าไปที่ <ul> ครับ

<ul class="nav">
.
.
.
</ul>

ทีนี้เราต้องมาเลือกก่อนครับ ว่าเราอยากได้ Navs แบบไหน

.nav-tabsnavigation แบบ tab
.nav-pillsnavigation แบบ button
.nav-listsnavigation แบบ list

เมื่อเราเลือกได้แล้ว ให้เราเพิ่ม class ดังกล่าว เข้าไปที่ <ul> ครับ

.nav-tabs

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Messages</a>
    </li>
</ul>

.nav-pills

<ul class="nav nav-pills">
    <li class="active">
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Messages</a>
    </li>
</ul>

.nav-list

<ul class="nav nav-list">
    <li class="active">
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Messages</a>
    </li>
</ul>

จะเห็นว่าการสร้าง navigation ในแบบต่างๆ กลายเป็นเรื่องง่ายไปเลยครับเมื่อเราใช้ Bootstrap จริงๆ แล้วเรายังสามารถปรับแต่งสไตล์ให้กับ Navs ของเราได้อีกเยอะเลยล่ะครับ และยังมี Components อีกมากเลยที่เรายังไม่ได้พูดถึง เพื่อนๆ สามารถเข้าไปดูรายละเอียดเพิ่มเติมได้ที่ Components · Bootstrap

Workshop — JavaScript ของ Bootstrap

สุดท้ายเรามาดูในเรื่องของ JavaScript ที่ Bootstrap ให้มาครับ JavaScript ประกอบไปด้วย jQuery plugins ต่างๆ ที่เรามักใช้บ่อยๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip ซึ่ง plugins ทั้งหมดนี้จะถูกรวมอยู่ในในไฟล์ “bootstrap.min.js” หากเราต้องการจะใช้ JavaScript ของ Bootstrap ให้เราใส่โค้ดตามนี้ครับ

<body>
.
.
.
.
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

อย่าลืมว่าเราจะต้องใส่ jQuery เข้าไปด้วยนะครับ ไม่งั้นจะใช้งานไม่ได้ สำหรับวิธีการใช้งานนั้น จะมีอยู่ 2 วิธีด้วยกัน ได้แก่

JavaScript APIวิธีนี้จะเป็นวิธีทั่วไปที่เราใช้งาน jQuery plugins ต่างๆ
Data attributesวิธีนี้จะใช้ data attributes ต่างๆ ในการกำหนดว่าเราจะใช้ jQuery plugins ตัวไหน กับ html element อะไร โดยที่เราไม่จำเป็นต้องเขียนโค้ด javascript เลยแม้แต่บรรทัดเดียว

วิธีใช้ modal ด้วย JavaScript API

เราลองมาดูตัวอย่างการใช้งาน Modal ด้วย JavaScript API กันดีกว่าครับ ขั้นตอนแรกให้เราสร้างตัว modal ขึ้นมาก่อน ลองใส่โค้ดตามนี้ครับ

<div id="myModal" class="modal hide">
    <p>Bootstrap tutorials by Siam HTML</p>
</div>

class “modal” จะเปลี่ยนสไตล์ให้ div ของเรามีหน้าตาแบบ modal ส่วน class “hide” จะเป็นการซ่อน div นี้เอาไว้ไม่ให้แสดงผลในทีแรกครับ จากนั้นให้เราสร้าง button ขึ้นมาเพื่อใช้สำหรับ trigger ตัว modal ที่เราได้เตรียมไว้

<a href="#" class="btn">Launch modal</a>

ขั้นตอนสุดท้าย ให้เราใส่โค้ด javascript เพื่อเรียกใช้ jQuery plugin “modal” เมื่อมีการ click ที่ button นี้ครับ

$(function(){
    $('.btn').click(function(){
        $('#myModal').modal();
    });
});

ให้เราลองพรีวิวดู จะพบว่าเมื่อเรา click ที่ button นั้น modal ที่เราได้เตรียมไว้จะแสดงขึ้นมาครับ

วิธีใช้ modal ด้วย Data Attributes

หากเราไม่ชอบเขียนโค้ด javascript เราก็ยังสามารถใช้ modal ได้ด้วยการใส่ data attributes ตามนี้ครับ

data-toggleระบุรูปแบบของการ toggle
data-targetระบุ target ที่จะ toggle

ให้เราใส่ data attributes ดังกล่าว ไว้ที่ button ของเราครับ จะได้โค้ดแบบนี้

<a href="#" class="btn" data-toggle="modal" data-target="#myModal">Launch modal</a>

เพียงเท่านี้ เราก็สามารถใช้ modal ได้โดยไม่ต้องเขียนโค้ด javascript แล้วล่ะครับ สำหรับการใช้ Javascript ตัวอื่นๆ ของ Bootstrap ก็จะมีการใช้งานในทำนองเดียวกันนี้ สามารถเข้าไปดูรายละเอียดทั้งหมดได้ที่ Javascript · Bootstrap

แล้วอย่างนี้ เว็บที่ใช้ Bootstrap ก็หน้าตาเหมือนกันหมดน่ะสิ?

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

อย่าให้ Bootstrap มาปิดกั้นความคิดสร้างสรรค์ของเราครับ เวลาเราใช้ Bootstrap อย่าลืมใส่ความเป็นตัวเองเข้าไปในงานของเราด้วย ให้เราสร้างไฟล์ “theme.css” แล้วเพิ่มเข้าไปต่อท้าย style sheets ของ Bootstrap แบบนี้ครับ

<head>
    .
    .
    .
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
</head>

เวลาเราต้องการจะปรับแต่งการแสดงผลของ Bootstrap ให้เราเขียนไว้ใน “theme.css” ครับ ไฟล์นี้เอง ที่จะช่วยให้เว็บของเรา มีหน้าตาเป็นเอกลักษณ์ไม่ซ้ำใคร ผมเชื่อว่าหากเราใช้ Bootstrap ให้ถูกทางแล้วล่ะก็ สิ่งที่เราได้ออกแบบไว้จะยังคงถูกถ่ายทอดออกมาได้อย่างครบถ้วน และยังใช้เวลาน้อยลงอีกด้วย เพื่อนๆ ลองนำไปประยุกต์ใช้ดูนะครับ

Bootstrap 3 ออกแล้ว !

ล่าสุด bootstrap ได้ออกเวอร์ชั่นใหม่แล้วนะครับ ซึ่งเวอร์ชั่นนี้ได้มีการเปลี่ยนแปลงเยอะเลยทีเดียว ไม่ว่าจะเป็น default theme ที่จะเปลี่ยนมาเป็นแบบ flat design ระบบ grid แบบใหม่ รวมไปถึง components ที่มีเพิ่มเข้ามาให้ใช้งานกัน สามารถเข้าไปอ่านรายละเอียดเพิ่มเติมได้ที่ Bootstrap 3 มีอะไรใหม่บ้าง ?