Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Approach to Responsive Web Design - Part 2

651 views

Published on

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

Published in: Design
  • Be the first to comment

Approach to Responsive Web Design - Part 2

  1. 1. Hải Trần Tháng 7/2014 RESPONSIVE WEB DESIGN Part 2
  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. 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. 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. 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. 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. 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. 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. 9. Frameworks & Tools Trần Trương Long Hải PURECSS   h.p://purecss.io/  
  10. 10. Frameworks & Tools Bootstrap   h.p://getbootstrap.com/  
  11. 11. Frameworks & Tools Trần Trương Long Hải Skeleton   h.p://www.getskeleton.com/  
  12. 12. Frameworks & Tools Trần Trương Long Hải FoundaHon   h.p://founda>on.zurb.com/  
  13. 13. Frameworks & Tools Trần Trương Long Hải Animate.css   h.p://daneden.github.io/animate.css/  
  14. 14. Frameworks & Tools Trần Trương Long Hải Bootstrap  Editor   h.p://www.bootply.com/  
  15. 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. 16. Bootstrap framework Trần Trương Long Hải Grid  System  
  17. 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. 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. 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. 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. 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. 22. Bootstrap framework Trần Trương Long Hải •  Form   •  Bu.on   •  Table  
  23. 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. 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. 25. Images Trần Trương Long Hải
  26. 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. 27. Email Template Trần Trương Long Hải •  Media  Queries   •  Bu.ons   •  Images   •  Text  Size   •  Layout   •  Yahoo!Fix  
  28. 28. Questions & Answers Trần Trương Long Hải
  29. 29. Xin cảm ơn Trần Trương Long Hải

×