Cái nhìn tổng quan về thiết kế tương tác và cách tiếp cận.

1. Hải Trần
Tháng 7/2014
RESPONSIVE WEB DESIGN
Part 2

2. Nội dung chính
1. Giới thiệu hệ thống lưới
2. Giới thiệu các frameworks và tools
3. Bootstrap framework
4. Images
5. Email template
Trần Trương Long Hải

3. Giới thiệu hệ thống lưới
Trần Trương Long Hải
Grid System là một thuật ngữ được dùng
để chỉ phương pháp sắp đặt các thành
phần HTML theo dạng lưới dựa trên CSS.
Một Grid System rất quen thuộc và được
áp dụng phổ biến là 960 Grid. 960 Grid hỗ
trợ hai loại là 12 và 16 cột.

4. Giới thiệu hệ thống lưới
Trần Trương Long Hải
960 Grid System cố định chiều rộng của trang web là 960px. Với loại 12 cột thì
mỗi cột sẽ có chiều rộng là 60px và tương tự là 40px cho loại 16 cột. Nội
dung
bài
này đề cập đến loại 12 cột (16 cột cũng tương tự).
12
*
60px
+
12
*
20px
=
960px

5. Giới thiệu hệ thống lưới
Trần Trương Long Hải
Mỗi ô của Grid System thường là
một thẻ div được gắn class là
grid_x. Trong đó là x là một số xác
định chiều rộng của ô (từ 1 đến
12). Ví dụ chiều rộng của thẻ div
tương ứng với mỗi class là:
grid_1: 60px
grid_2: 140px
grid_3: 220px
…

6. Giới thiệu hệ thống lưới
Trần Trương Long Hải
• Để chứa một Grid System, bạn cần tạo một thẻ div “container” với class có
dạng container_x. Giá trị x ở đây là số lượng cột tối đa mà Grid System hỗ trợ, nghĩa là
container_12 đối với loại 12 cột. Các ô bên trong sẽ tự động xuống hàng mới khi vượt
quá số lượng cột của container.
• Để bắt buộc tạo hàng mới, bạn có thể thêm vào các thẻ div có class=”clear”.
• Ví dụ sao tạo ra một lưới với ba hàng. Bạn sẽ thấy hàng thứ hai mặc dù chỉ có một thẻ
div rộng 140px nhưng nó vẫn xuống hàng mới.

7. Giới thiệu hệ thống lưới
Trần Trương Long Hải
• Push
và
Pull
• Mặc định các ô trong lưới sẽ nằm cách nhau theo chiều ngang một khoảng cố
định là 20px. Tuy nhiên bạn có thể muốn “đẩy” (push) hoặc “kéo” (pull) một ô
nào đó để nó nằm đè lên ô khác nhằm tạo ra một layout linh hoạt. Grid
System cung cấp cho bạn các class có tên là push_x và pull_x (x là số cột).
• Ví dụ:
push_2: đẩy về bên phải 2 cột.
pull_2: kéo sang bên trái 2 cột.
• Prefix
và
Suffix
• Quy định khoảng cách trước và sau giữa các ô.
• Ví dụ: prefix_1, suffix_2
• Alpha
và
Omega
• alpha: loại bỏ margin phía trước.
• omega: loại bỏ margin phía sau.

8. Nội dung chính
1. Giới thiệu hệ thống lưới
2. Giới thiệu các frameworks và tools
3. Bootstrap framework
4. Images
5. Email template
Trần Trương Long Hải

9. Frameworks & Tools
Trần Trương Long Hải
PURECSS
h.p://purecss.io/

10. Frameworks & Tools
Bootstrap
h.p://getbootstrap.com/

11. Frameworks & Tools
Trần Trương Long Hải
Skeleton
h.p://www.getskeleton.com/

12. Frameworks & Tools
Trần Trương Long Hải
FoundaHon
h.p://founda>on.zurb.com/

13. Frameworks & Tools
Trần Trương Long Hải
Animate.css
h.p://daneden.github.io/animate.css/

14. Frameworks & Tools
Trần Trương Long Hải
Bootstrap
Editor
h.p://www.bootply.com/

15. Nội dung chính
1. Giới thiệu hệ thống lưới
2. Giới thiệu các frameworks và tools
3. Bootstrap framework
4. Images
5. Email template
Trần Trương Long Hải

16. Bootstrap framework
Trần Trương Long Hải
Grid
System

17. Bootstrap framework
Trần Trương Long Hải
• Bootstrap quy định các hàng
(.row) phải nằm trong
lớp .container hoặc
lớp
.container-fluid
• Nếu bạn bao các hàng bằng
lớp container thì chiều rộng
của lớp container của các thiết
bị khác nhau được cho ở bảng
trên. Còn nếu dùng container-
fluid thì chiều rộng của nó sẽ
full-width.
Grid
System

18. Bootstrap framework
Trần Trương Long Hải
Offset
Theo mặc định hàng trên sẽ nằm sát lề trái của container. Vậy làm sao để dịch chuyển
nó sang bên phải hoặc căn ra giữa container? Khi đó bạn hãy thêm lớp .col-md-offset-
$. Với $ là một số từ 0 đến 12 , chỉ số cột được căn lề trái margin-left ( chính là số cột
dịch sang phải). Nếu $ lớn hơn 12 coi như là 0.

19. Bootstrap framework
Trần Trương Long Hải
Push/Pull
Bạn có thể thay đổi thứ tự các thành phần trong hệ thống cột bằng cách đẩy nó sang
phải
(push) hoặc kéo nó sang trái
(pull) bằng cách sử dụng các lớp col-md-push-$ và
col-md-pull-$

20. Bootstrap framework
Trần Trương Long Hải
• Offset căn lề bằng cách sử dụng margin-left còn push căn lề sử dụng left.
• Và khi sử dụng offset các cột được offset sẽ đẩy dồn các cột bên phải nó còn
nếu dùng push và pull thì các cột này sẽ chồng chéo lên các cột khác kề phía
mà nó dịch chuyển.
Sự
khác
biệt
giữa
Offset
và
Push/Pull

21. Bootstrap framework
Trần Trương Long Hải
Typography
• Heading
Các thẻ h1, h2, h3, h4, h5, h6 có font-size lần lượt là 36px, 30px, 24px, 18px,
14px, 12px. Bạn cũng có thể dùng các class .h1, .h2, .h3 ….. trong các thẻ p để
định dạng như các thẻ h1, h2, h3,…..
• Căn
lề
Để căn lề trái, phải, trung tâm hay đều hai bên ta dùng các class .text-left, text-
right, text-center, text-justify
• List
Nếu
bạn
muốn
hủy
list-­‐style
cho
list
thì
add
thêm
class
.list-­‐unstyled
Nếu
muốn
các
list
item
nằm
trên
cùng
block
thì
dùng
.list-­‐inline

22. Bootstrap framework
Trần Trương Long Hải
• Form
• Bu.on
• Table

23. Bootstrap framework
Trần Trương Long Hải
• Glyphicons
• Bu.on
Groups
• Dropdowns
Menu
• Naviga>on
• Navbar
• Panel
• Thumbnails
• Modal
(modal.js)
• Tool>p
(tool>p.js)
• Collapse
(collapse.js)

24. Nội dung chính
1. Giới thiệu hệ thống lưới
2. Giới thiệu các frameworks và tools
3. Bootstrap framework
4. Images
5. Email template
Trần Trương Long Hải

25. Images
Trần Trương Long Hải

26. Nội dung chính
1. Giới thiệu hệ thống lưới
2. Giới thiệu các frameworks và tools
3. Bootstrap framework
4. Images
5. Email template
Trần Trương Long Hải

27. Email Template
Trần Trương Long Hải
• Media
Queries
• Bu.ons
• Images
• Text
Size
• Layout
• Yahoo!Fix

28. Questions & Answers
Trần Trương Long Hải

29. Xin cảm ơn
Trần Trương Long Hải