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

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

Bootstrap 3


Introduction to Bootstrap 3

Bootstrap คือ CSS Framework ซึ่งเป็นที่นิยมทั่วโลกเนื่องจากการใช้งานที่ง่าย สวยงาม สะดวก

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

ซึ่งสามารถรองรับการท างานได้ทุก Smart Device

Bootstrap 3 Based

Introduction to Responsive Website

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

Responsive Website คืออะไร ?

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

Responsive Web design

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

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


<button type="button" data-toggle="modal" data-target="#myModal" > Launch modal </button>

Data attributes

<script type=“text/javascript”> $('#myModal').modal(options);

</script>

JavaScript API

Dropdown.js


<button id="dLabel" type="button" data-toggle="dropdown" role="button">Dropdown trigger<span class="caret"></span>

</button>

Data attributes

<script type=“text/javascript”> $('.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

<script type=“text/javascript”> $('body').scrollspy ( { target: '.navbar-example' } );

</script>

JavaScript API

Tab.js


JavaScript API

<script type=“text/javascript”> $('#myTab a'). tab('show');

</script>

<li class="active"><a href="#home“ data-toggle="tab"> Home </a>

</li>

Data-Attribute

Tooltip.js


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

<script type=“text/javascript”> $('#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

<script type=“text/javascript”> $('#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

<script type=“text/javascript”> $('#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

<script type=“text/javascript”> $('.collapse').collapse();

</script>

JavaScript API

Carousel.js


<button data-loading-text="Loading... " type="button" class="btn btn-default" >Popover on left

</button>

Data attributes

<script type=“text/javascript”> $('#myButton').on('click', function () {

var $btn = $(this).button('loading');$btn.button('reset');

}) </script>

JavaScript API

Thank :D


bootstrap 3 สำหรับมือใหม่ | cloudcourse.io

Technology