เขียน Responsive Website ด้วย Bootstrap 3

 Thapwaris Chinsirirathkul

Thapwaris Chinsirirathkul

Frontend Developer ผู้ก่อตั้งเว็บไซต์ Cloud-Tutorial.com
Play this video

เขียน Responsive Website ด้วย Bootstrap 3

ความยาว: 9:28:22

รายละเอียดเนื้อหา

Bootstrap 3 เป็น front end framework ในการออกแบบหน้าเว็บ คอร์สนี้จะทำให้ผู้เรียนเข้าใจภาพรวมของ framework นี้ รวมถึงการใช้งานส่วนประกอบต่างๆ ในการออกแบบเว็บไซต์ให้สวยงามได้อย่างง่ายดาย
ด้วย Bootstrap 3 จะทำให้การออกแบบเว็บครั้งเดียวสามารถใช้ได้กับอุปกรณ์ที่มีขนาดหน้าจอต่างกัน ตั้งแต่หน้าจอเล็กๆ อย่างอุปกรณ์มือถือ (Mobile Devices), ขนาดกลางอย่างแทบเบล็ต (Tablet) ไปจนถึงขนาดใหญ่เช่นหน้าจอ Desktop ซึ่งการออกแบบให้รองรับการทำงานกับอุปกรณ์ที่หลากหลายเช่นนี้เรียกว่า Responsive Design
ในช่วงต้นของคอร์ส ผู้สอนได้เพิ่มเติมเนื้อหาในส่วนของเครื่องมือที่ใช้ในการเขียนและทดสอบหน้าเว็บโดยที่ยังไม่ต้อง upload ขึ้นสู่ server หรือ web hosting แต่อย่างใด
หลังจากนั้นจะเป็นการปูพื้นฐานเกี่ยวกับ Grid System ซึ่งเป็นหัวใจสำคัญของการออกแบบให้เป็น Responsive, การใช้ Table, Form และ Input ในรูปแบบต่างๆ, Button ตามด้วย component ที่ทำให้เว็บดูหรูหราขึ้นอย่างเช่น Button Group, Input Group, Navigation Bar, Pagination, Progress Bar, Media Object ฯลฯ
คอร์สนี้ยังสอนเรื่องการใช้ Javascript เพื่อทำลูกเล่นต่างๆ ด้วย เช่น Modals, Dropdown, Tabs, Tooltips, Popovers, Alert, Collapse ไปจนถึงสิ่งที่ advance อย่าง Carousel
ยังไม่จบแค่นั้น คอร์สนี้ยังมี workshop ด้วยการสาธิตการใช้งานจริงด้วยวีดีโออีกเป็นเวลา 3 ชั่วโมงครึ่ง รวมเวลาแล้ว คอร์สนี้ยาวจุใจ คุ้มค่า ด้วยเวลารวมของวีดีโอทั้งหมดถึง 9 ชั่วโมงครึ่ง

Chapter 1 - Introductions

01:39

แนะนำ Responsive Website ตัวอย่าง

01:56

แนะนำ Responsive Website ตัวอย่าง

01:56

Chapter 2 - Tools and Setup

แนะนำเครื่องมือ

01:54

Ampps Server

04:39

Sublime Text 3

07:35

Google Chorme Canary

02:30

Live Reload

08:08

Bootstrap 3

03:55

Jquery

02:01

Chapter 3 - Getting Start

Create Bootstrap 3 Project

10:46

Chapter 4 - Bootstrap 3 - CSS

Introduction to CSS

00:40

Container

03:54

Row

02:56

Grid System

02:20

Grid System 2

08:53

Typography

03:25

Typography 2

03:29

Tables

01:10

Table Basic

02:32

Table Striped

00:49

Table Bordered

00:46

Table Hover

00:43

Table Condensed

00:49

Table Contextual

01:52

Table Responsive

01:47

Forms

00:33

From Basic

02:47

Form Inline

01:33

Form Radio Button

00:56

From Select

01:43

Form Column Sizing

01:43

Buttons

00:50

Button Default

02:04

Button Sizing

01:55

Button Tag

02:27

Images

01:02

Img Rounded

01:05

Img Circle

01:41

Img Thumbnail

01:07

Helper Classes

00:53

Helper Contextual Color

01:41

Helper Contextual Background

00:58

Helper Close Button

00:58

Helper Caret

00:30

Helper Quick Float

01:17

Helper Show Hide

03:16

Responsive Utilities

03:25

Chapter 5 - Bootstrap 3 - Components

Introduction to Components

00:39

Glyphicon

01:52

Dropdown

05:42

Button Group

00:56

ButtonGroup Basic

02:08

ButtonGroup Toolbar

01:12

ButtonGroup Group Size

01:11

ButtonGroup Group Vertical

00:40

ButtonGroup Group Justified

00:35

Button Dropdown Single

02:36

Button Dropdown Split

03:49

Button Dropdown Dropup

00:58

Input Group

00:38

Input Group Basic

02:17

Input Group Sizing

00:59

Input Group Button with Dropdown

05:06

Input Group Segmented

01:06

Navs

00:26

Navs Tabs

01:26

Navs Pills and Stack

00:57

Navs Justified

01:10

Navs Tabs and Dropdown

02:23

Navs Pills and Dropdown

00:34

Navbar

01:07

Navbar Default and Inverse

02:09

Navbar Form and Button

03:43

Navbar Fixed Top and Buttom

02:54

Navbar Static Top

01:22

Breadcrumbs

01:55

Paginations

00:38

Pagination Default

02:53

Pagination Pager

01:25

Lables

02:21

Badges

03:19

Jumbotron

03:21

Thumbnails

00:32

Thumbnail Default

01:23

Thumbnail Custom Content

04:25

Alerts

00:40

Alert Default

02:39

Alert Dismisables

02:31

Alert Link

01:24

Progress bars

00:41

Progress Bars Basic

02:52

Progress Bars Label

01:16

Progress Bars Contextual

01:15

Progress Bars Striped

00:54

Progress Bars Animate

00:44

Progress Bars Stacked

01:26

Media Object

00:38

Media Object Default

03:02

Media Object Alignment

01:38

Media Object Media List

03:46

List Group

00:38

List Group Default

03:08

List Group Badges

01:17

List Group Linked

01:35

List Group Content Classes

01:43

List Group Custom Content

02:19

Panels

00:28

Panels Default

04:26

Panels Contextual

01:39

Panels Tables

03:50

Panels List group

02:59

Responsive Embed

03:45

Wells

02:02

Dropdown

00:46

Chapter 6 - Bootstrap 3 - JavaScript

Dropdown

01:00

JavaScript Bootstrap Overviews

01:12

Data Attributes and JavaScript API

01:47

Modals

09:36

Scrollspy

09:57

Tabs

04:50

Tooltips

04:23

Popovers

06:11

Alerts

03:37

Buttons

00:44

Button Stateful

04:11

Button Checkbox

02:28

Button Radio

01:27

Collapse

11:18

Carousel

12:09

Chapter 7 - Bootstrap 3 - Customize

การใช้งานในส่วน Customize

16:23

Chapter 8 - Workshop - Responsive Webdesign

แนวคิด

06:40

การออกแบบโครงร่าง

02:33

เริ่มสร้างโปรเจ็ค

12:42

เริ่มการเขียนเนื้อหา

01:06:22

แนะนำการทำงานของ Media Query

12:23

การออบแบบสำหรับหน้าจอขนาดเล็ก

42:46

การออกแบบสำหรับหน้าจอขนาดกลาง

07:39

การออกแบบสำหรับหน้าจอขนาดใหญ่

24:58

เก็บรายละเอียด

47:10

End - Conclusion

สรุป

01:38

กลับขึ้นบน