approach to responsive web design - part 2
DESCRIPTION
Cái nhìn tổng quan về thiết kế tương tác và cách tiếp cận.TRANSCRIPT
![Page 1: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/1.jpg)
Hải Trần Tháng 7/2014
RESPONSIVE WEB DESIGN Part 2
![Page 2: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/2.jpg)
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
![Page 3: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/3.jpg)
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.
![Page 4: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/4.jpg)
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
![Page 5: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/5.jpg)
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 …
![Page 6: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/6.jpg)
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.
![Page 7: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/7.jpg)
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.
![Page 8: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/8.jpg)
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
![Page 9: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/9.jpg)
Frameworks & Tools
Trần Trương Long Hải
PURECSS h.p://purecss.io/
![Page 10: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/10.jpg)
Frameworks & Tools
Bootstrap h.p://getbootstrap.com/
![Page 11: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/11.jpg)
Frameworks & Tools
Trần Trương Long Hải
Skeleton h.p://www.getskeleton.com/
![Page 12: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/12.jpg)
Frameworks & Tools
Trần Trương Long Hải
FoundaHon h.p://founda>on.zurb.com/
![Page 13: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/13.jpg)
Frameworks & Tools
Trần Trương Long Hải
Animate.css h.p://daneden.github.io/animate.css/
![Page 14: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/14.jpg)
Frameworks & Tools
Trần Trương Long Hải
Bootstrap Editor h.p://www.bootply.com/
![Page 15: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/15.jpg)
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
![Page 16: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/16.jpg)
Bootstrap framework
Trần Trương Long Hải
Grid System
![Page 17: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/17.jpg)
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
![Page 18: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/18.jpg)
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.
![Page 19: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/19.jpg)
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-$
![Page 20: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/20.jpg)
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
![Page 21: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/21.jpg)
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
![Page 22: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/22.jpg)
Bootstrap framework
Trần Trương Long Hải
• Form
• Bu.on
• Table
![Page 23: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/23.jpg)
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)
![Page 24: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/24.jpg)
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
![Page 25: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/25.jpg)
Images
Trần Trương Long Hải
![Page 26: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/26.jpg)
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
![Page 27: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/27.jpg)
Email Template
Trần Trương Long Hải
• Media Queries
• Bu.ons
• Images
• Text Size
• Layout
• Yahoo!Fix
![Page 28: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/28.jpg)
Questions & Answers
Trần Trương Long Hải
![Page 29: Approach to Responsive Web Design - Part 2](https://reader034.vdocuments.net/reader034/viewer/2022052622/558e2f4a1a28ab3b618b4614/html5/thumbnails/29.jpg)
Xin cảm ơn
Trần Trương Long Hải