ข้ามไปยังเนื้อหาหลัก
ProgrammerThailand
เข้าสู่ระบบ
ProgrammerThailand
เข้าสู่ระบบ / สมัครสมาชิก
Course · Web Design

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

147 บทเรียน 8 ชั่วโมง 34 นาที 16 ผู้เรียน
เขียน Responsive Website ด้วย Bootstrap 3

Chapter 3 - Getting Start

  • Create Bootstrap 3 Project 10:46

Chapter 1 - Introductions

Chapter 2 - Tools and Setup

  • แนะนำเครื่องมือ 1:54
  • Ampps Server 4:39
  • Sublime Text 3 7:35
  • Google Chorme Canary 2:30
  • Live Reload 8:08
  • Bootstrap 3 3:55
  • Jquery 2:01

Chapter 4 - Bootstrap 3 - CSS

  • Helper Caret 0:30
  • Helper Quick Float 1:17
  • Helper Close Button 0:58
  • Introduction to CSS 00:40
  • Container 3:54
  • Row 2:56
  • Grid System 2:20
  • Grid System 2 8:53
  • Typography 3:25
  • Typography 2 3:29
  • Tables 1:10
  • Table Basic 2:32
  • Table Striped 0:49
  • Table Bordered 0:46
  • Table Hover 0:43
  • Table Condensed 0:49
  • Table Contextual 1:52
  • Table Responsive 1:47
  • Forms 0:33
  • From Basic 2:47
  • Form Inline 2:18
  • Form Checkbox 1:33
  • Form Radio Button 0:56
  • From Select 1:43
  • Form Column Sizing 1:43
  • Buttons 0:50
  • Button Default 2:04
  • Button Sizing 1:55
  • Button Tag 2:27
  • Images 0:39
  • Image Responsive 1:02
  • Img Rounded 1:05
  • Img Circle 1:41
  • Img Thumbnail 1:07
  • Helper Classes 0:53
  • Helper Contextual Color 1:41
  • Helper Contextual Background 1:33
  • Helper Quick Float 1:17
  • Helper Show Hide 3:16
  • Responsive Utilities 3:25

Chapter 5 - Bootstrap 3 - Components

  • Introduction to Components 0:39
  • Glyphicon 1:52
  • Dropdown 5:42
  • Button Group 0:56
  • ButtonGroup Basic 2:08
  • ButtonGroup Toolbar 1:12
  • ButtonGroup Group Size 1:11
  • ButtonGroup Group Vertical 0:40
  • ButtonGroup Group Justified 0:55
  • Button Dropdown 0:35
  • Button Dropdown Single 2:36
  • Button Dropdown Split 3:49
  • Button Dropdown Dropup 0:58
  • Input Group 0:38
  • Input Group Basic 2:17
  • Input Group Sizing 0:59
  • Input Group Button with Dropdown 5:06
  • Input Group Segmented 1:06
  • Navs 0:26
  • Navs Tabs 1:26
  • Navs Pills and Stack 0:57
  • Navs Justified 1:10
  • Navs Tabs and Dropdown 2:23
  • Navs Pills and Dropdown 0:34
  • Navbar 1:07
  • Navbar Default and Inverse 7:09
  • Navbar Brand Text amd Images 2:09
  • Navbar Form and Button 3:43
  • Navbar Fixed Top and Buttom 2:54
  • Navbar Static Top 1:22
  • Breadcrumbs 1:55
  • Paginations 0:38
  • Pagination Default 2:53
  • Pagination Pager 1:25
  • Lables 2:21
  • Badges 3:19
  • Jumbotron 3:21
  • Thumbnails 0:32
  • Thumbnail Default 1:23
  • Thumbnail Custom Content 4:25
  • Alerts 0:40
  • Alert Default 2:39
  • Alert Dismisables 2:31
  • Alert Link 1:24
  • Progress bars 0:41
  • Progress Bars Basic 2:52
  • Progress Bars Label 1:16
  • Progress Bars Contextual 1:15
  • Progress Bars Striped 0:54
  • Progress Bars Animate 0:44
  • Progress Bars Stacked 1:26
  • Media Object 0:38
  • Media Object Default 3:02
  • Media Object Alignment 1:38
  • Media Object Media List 3:46
  • List Group 0:38
  • List Group Default 3:08
  • List Group Badges 1:17
  • List Group Linked 1:35
  • List Group Content Classes 1:43
  • List Group Custom Content 2:19
  • Panels 0:28
  • Panels Default 4:26
  • Panels Contextual 1:39
  • Panels Tables 3:50
  • Panels List group 2:59
  • Responsive Embed 3:45
  • Wells 2:02
  • Dropdown 0:46

Chapter 6 - Bootstrap 3 - JavaScript

  • 122- JavaScript - Dropdown.mp4 1:00
  • JavaScript Bootstrap Overviews 1:12
  • Data Attributes and JavaScript API 1:47
  • Modals 9:36
  • Scrollspy 9:57
  • Tabs 4:50
  • Tooltips 4:23
  • Popovers 6:11
  • Alerts 3:37
  • Buttons 0:44
  • Button Stateful 4:11
  • Button Checkbox 2:28
  • Button Radio 1:27
  • Collapse 11:18
  • Carousel 12:09

Chapter 7 - Bootstrap 3 - Customize

  • การใช้งานในส่วน Customize 16:23

Chapter 8 - Workshop - Responsive Webdesign

  • แนวคิด 6:40
  • การออกแบบโครงร่าง 2:33
  • เริ่มสร้างโปรเจ็ค 12:42
  • เริ่มการเขียนเนื้อหา 1:06:22
  • แนะนำการทำงานของ Media Query 12:23
  • การออบแบบสำหรับหน้าจอขนาดเล็ก 42:46
  • การออกแบบสำหรับหน้าจอขนาดกลาง 7:39
  • การออกแบบสำหรับหน้าจอขนาดใหญ่ 24:58
  • เก็บรายละเอียด 47:10

End - Conclusion

  • สรุป 1:38
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 ชั่วโมงครึ่ง

ความคิดเห็น (0)

ยังไม่มีความคิดเห็น — เริ่มคุยเป็นคนแรก ถามสิ่งที่สงสัย หรือแชร์ประสบการณ์ของคุณ

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

ตั้งค่าเอง