approach to responsive web design - part 2
Post on 27-Jun-2015
296 Views
Preview:
DESCRIPTION
TRANSCRIPT
Hải Trần Tháng 7/2014
RESPONSIVE WEB DESIGN Part 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
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.
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
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 …
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.
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.
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
Frameworks & Tools
Trần Trương Long Hải
PURECSS h.p://purecss.io/
Frameworks & Tools
Bootstrap h.p://getbootstrap.com/
Frameworks & Tools
Trần Trương Long Hải
Skeleton h.p://www.getskeleton.com/
Frameworks & Tools
Trần Trương Long Hải
FoundaHon h.p://founda>on.zurb.com/
Frameworks & Tools
Trần Trương Long Hải
Animate.css h.p://daneden.github.io/animate.css/
Frameworks & Tools
Trần Trương Long Hải
Bootstrap Editor h.p://www.bootply.com/
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
Bootstrap framework
Trần Trương Long Hải
Grid System
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
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.
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-$
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
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
Bootstrap framework
Trần Trương Long Hải
• Form
• Bu.on
• Table
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)
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
Images
Trần Trương Long Hải
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
Email Template
Trần Trương Long Hải
• Media Queries
• Bu.ons
• Images
• Text Size
• Layout
• Yahoo!Fix
Questions & Answers
Trần Trương Long Hải
Xin cảm ơn
Trần Trương Long Hải
top related