Computer2know: Bootstrap

แสดงบทความที่มีป้ายกำกับ Bootstrap แสดงบทความทั้งหมด

วันศุกร์ที่ 23 กันยายน พ.ศ. 2559

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 เตรียมไว้ให้ตามตารางนี้ครับ

Class	Phones (767px and below)	Tablets (979px to 768px)	Desktops (Default)
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

ตาราง ด้านบนจะแสดง 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>

<div class="span3">Secondary</div>

<div class="span6">Primary</div>

<div class="span3 visible-desktop">Sidebar</div>

</div>

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

วันพฤหัสบดีที่ 22 กันยายน พ.ศ. 2559

Grid System ของ Bootstrap

grid system คือ การจัด คอลัมน์ ในหน้าจอ ปกติแล้ว 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>

<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>

<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>

<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>

<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>

Main

<div class="span6">Content</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>

<body>

...

</div>

</body>

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

<div class="row-fluid">
    <div class="span8">
Main</div>
<div class="span4">
Sidebar</div>
</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>

<div class="span9">Content</div>

</div>

<div class="span4">Sidebar</div>

</div>

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

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

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

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

<body>

...

</div>

</body>

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

เตรียมพร้อมก่อนใช้ 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>

<!DOCTYPE html>

<head>

<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">

1	<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>

<body>

</body>

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

Bootstrap คืออะไร

หลายๆ คน คงเคยได้ยินมาว่า 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 อย่าง ดังนี้ครับ

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

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

Computer2know

วันศุกร์ที่ 23 กันยายน พ.ศ. 2559

Responsive Design

Responsive Design

วันพฤหัสบดีที่ 22 กันยายน พ.ศ. 2559

Grid System ของ Bootstrap

Grid System ของ Bootstrap

Fluid Grid System

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

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

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

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

Bootstrap คืออะไร

Bootstrap คืออะไร

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

Bootstrap คืออะไร?

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

Laravel

เว็บอื่นๆครับ