Bootstrap CSS Framework – CSS & Component

Hiểu và ứng dụng được các CSS Component mà Bootstrap cung cấp, từ đó rút ngắn thời gian thiết kế.

Tìm Hiểu Thêm

Giới thiệu khóa học

Tất cả các kiến thức về HTML, CSS đã có thể giúp bạn tự tin xây dựng được các giao diện với bố cục từ cơ bản đến phức tạp đảm bảo hiển thị tốt trên nhiều kích thước màn hình (Responsive Design). Tuy nhiên, chúng sẽ tiêu tốn của chúng ta khá nhiều thời gian và công sức. Bootstrap CSS Framework ra đời chính là giúp chúng ta giải quyết vấn đề đó. Nó không những giúp chúng ta rút ngắn thời gian thiết kế giao diện có bố cục phức tạp mà còn đảm bảo giao diện đó bắt mắt và hiển thị tốt trên nhiều thiết bị, từ desktop, laptop cho tới tablet, mobile. Ngoài ra, trang bị kiến thức về Bootstrap CSS Framework cũng là một phần không thể thiếu cho các Front-End Developer khi nó dần trở thành yêu cầu tất yếu khi xin việc.

Bạn sẽ học được gì?

  • Áp dụng được cơ chế Grid System của Bootstrap để xây dựng đa giao diện cho trang web đáp ứng Responsive Design
  • Hiểu và ứng dụng được các CSS Component mà Bootstrap cung cấp, từ đó rút ngắn thời gian thiết kế.
  • Khả năng giải quyết các vấn đề về giao diện mà khi làm việc với HTML và CSS thường mắc phải.
  • Biết thêm một số khái niệm khi xây dựng giao diện với CSS và Accessible Rich Internet Applications

Đối tượng đào tạo

  • Web developer mong muốn nâng cao trình độ thiết kế giao diện
  • Những người đang theo ngành thiết kế web mong muốn tạo ra giao diện web nhanh chóng và bắt mắt
  • Sinh viên CNTT chuyên ngành web muốn nâng cao trình độ chuyên môn.
  • Những người đã từng biết qua HTML & CSS nhưng cảm thấy quá mất thời gian cho việc thiết kế giao diện.

Nội dung khóa học

 Phần 1: Giới thiệu về Bootstrap CSS Framework
 Bài 1: Giới thiệu Bootstrap CSS Framework0:07:06
 Bài 2: Cài đặt Bootstrap 3 – Download mã nguồn0:04:39
 Bài 3: Cài đặt Bootstrap 3 – Cấu trúc template cơ bản0:05:49
 Phần 2: Tìm hiểu về hệ thống Grid System và các vấn đề liên quan
 Bài 4: Tìm hiểu Bootstrap Container0:05:24
 Bài 5: Tìm hiểu Bootstrap Row0:02:54
 Bài 6: Lý thuyết về Bootstrap Column0:08:18
 Bài 7: Ứng dụng Bootstrap Column xây dựng bố cục cơ bản0:08:06
 Bài 8: Xây dựng đa giao diện bằng Multiple column class0:00:00
 Bài 9: Tìm hiểu cơ chế Offsetting Column0:06:04
 Bài 10: Tìm hiểu cơ chế Nested Column0:05:52
 Bài 11: Tìm hiểu cơ chế Ordering Column0:07:22
 Phần 3: Typography
 Bài 12: Heading và body style trong Bootstrap0:04:37
 Bài 13: Một số thẻ ngữ nghĩa trong Bootstrap0:04:23
 Bài 14: Tìm hiểu Alignment Class và Transformation Class0:03:35
 Bài 15: Định dạng cho Abbreviation và Blockquote0:03:05
 Bài 16: Định dạng danh sách trong Bootstrap0:03:36
 Bài 17: Một số thẻ định dạng mã nguồn0:03:39
 Bài 18: Định dạng Table trong Bootstrap0:04:14
 Bài 19: Định dạng Button trong Bootstrap0:06:35
 Bài 20: Định dạng hình ảnh trong Bootstrap0:03:59
 Bài 21: Tìm hiểu các Helper Class – Contextual và Quick Float Class0:03:42
 Bài 22: Tìm hiểu các Helper Class – Screen Reader và một số class còn lại0:05:33
 Bài 23: Tìm hiểu các Responsive Ultilities Class0:07:31
 Phần 4: Trang trí Form cơ bản trong Bootstrap
 Bài 24: Trang trí Form cơ bản với Bootstrap0:04:56
 Bài 25: Các control được hỗ trợ trong Bootstrap Form0:05:37
 Bài 26: Tìm hiểu cách trang trí cho Inline Form0:04:37
 Bài 27: Tìm hiểu cách trang trí cho Horizontal Form0:04:53
 Bài 28: Một số class hỗ trợ trang trí trong Form0:07:31
 Phần 5: Tìm hiểu về Component – Một số Component thường gặp
 Bài 29: Tìm hiểu Glyphicon Component0:07:44
 Bài 30: Tìm hiểu Dropdown Component0:07:49
 Bài 31: Tìm hiểu Button Group Component0:04:42
 Bài 32: Tìm hiểu Button Dropdown Component0:04:20
 Bài 33: Tìm hiểu Input Group Component0:05:40
 Bài 34: Sử dụng Input Group & Form Group0:04:58
 Bài 35: Tìm hiểu Form Validation Style0:07:27
 Bài 36: Tìm hiểu Navs Component0:07:14
 Bài 37: Tìm hiểu Navbar Component – Cấu trúc cơ bản0:08:06
 Bài 38: Tìm hiểu Navbar Component – Thêm một số thành phần cơ bản0:07:09
 Bài 39: Tìm hiểu Navbar Component – Thu gọn Navbar khi responsive0:03:33
 Bài 40: Tìm hiểu Navbar Component – Một số kiểu trang trí dành cho Navbar0:06:43
 Phần 6: Tìm hiểu các Component khác có trong Bootstrap
 Bài 41: Tìm hiểu Component Page Header & Jumbotron0:04:18
 Bài 42: Tìm hiểu Thumbnail Component0:05:40
 Bài 43: Tìm hiểu Pagination & Breadcrumb Component0:06:25
 Bài 44: Tìm hiểu Media Object Component0:05:51
 Bài 45: Tìm hiểu Alert, Badges và Label Component0:06:38
 Bài 46: Tìm hiểu List Group Component0:05:36
 Bài 47: Tìm hiểu Panel Component0:04:57
 Bài 48: Tìm hiểu Wells Component0:02:03
 Bài 49: Tìm hiểu Progress bars Component0:05:28
 Bài 50: Tìm hiểu Responsive Embed Component0:03:47

Đăng Ký Học Ngay

Chia sẻ với mọi người...
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Email this to someone
email

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *