| MÔN 9: THIẾT KẾ GIAO DIỆN WEB BẰNG BOOTSTRAP |
| Tên bài học (Video) |
Mô tả nội dung bài học |
Thời gian |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 1) |
Giới thiệu về Bootstrap CSS Framework, cách cài đặt, tích hợp vào website |
23 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 2 - P1) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
15 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 2 - P2) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
17 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 3) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
18 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 4) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
15 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 5) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
7 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 6) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
5 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 7) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
19 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 8) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
13 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 9) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
8 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 10) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
11 phút |
| Thiết kế giao diện website với Bootstrap CSS Framework (Bài 11) |
Hướng dẫn cách định nghĩa các lớp trong Bootstrap Grid System để thiết kế giao diện web đáp ứng chuẩn Responsive Web Design |
7 phút |
| Cách thiết kế giao diện web với thành phần Table trong Bootstrap CSS Framework (Bài 12 - P1) |
Hướng dẫn cách thiết kế giao diện web với thành phần Table trong Bootstrap CSS Framework |
10 phút |
| Cách thiết kế giao diện web với thành phần Table trong Bootstrap CSS Framework (Bài 12 - P2) |
Hướng dẫn cách thiết kế giao diện web với thành phần Table trong Bootstrap CSS Framework |
10 phút |
| Cách thiết kế giao diện web với thành phần Table trong Bootstrap CSS Framework (Bài 12 - P3) |
Hướng dẫn cách thiết kế giao diện web với thành phần Table trong Bootstrap CSS Framework |
4 phút |
| Cách thiết kế giao diện web với thành phần Helper class trong Bootstrap CSS Framework (Bài 13 - P1) |
Hướng dẫn cách thiết kế giao diện web với thành phần Helper class trong Bootstrap CSS Framework |
15 phút |
| Cách thiết kế giao diện web với thành phần Helper class trong Bootstrap CSS Framework (Bài 13 - P2) |
Hướng dẫn cách thiết kế giao diện web với thành phần Helper class trong Bootstrap CSS Framework |
6 phút |
| Cách sử dụng thành phần Badges trong Bootstrap CSS Framework (Bài 14) |
Hướng dẫn cách gắn huy hiệu (Badges) Bootstrap CSS Framework |
5 phút |
| Cách sử dụng thành phần Labels trong Bootstrap CSS Framework (Bài 15) |
Cách sử dụng thành phần Labels trong Bootstrap CSS Framework để dán nhãn |
8 phút |
| Cách sử dụng thành phần Buttons trong Bootstrap CSS Framework (Bài 16) |
Cách sử dụng thành phần Buttons trong Bootstrap CSS Framework để tạo nút cho trang web |
20 phút |
| Các kiểu định dạng hình trong Bootstrap CSS Framework (Bài 17 - P1) |
Giới thiệu các kiểu định dạng hình trong Bootstrap CSS Framework để trình bày hình ảnh. |
12 phút |
| Hướng dẫn cách trình bày ảnh Thumbnail trong Bootstrap CSS Framework (Bài 17 - P2) |
Hướng dẫn cách trình bày ảnh Thumbnail trong Bootstrap CSS Framework. |
10 phút |
| Hướng dẫn cách dùng Grid System Bootstrap để trình bày ảnh Thumbnail theo ý muốn (Bài 17 - P3) |
Hướng dẫn cách dùng Grid System Bootstrap để trình bày ảnh Thumbnail theo ý muốn |
8 phút |
| Hướng dẫn cách dùng Grid System Bootstrap để trình bày ảnh Thumbnail theo ý muốn (Bài 17 - P4) |
Hướng dẫn cách dùng Grid System Bootstrap để trình bày ảnh Thumbnail theo ý muốn |
6 phút |
| Hướng dẫn cách dùng Grid System Bootstrap để trình bày ảnh Thumbnail theo ý muốn (Bài 17 - P5) |
Hướng dẫn cách dùng Grid System Bootstrap để trình bày ảnh Thumbnail theo ý muốn |
12 phút |
| Hướng dẫn sử dụng đối tượng List Group trong Bootstrap (Bài 18 - P1) |
Hướng dẫn sử dụng List Group và List Group Item trong Bootstrap để thiết kế giao diện web chuẩn Responsive |
12 phút |
| Hướng dẫn sử dụng List Group Link trong Bootstrap (Bài 18 - P2) |
Hướng dẫn sử dụng List Group Link trong Bootstrap để thiết kế giao diện web theo chuẩn Responsive. |
10 phút |
| Hướng dẫn cách chèn nội dung vào List Group Link trong Bootstrap (Bài 18 - P3) |
Hướng dẫn cách chèn nội dung vào List Group Link trong Bootstrap ` |
10 phút |
| Hướng dẫn cách sử dụng List-inline trong Bootstrap (Bài 19 - P1) |
Hướng dẫn cách sử dụng List-inline trong Bootstrap |
5 phút |
| Hướng dẫn cách sử dụng List-Unstyled trong Bootstrap (Bài 19 - P2) |
Hướng dẫn cách sử dụng List-Unstyled trong Bootstrap |
4 phút |
| Hướng dẫn cách sử dụng Panel trong Bootstrap (Bài 20 - P1) |
Hướng dẫn cách sử dụng Panel trong Bootstrap để thiết kế giao diện web chuẩn Mobile |
14 phút |
| Hướng dẫn cách sử dụng Panel trong Bootstrap (Bài 20 - P2) |
Hướng dẫn cách sử dụng Panel trong Bootstrap để thiết kế giao diện web chuẩn Responsive |
11 phút |
| Hướng dẫn cách sử dụng Font Glyphicons trong thiết kế giao diện web bằng Bootstrap (Bài 21 - P1) |
Hướng dẫn cách sử dụng Font Glyphicons trong thiết kế giao diện web bằng Bootstrap |
16 phút |
| Hướng dẫn cách sử dụng Font Glyphicons trong thiết kế giao diện web bằng Bootstrap (Bài 21 - P2) |
Hướng dẫn cách sử dụng Font Glyphicons trong thiết kế giao diện web bằng Bootstrap |
8 phút |
| Hướng dẫn tạo Vertical Form trong Bootstrap (Bài 22 - P1) |
Hướng dẫn tạo Vertical Form trong Bootstrap |
13 phút |
| Hướng dẫn tạo Horizontal Form trong Bootstrap (Bài 22 - P2) |
Hướng dẫn tạo Horizontal Form trong Bootstrap |
14 phút |
| Hướng dẫn tạo Inline Form trong Bootstrap (Bài 22 - P3) |
Hướng dẫn tạo Inline Form trong Bootstrap |
4 phút |
| Hướng dẫn cách tùy biến giao diện Form trong Bootstrap (Bài 22 - P4) |
Hướng dẫn cách tùy biến giao diện Form trong Bootstrap |
13 phút |
| Hướng dẫn cách sử dụng thành phần Breadcrumbs trong Bootstrap (Bài 23) |
Hướng dẫn cách sử dụng thành phần Breadcrumbs trong Bootstrap |
8 phút |
| Hướng dẫn cách sử dụng thành phần Pagination trong Bootstrap để đánh số trang (Bài 24) |
Hướng dẫn cách sử dụng thành phần Pagination trong Bootstrap để đánh số trang |
10 phút |
| Hướng dẫn cách sử dụng thành phần Pager trong Bootstrap (Bài 25) |
Hướng dẫn cách sử dụng thành phần Pager trong Bootstrap |
6 phút |
| Hướng dẫn cách sử dụng thành phần Page Header trong Bootstrap (Bài 26) |
Hướng dẫn cách sử dụng thành phần Page Header trong Bootstrap |
5 phút |
| Hướng dẫn cách sử dụng thành phần Jumpbotron trong Bootstrap (Bài 27) |
Hướng dẫn cách sử dụng thành phần Jumpbotron trong Bootstrap |
11 phút |
| Hướng dẫn cách sử dụng thành phần Progress Bars trong Bootstrap (Bài 28) |
Hướng dẫn cách sử dụng thành phần Progress Bars trong Bootstrap |
14 phút |
| Hướng dẫn cách sử dụng thành phần Dropdowns trong Bootstrap (Bài 29 - P1) |
Hướng dẫn cách sử dụng thành phần Dropdowns trong Bootstrap để tạo menu Dropdown |
14 phút |
| Hướng dẫn cách sử dụng thành phần Dropdowns trong Bootstrap (Bài 29 - P2) |
Hướng dẫn cách sử dụng thành phần Dropdowns trong Bootstrap để tạo menu Dropdown |
6 phút |
| Hướng dẫn cách sử dụng thành phần Button Groups trong Bootstrap (Bài 30 - P1) |
Hướng dẫn cách sử dụng thành phần Button Groups trong Bootstrap |
6 phút |
| Hướng dẫn cách sử dụng thành phần Button Groups trong Bootstrap (Bài 30 - P2) |
Hướng dẫn cách sử dụng thành phần Button Groups trong Bootstrap |
7 phút |
| Hướng dẫn cách sử dụng thành phần Button Groups trong Bootstrap (Bài 30 - P3) |
Hướng dẫn cách sử dụng thành phần Button Groups trong Bootstrap |
11 phút |
| Hướng dẫn cách sử dụng thành phần Navs trong Bootstrap (Bài 31 - P1) |
Hướng dẫn cách sử dụng thành phần Navs trong Bootstrap để tạo Menu Tabs |
17 phút |
| Hướng dẫn cách sử dụng thành phần Navs trong Bootstrap (Bài 31 - P2) |
Hướng dẫn cách sử dụng thành phần Navs trong Bootstrap để tạo Menu Tabs |
12 phút |
| Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap (Bài 32 - P1) |
Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap để tạo Menu cho website |
12 phút |
| Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap (Bài 32 - P2) |
Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap để tạo Menu Responsive cho website |
18 phút |
| Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap (Bài 32 - P3) |
Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap để tạo Fixed Menu Responsive cho website |
9 phút |
| Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap (Bài 32 - P4) |
Hướng dẫn cách thiết kế Form tìm kiếm, nút đăng lý, đăng nhập trên thanh Menu Navbar trong Bootstrap |
12 phút |
| Hướng dẫn cách sử dụng thành phần Navbar trong Bootstrap (Bài 32 - P5) |
Hướng dẫn cách thiết kế Dropdown Menu & tạo text Link trên thanh Menu Navbar trong Bootstrap |
12 phút |
| Hướng dẫn cách sử dụng thành phần Alerts trong Bootstrap (Bài 33) |
Hướng dẫn sử dụng thành phần Alerts để tạo các hộp thông báo theo ngữa cảnh trong Bootstrap |
12 phút |
| Hướng dẫn cách sử dụng thành phần Media Object trong Bootstrap (Bài 34 - P1) |
Hướng dẫn sử dụng thành phần Media Object trong Bootstrap |
13 phút |
| Hướng dẫn cách sử dụng thành phần Media Object trong Bootstrap (Bài 34 - P2) |
Hướng dẫn sử dụng thành phần Media Object trong Bootstrap |
9 phút |
| Hướng dẫn cách sử dụng Typography trong Bootstrap (Bài 35 - P1) |
Hướng dẫn cách sử dụng Typography trong Bootstrap |
24 phút |
| Hướng dẫn cách sử dụng Typography trong Bootstrap (Bài 35 - P2) |
Hướng dẫn cách sử dụng Typography trong Bootstrap |
8 phút |
| Hướng dẫn thiết kế Menu Navigation Tab trong Bootstrap (Bài 36 - P1) |
Hướng dẫn thiết kế Menu Navigation Tab trong Bootstrap |
18 phút |
| Hướng dẫn thiết kế Menu Navigation Tab đáp ứng chuẩn RWD trong Bootstrap (Bài 36 - P2) |
Hướng dẫn thiết kế Menu Navigation Tab đáp ứng chuẩn RWD trong Bootstrap |
10 phút |
| Hướng dẫn thiết kế Menu Navigation Tab đáp ứng chuẩn RWD trong Bootstrap (Bài 36 - P3) |
Hướng dẫn thiết kế Menu Navigation Tab đáp ứng chuẩn RWD trong Bootstrap |
12 phút |
| Hướng dẫn thiết kế Menu Navigation Tab đáp ứng chuẩn RWD trong Bootstrap (Bài 36 - P4) |
Hướng dẫn thiết kế Menu Navigation Tab đáp ứng chuẩn RWD trong Bootstrap |
7 phút |
| Hướng dẫn chèn Video vào trang web đáp ứng chuẩn RWD trong Bootstrap (Bài 37) |
Hướng dẫn thiết kế Menu Navigation Tab đáp ứng chuẩn RWD trong Bootstrap |
11 phút |
| Hướng dẫn tạo slideshow hình ảnh với Carousel trong Bootstrap (Bài 38 - P1) |
Hướng dẫn tạo slideshow hình ảnh với Carousel trong Bootstrap |
20 phút |
| Hướng dẫn tạo slideshow hình ảnh với Carousel trong Bootstrap (Bài 38 - P2) |
Hướng dẫn tạo slideshow hình ảnh với Carousel trong Bootstrap |
10 phút |
| Hướng dẫn tạo Arcordion Panel trong Bootstrap (Bài 39 - P1) |
Hướng dẫn tạo Arcordion Panel trong Bootstrap |
16 phút |
| Hướng dẫn tạo Arcordion Panel trong Bootstrap (Bài 39 - P2) |
Hướng dẫn tạo Arcordion Panel trong Bootstrap |
7 phút |
| Hướng dẫn tạo Tooltip trong Bootstrap (Bài 40) |
Hướng dẫn tạo Tooltip trong Bootstrap |
16 phút |
| Hướng dẫn cách tạo Modal Box trong Bootstrap (Bài 41 - P1) |
Hướng dẫn cách tạo Modal Box trong Bootstrap |
18 phút |
| Hướng dẫn cách tạo Modal Box trong Bootstrap (Bài 41 - P2) |
Hướng dẫn cách tạo đưa nội dung vào Modal Box trong Bootstrap |
10 phút |
| Hướng dẫn cách tạo ScrollSpy trong Bootstrap (Bài 42 - P1) |
Hướng dẫn cách tạo ScrollSpy trong Bootstrap |
20 phút |
| Hướng dẫn cách tạo ScrollSpy trong Bootstrap (Bài 42 - P2) |
Hướng dẫn cách trang trí giao diện cho ScrollSpy trong Bootstrap |
18 phút |
| Hướng dẫn cách tạo Popover trong Bootstrap (Bài 43) |
Hướng dẫn cách tạo Popover trong Bootstrap |
13 phút |
(Sau khi kết thúc Môn 9 các Bạn sẽ làm chủ được Bootstrap CSS Framework V3.3.4 để áp dụng vào thiết kế giao diện web & lập trình web
|