Approach to Responsive Web Design - Part 2

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


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.



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



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 …



•  Để 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.



•  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


Frameworks & Tools


PURECSS h.p://purecss.io/

Frameworks & Tools

Bootstrap h.p://getbootstrap.com/

Frameworks & Tools


Skeleton h.p://www.getskeleton.com/

Frameworks & Tools


FoundaHon h.p://founda>on.zurb.com/

Frameworks & Tools


Animate.css h.p://daneden.github.io/animate.css/

Frameworks & Tools


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


Bootstrap framework


Grid System

Bootstrap framework


•  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


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


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


•  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


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


•  Form

•  Bu.on

•  Table

Bootstrap framework


•  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


Images


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


Email Template


•  Media Queries

•  Bu.ons

•  Images

•  Text Size

•  Layout

•  Yahoo!Fix

Questions & Answers


Xin cảm ơn
