Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io

Beginner to Professional
คอร์สสอนการพัฒนาเว็บไซต์ด้วย Bootstrap 3 CSS Framework
Bootstrap 3
Bootstrap 3 for Beginner to Professional | By Thapwaris Chinsirirathkul

พื้นฐานก่อนเรียน
รู้จัก หรือ เคยใช้งานภาษา Html / Html5
รู้จัก หรือ เคยใช้งานภาษา Css / Css 3
รู้จัก หรือ เคยใช้งานภาษา JavaScript และ Jquery

Introduction to Bootstrap 3
Bootstrap คือ CSS Framework ซึ่งเป็นที่นิยมทั่วโลกเนื่องจากการใช้งานที่ง่าย สวยงาม สะดวก
และ รวดเร็วและปัจจุบัน Bootstrap ได้พัฒนามาถึงเวอร์ชั่นที่ 3 แล้ว โดยมีสโลแกนการทางานคือ Mobile First
ซึ่งสามารถรองรับการทางานได้ทุก Smart Device

Introduction to Responsive Website
ปัจจุบัน เราไม่ได้เข้าชมเว็บไซต์จาก PC หรือ Laptop เพียงเท่านี้ แต่เราสามารถเข้าจากหลายๆ
เครื่องมือ หรือที่เรามักเรียกกันว่า Smart Device แต่จะพบปัญหาว่าเว็บไซต์ทั่วไปแล้วถ้าหากเปิดในหน้าจอที่เล็ก
กว่า จะทาให้ผู้ใช้งานรับชมได้ลาบาก จึงได้มีการพัฒนาเว็บไซต์แบบ Responsive Website เกิดขึ้น
Responsive Website คืออะไร ?
Responsive Website คือ เว็บที่รองรับทุกขนาดหน้าจอ และปรับเปลี่ยนการแสดงคอน
เทนต์ต่างๆให้เหมาะสมกับแต่ละขนาดของหน้าจอที่ใช้รับชม ทาให้ผู้ใช้สามารถรับชมเนื้อหา ได้อย่างมี
ประสิทธิภาพ

แนะนาเครื่องมือที่จาเป็น การติดตั้ง และการใช้งาน
Tools and Setup

Tools and Setup
เตรียมพร้อมเครื่องมือ
1. Sublime Text 3 http://www.sublimetext.com/3
2. Live Reload http://livereload.com/
3. Bootstrap 3 http://getbootstrap.com/
4. jQuery http://jquery.com/

Sublime Text 3
Text Editor
โปรแกรม Text Editor ที่ทรงประสิทธิภาพอีกตัวด้วยความสามารถที่น้าหนักเบารวดเร็ว และยังมี
package เสริมต่างๆให้เลือกใช้อีกมากมาย ทาให้การพัฒนาเว็บไซต์นั้นง่ายขึ้นตามไปด้วย
http://www.sublimetext.com/3

Live Reload App
Web Browser Reloader
Live Reload เป็นเครื่องมือที่ช่วยให้นักพัฒนาเว็บที่ใช้เครื่องมือประเภท Text Editor ซึ่งไม่มีการ
Preview หน้าเว็บในตอนทางาน ทาให้สามารถ Live view ได้โดยที่ไม่ต้องกด Refresh อีกต่อไป
http://livereload.com/

Bootstrap v 3.3.0
The most popular CSS Framework
CSS Framework ที่มีผู้ใช้งานมากที่สุดในโลก และ สร้างสรรค์สุดยอดผลงานต่างๆมาแล้วมากมาย
http://getbootstrap.com/

Jquery 2.0
JavaScript Library
Jquery คือคลังคาสั่ง หรือ ฟังชั่นสาเร็จรูปของภาษา JavaScript ที่มีไว้ให้เลือกใช้มากมาย การใช้งาน
ที่ง่าย และทรงประสิทธิภาพ กว่าการใช้งาน JavaScript อย่างมาก
http://jquery.com/

เริ่มต้นการใช้งาน Bootstrap 3
Getting Start

Create Bootstrap 3 Project
Project Folder
CSS
fonts
js
images
Index.html
นาไฟล์ bootstrap.css เก็บไว้ที่ Folder > CSS
นาไฟล์ fonts เก็บไว้ที่ Folder > fonts
นาไฟล์ jquery.js และ bootstrap.min.js เก็บไว้ที่ Folder > js
สาหรับเก็บรูปภาพ

การใช้งาน class หลักใน Bootstrap 3
Bootstrap 3 CSS

Container and Container-fluid
container
เป็นกล่องสาหรับเก็บส่วนประกอบต่างๆไว้ภายในเป็นรูปแบบขนาดตายตัว
<div class=“container”> … </div>
container-fluid
เป็นกล่องสาหรับเก็บส่วนประกอบต่างๆไว้ภายในเป็นรูปแบบยืดหยุ่นได้
<div class=“container-fluid”> … </div>

Row
Row
เป็นการจัดตาแหน่งให้ส่วนประกอบต่างๆอยู่ในแถวเดียวกัน
<div class=“row”> … </div>
col-md-10col-md-2

Grid System
Grid System
Grid เป็น class สาหรับใช้ในการจัด Layout รูปแบบ และ ตาแหน่งต่างๆภายในหน้าเว็บซึ่งมีความ
ยืดหยุ่นสูง และ เหมาะสาหรับการทา Responsive Website
<div class=“container”>
<div class=“col-md-6”> … </div>
<div class=“col-md-6”> … </div>
</div>
การเรียกใช้งานจะเป็นการเรียก ชื่อ class > col-รูปแบบ-ขนาด
1 – 12 ( 1 แถว รวมกันไม่เกิน 12 )
ประกอบด้วย
xs ขนาดหน้าจอน้อยกว่า 767 px
sm ขนาดหน้าจอระหว่าง 768 - 991 px
md ขนาดหน้าจอระหว่าง 992 - 1199 px
lg ขนาดหน้าจอตั้งแต่ 1200 px ขึ้นไป
ชื่อ class หลัก col

Grid System
Grid System Properties

Grid System
col-md-2 col-md-10
col-md-6 col-md-6
col-md-12

Grid System Offset
col-md-2 col-md-10
col-md-6
col-md-12
col-md-offset-6

Typography
Typography
Typography เป็นส่วนของการแสดงรูปแบบตัวอักษรหรือข้อความในรูปแบบต่างๆ ไม่ว่าจะเป็น Header
หรือ paragraph
<h1> … </h1>
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> … </h6>
<p> lorem </p> , <u> lorem </u> , <small> lorem </small> , <strong> lorem </strong> , <em> lorem </em> ,
<s> lorem </s> เป็นต้น

Tables
Tables
Tables เป็นการใช้งานตารางแสดงผลข้อมูลโดย Bootstrap 3 ได้จัดเตรียม class ให้เราเรียกใช้งาน ง่ายๆ
และสวยงามไว้หลายรูปแบบ เช่น
<table class=“table”> … </table> รูปแบบพื้นฐาน
<table class=“table table-striped”> … </table> รูปแบบการสลับสีตาม row
<table class=“table table-bordered”> … </table> รูปแบบมีเส้นขอบ
<table class=“table table-hover”> … </table> รูปแบบพื้นหลังเปลี่ยนสีเมื่อนาเม้าส์ไปชี้
<table class=“table table-condensend”> … </table> รูปแบบการย่นขนาดของตาราง
contextual เป็นการใช้งานกับ class ต่างๆเพื่อแสดงสีพิเศษ เช่น active, success, info, warning, danger
table-responsive ใช้ร่วมกับ div เพื่อครอบ table ไว้ให้สามารถแสดงผลแบบ responsive ได้

Form
Form
Form เป็นการช่องทางในการรับส่งข้อมูล เช่น การส่งข้อความ เป็นต้น และใน Bootstrap 3
ได้เพิ่ม class สาหรับจัดการ Form ให้เราได้ใช้หลายรูปแบบ ยกตัวอย่างเช่น
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email">
</div>
<form>

Buttons
Buttons
Buttons เป็นการใช้งาน class เพื่อควบคุมการแสดงผลของปุ่มกด
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Default
Primary
Success
Info
Warning
Danger
Link

Images
Images
Images เป็นการใช้งาน class เพื่อควบคุมการแสดงผลของรูปภาพ
<img class=“img-rounded” src=“…”> <img class=“img-circle” src=“…”> <img class=“img-thumbnail” src=“…”>

Helper Classes
Helper Classes
Helper Classes การใช้งานก็ตามความหมายคือเป็น class ที่มีไว้สาหรับช่วยเหลือหรือช่วยให้เรา
สามารถจัดรูปแบบได้สวยขึ้น สะดวกขึ้น ไม่ว่าจะเป็น
- Contextual Color , Background
- Close icon , Caret
- Quick Float , content block และ clearfix
- Show and Hidden

Responsive Utilities
Responsive Utilities
Responsive Utilities เป็นการใช้งานเพื่อให้การรับชมบน Smart Device มีประสิทธิภาพมากยิ่งขึ้น
โดยเราสามารถ สั่งให้ ซ่อน หรือ แสดง คอนเทนต์ในขนาดหน้าจอที่ต้องการได้

การใช้งาน Components ต่างๆใน Bootstrap 3
Bootstrap 3 Components

Glyphicons
Glyphicons
เป็นการใช้งาน icon font เพื่อแสดง font ในรูปแบบ icon ซึ่งเราสามารถกาหนดขนาดและสีให้กับ icon
เหล่านี้ได้
<i class=“glyphicon glyphicon-asterisk”> … </i>

Dropdown
Dropdown
มีหน้าที่สาหรับแสดง list ที่ซ่อนไว้เพื่อใช้เป็นลูกเล่นในการจัดหน้าเว็บให้สวยงามขึ้นและกระชับขึ้น
Class เสริมของ Dropdown ก็จะแบ่งออกเป็นหลายแบบ เช่น
- Alignment
- Headers
- Dividers
- Disables
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown"> … </button>

Button Group
Button Group
เป็นการจัดกลุ่มของปุ่มต่างๆ เพื่อแบ่งหมวดหมู่ หรือ ความสวยงามเป็นต้น
<div class="btn-group" role="group"> … </div>
<div class="btn-toolbar" role="group"> … </div>
<div class="btn-group btn-group-*size" role="group"> … </div>
<div class="btn-group-vertical" role="group"> … </div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group"> … </div>
</div>

Button Dropdown
Button Dropdown
มีหน้าที่สาหรับแสดง list ที่ซ่อนไว้เพื่อใช้เป็นลูกเล่นในการจัดหน้าเว็บให้สวยงามขึ้นและกระชับขึ้น
Class เสริมของ Dropdown ก็จะแบ่งออกเป็นหลายแบบ เช่น
- Single Dropdown
- Split Dropdown
- Dropup
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown"> … </button>

Input Group addons
Input Group
Input Group เป็นการตกแต่ง input ต่างๆใน Form ให้แลดูสวยงามมากขึ้น โดยการใช้งานร่วมกับ
class addons
- Basic
- Sizing
- Button addons and button with dropdown
- Segmented buttons

Navs
Navs
เป็น Component สาหรับตกแต่งส่วนนาทางหรือลิ้งค์ต่างๆ โดย Navs ก็มีหลายรูป แบบให้เราเลือกใช้
เช่น
- Tabs
- Pills and Stack
- Justified
- Tab with Dropdown
- Pills with Dropdown

Navbar
Navbar
เป็น Component สาหรับสร้าง แถบนาทางหรือที่เรามักเรียกกันว่า Navigation Bar ในส่วนของ
Navbar ของ Bootstrap ก็ได้ทาให้เป็น Responsive มาแล้ว และ ยังมีการใช้งานถึง 2 เฉด ได้แก่
- Default , Inverse
- Brand Text and Images ( v.3.3.1 )
- Navbar Forms and Button
- Fixed Top and Bottom
- Static top

Breadcrumbs
Breadcrumbs
เป็น Component สาหรับสร้าง แถบนาทางอีกรูปแบบ ใช้สาหรับบอกตาแหน่ง path หรือ ตาแหน่ง
ปัจจุบัน
<ol class=“breadcrumb”>
<li><a href=“#”> … </a></li>
</ol>

Pagination
Pagination
เป็น Component สาหรับสร้าง แถบนาทางอีกรูปแบบ ใช้สาหรับแบ่งส่วนของข้อมูล เพื่อให้กระชับขึ้น
โดย Pagination ได้แบ่งออกเป็น 2 ส่วนหลักๆคือ
- Default และ Pager

Labels
Labels
เป็น Component สาหรับสร้าง ป้ายกากับ เพื่อแสดงข้อมูลต่างๆ ในส่วนการแสดงผลของ Label ก็จะ
เป็นการใช้งานในรูปแบบ Contextual color
<span class="label label-*contextual color"> … </span>

Badges
Badges
เป็น Component สาหรับสร้าง Highlight หรือ unread ข้อความที่ ยังไม่ได้อ่าน เพื่อให้เด่นชัดขึ้น และ
badges ยังสมารถใช้ร่วมกับ Components อื่นๆได้ด้วย
<span class=“badge"> … </span>

Jumbotron
Jumbotron
เป็น Component สาหรับสร้างส่วนของ Showcase ต่างๆให้หน้าเว็บไซต์ ดูเด่นขึ้น
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Thumbnails
Thumbnails
เป็น Component สาหรับสร้างส่วนของ การแสดงรูปภาพขนาดย่อ เพื่อความสวยงามและกระชับ
สัดส่วนต่อหน้าเว็บ โดยการใช้งานจะแบ่งเป็น 2 ส่วนหลักๆได้แก่
- Default
- Custom Content
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>

Alerts
Alerts
เป็น Component สาหรับสร้างส่วนของ การแจ้งเตือน ในรูปแบบของ Contextual bg มีการใช้งานได้
หลากหลาย เช่น
- Default
- Dismissible alerts
- Link in alerts
<div class="alert alert-success" role="alert">...</div>

Progress bars
Progress bars
เป็น Component สาหรับสร้างส่วนของ สร้างแถบสถานะ หรือ การดาเนินการ โดยสมารถใช้งานได้
หลายรูปแบบ เช่น
- Basic
- With labels
- Contextual
- Striped
- Animate
- Stacked

Media Object
Media Object
เป็น Component สาหรับสร้างส่วนของ รายการพร้อมรูปภาพ หรือ ใช้ในการสร้างรายการ คอม
เมนต์ เหมือน โซเซียลมีเดียต่างๆ โดยมีรูปแบบการใช้งาน เช่น
- Default
- Media Alignment
- Media List

List Group
List Group
เป็น Component สาหรับสร้างส่วน List รายการต่างๆให้สวยงามยิ่งขึ้นโดยมีการใช้งานได้หลากหลาย
รูป แบบ ไม่ว่าจะเป็น List ข้อมูล หรือ List ข้อมูลพร้อม Link
- Default
- Badges
- Linked items
- Contextual classes
- Custom Content

Panels
Panels
เป็น Component สาหรับสร้างส่วน แสดงข้อมูล โดยแบ่งเป็นส่วนของ Header , body , footer เป็น
ต้น และยังสามารถใช้ร่วมกับ Tables ได้อีกด้วย
- Default
- Contextual
- with Tables
- with List group

Responsive Embed
Responsive Embed
เป็น Component สาหรับช่วยให้ ส่วนเสริมต่างๆสามารถแสดงผลแบบ responsive ได้ เช่น iframe ,
embed , video , object เป็นต้น

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!– 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Wells
Wells
เป็น Component สาหรับสร้างส่วนครอบ element ต่างๆไว้เพื่อแสดงผลแบบ inset effect
- Default
- Sizing

การใช้งาน Components ต่างๆใน Bootstrap 3
Bootstrap 3 JavaScript

Data attributes and JavaScript API

<button type="button" data-toggle="modal" data-target="#myModal" > Launch modal </button>
Data attributes
<script type=“text/javascript”>
$('#myModal').modal(options);
</script>
JavaScript API

Modal.js

Dropdown.js

<button id="dLabel" type="button" data-toggle="dropdown" role="button">
Dropdown trigger
<span class="caret"></span>
</button>
Data attributes
$('.dropdown-toggle').dropdown(option);
</script>
JavaScript API

Scrollspy.js

<body data-spy="scroll" data-target=".navbar-example">
<div class="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
</body>
Data attributes
$('body').scrollspy ( { target: '.navbar-example' } );
</script>
JavaScript API

Tab.js

JavaScript API
$('#myTab a'). tab('show');
</script>
<li class="active">
<a href="#home“ data-toggle="tab"> Home </a>
</li>
Data-Attribute

Tooltip.js

$(function () {
$('[data-toggle="tooltip"]').tooltip(optional);
})
</script>
JavaScript API

Popover.js

<button data-container="body" data-toggle="popover" data-placement="left" data-content=" .... "
type="button"class="btn btn-default" >
Popover on left
</button>
Data attributes
$('#example').popover(options);
</script>
JavaScript API

Alert.js

<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
Data attributes
$('#example').alert(options);
</script>
JavaScript API

Button.js

<button data-loading-text="Loading... " type="button" class="btn btn-default" >
Popover on left
</button>
Data attributes
$('#myButton').on('click', function () {
var $btn = $(this).button('loading');
$btn.button('reset');
})
</script>
JavaScript API

Collapse.js

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-
controls="collapseOne"> … </a>
Data attributes
$('.collapse').collapse();
</script>
JavaScript API

Carousel.js

Thank :D

Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (8)

Destacado

Destacado (20)

Similar a Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io

Similar a Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io (20)

Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io