Giới thiệu về Responsive web design và Grid System trong Twitter Bootstrap

Từ khi có nhiều thiết bị thông minh ra đời như điện thoại, tablet hỗ trợ người dùng xem các trang web trực tiếp trên các trình duyệt được tích hợp, các frontend developer lại phải đối mặt với những vấn đề về layout cho web, làm sao web có thể hiển thị tốt cả trên browser của desktop và mobile? Một định nghĩa mới ra đời để giải quyết vấn đề này, đó là Responsive design.Responsive là gì?Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Một website đẹp trên máy tính nhưng khi xem trên điện thoại bố cục lộn xộn, hình ảnh, bài viết không cân đối thì không thể gọi là Web ResponsiveVí dụ về Web Responsive: Bạn mở trang chủ website Responsive, rồi thu nhỏ trình duyệt hoặc đổi độ phân giải màn hình, bạn sẽ thấy website của mình không hề xuất hiện Scrollbar ngang, mà nó sẽ tự động co dãn sao cho phù hợp với chiều rộng màn hình máy tính bạn.Hoặc đơn giản và hay bắt gặp nhất là khi bạn sử dụng các thiết bị cảm ứng để lướt web thì với chế độ xoay thiết bị thì hình ảnh , trang web của bạn sẽ chuyển đổi một cách uyển chuyển sang chế độ hiện thị khác. Nó không chỉ đẹp mắt và phù hợp hơn với màn hình mới mà nó còn tạo hiệu ứng tốt cho người dùng, tất nhiên đó là điều bạn rất cần cho 1 web site của mình đúng không ?Lợi ích của Responsive Web DesignĐược Google khuyến khích, cải thiện SEO : Chỉ cần tối ưu một website (không phải là 2 như lúc trước) thì giá trị tích lũy về link, PageRank, Page Authority từ Google search và Google mobile search đều tích lũy thành 1.Vô cùng tương thích, một Website, nhiều DeviceNâng cao trải nghiệm cho người dùng: cung cấp các trải nghiệm người dùng tối ưu bất kể họ sử dụng một máy tính để bàn, một điện thoại thông minh, máy tính bảng hay một smart-TV.Tiết kiệm chi phí: So với việc phải thiết kế 2 phiên bản web riêng biệt cho điên thoại và PC thì thiết kế 1 trang web tương thích với tất cả thiết bị sẽ tiết kiệm hơn là điều đương nhiên.Dễ dàng trong việc quản lý: Việc quản trị duy nhất một website sẽ giúp bạn tiết kiệm công sức và thời gian hơn.Twitter Bootstrap là gì?Twitter Bootstrap 3, hay gọi tắt là Bootstrap. Với Bootstrap3 bạn hoàn toàn không phải quá lo lắng về vấn đề giao diện, chỉ cần một chút kiến thức về HTML và sự hỗ trợ của Bootstrap bạn hoàn toàn có thể tạo ra một trang web đẹp mắt dù mới học qua về CSS.Vậy Bootstrap là gì? Tại sao nó lại phổ biến và được ưa chuộng đến thế? Bootstrap là một CSS Framework do Twitter phát triển, nó là bộ công cụ giúp thiết kế trang web bằng css nhanh hơn, thay vì bạn phải hiểu rõ các bộ chọn, các thuộc tính và giá trị trong CSS, thì bạn chỉ cần biết các thành phần form, navbar, dropdown, button,.. và add nó vào trang html của mình một cách hợp lý để có được giao diện ưng ý khách hàng.http://getbootstrap.com/Giới thiệu Grid system trong BootstrapGrid systems là 1 hệ thống của Bootstrap, tạo ra với 12 cột trong một trang nội dung và tự động sắp xếp theo kích thước hiển thị của thiết bị (Desktop, Tablet, Phone…), từ đó chúng ta dễ dàng phân bố cục cho Bootsrap theo thiết kế Reponsive. Cách hoạt động của grid system:Mỗi một hàng, phải được bao bọc bởi class .container (cố định kích thước rộng là 768px) hoặc .container-fluid (không giới hạng chiều rộng) để canh giữa và cách khoảng cách lề.Mỗi một hàng gồm các nhóm cột.Nội dung nằm trong cột, mỗi cột có thể chứa 12 cột con khác.Giữa các cột sẽ có khoảng padding (đệm). Khoảng đệm của cột đầu và cuối sẽ được quy định bởi .rows.Nếu có nhiều hơn 12 cột trên một hàng thì mỗi nhóm 12 cột sẽ cố định và phần dư sẽ được chuyển sang hàng mới.Grid system được đinh nghĩa với các kích thước màn hình khác nhau mà hiển thi khác nhau. Ví dụ ta có lớp .col-md- sẽ không hiển thị đúng cột nếu màn hình cỡ lớn và .col-lg- sẽ không áp dụng nếu bạn đang xem bằng màn hình cỡ vừa.span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1 span 4 span 4 span 4span 4span 8span 6span 6span 12Các lớp tùy chọn của Grib System được quy định bởi bảng sau: Màn hình nhỏ nhấtPhones (<768px)Màn hình nhỏTablets (≥768px)Màn hình vừaDesktops (≥992px)Màn hình lớpDesktops (≥1200px)Trạng tháiMọi thời điểmTự động hiển thị theo màn hìnhĐộ rộngKhông (tự động)750px970px1170pxTên lớp.col-xs-.col-sm-.col-md-.col-lg-Số cột12Độ rộng mỗi cộtTự động~62px~81px~97pxKhoảng cách30px (15px bên)NestablecóOffsetsCóColumn orderingCóLàm việc với BootstrapTrước khi sử dụng, bạn cần phải nạp các file của bootstrap vào file html (dùng thẻ <link> hoặc load trong css).Vào trang chủ bootstrap và chọn Download các file tương ứngSử dụng Bootstrap từ CDNCác sử dụng Bootstrap từ CDN<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> Ví dụ cách sử dụng, sau đây là một file html đầy đủ<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>LvDuit Developer</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">    </head> <body> <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script> </body></html>Kết quả bạn thu đượcOk, giờ bạn sẽ thấyBao quanh cả page sẽ là class .container Trong container, sẽ là các cột (.col-md-) đánh số từ 1 đến 12, bạn chọn tỉ lệ này cho phù hợp, miễn sao tổng các col trên 1 row là 12.Nếu các col trên cùng 1 row lớp hơn 12, thì các col đó sẽ bị tràn xuống bên dưới.Ví dụ 2: Giờ tìm hiểu một ví dụ khác<div class="row"> <div class="col-sm-6 col-md-8"></div> <div class="col-sm-6 col-md-4"></div></div>Mình sẽ tạo ra 2 divKhi bạn xem trên một thiết bị có kích thước màn hình >=992px (md) thì 2 div trên sẽ có kích thước 8 phần và 4 phần.Nhưng khi xem trên thiết bị có kích thước màn hình <992px (sm) thì 2 div trên sẽ điều chỉnh kích thước lại thành 2 ô bằng nhau tức là 6 phần và 6 phầnTức là Bootstrap sẽ chia ra thành 12 ô nằm ngang chúng ta phải tự tính toán và khai báo cho đúng ví chia màn hình ra làm 3 phần thì sẽ có 3 col-md-4 chứ không thể nào 3 col-md-6 được nhé.Ngoài ra tùy vào bạn muốn tùy biến cách hiển thị ở mỗi kich thước màn hình khác nhau sẽ cho bố cục khác nhau thì khai báo kết hợp giữa các xs, sm, md, lg như ví dụ trên nhưng nên không có nhiều thay đổi thì cứ dùng col-md là đượcSử dụng offsetMột câu hỏi tiếp tục được đặt ra khi làm giao diện là bạn muốn một thành phần nào đó hiển thị cách ra 1 khoảng so với thành phần kia thì sao ?Nếu xử lý bằng cách khai báo lại giá trị margin cho các col thì sẽ dẫn đến giao diện sẽ không còn đúng chuẩn nữa. Trong trường hợp này các bạn nên khai báo thêm class: col-**-offset- trong đó**: là 4 giá trị xs, sm, md và lag* : là giá trị từ 1 đến 12.Ví dụ: col-md-offset-4 tức là cột này sẽ thụt vào trong 1 khoảng bằng 4 col md.<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div>Media QueriesMedia Queries cũng là một chức năng hay mang lại độ tùy biến cao cho giao diện khi làm Responsive nên mình quyết định đưa nào vào bài viết.Media Queries là giúp bạn tùy biến code CSS ứng với kích thước trình duyệt nhất định. Chẳng hạn như bạn chia một trang web thành cột với 2 div nhưng khi bạn muốn xem trang web trên thiết bị di độngthì 1 cột sẽ ẩn đi chỉ còn 1 cột thì lúc này bạn có thể dùng Media Queries để làm điều đó.Tuy nhiên, Media Queries chỉ sử dụng được khi bạn dùng LESS để viết CSS. Nếu chưa biết khái niệm này thì bạn có thể không cần xem phần này mà hãy tìm hiểu cách Dùng LESS viết CSS trước.Cú pháp của Media Queries dạng như sau:/* Extra small devices (phones, less than 768px) // No media query since this is the default in Bootstrap // Small devices (tablets, 768px and up) /@media (min-width: @screen-sm-min) { ... }/ Medium devices (desktops, 992px and up) /@media (min-width: @screen-md-min) { ... }/ Large devices (large desktops, 1200px and up) */@media (min-width: @screen-lg-min) { ... }Sử dụng max-width để giới hạn chiều rộng lại @media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }Kết Bootstrap là một công cụ tuyệt vời giúp các bạn thiết kiệm rất nhiều thời gian khi thiết kế một giao diện Website.Mình chỉ giới thiệu bạn về Grib System thôi còn rất nhiều tính năng, thư viện có sẵn thú vị khác đang chờ bạn khám phá như các components, font icon, kiểu chữ, hiệu ứng, , menu,…. Mình sẽ giới thiệu chúng ở các bài viết sau này.Truy cập vào đây để xem thêm: CSS Bootstrap, Components Booststrap, Javascript Bootstrap…

Giới thiệu về Responsive web design và Grid System trong Twitter Bootstrap

Resources

Profile

Open to Work