Hướng dẫn thiết kế web thích ứng với Bootstrap CSS

Hướng dẫn thiết kế web thích ứng với Bootstrap CSS
      Accelerated Mobile Pages

Tài liệu thiết kế web thích ứng với Bootstrap CSS do Twitter phát triển. Đây sẽ là hướng dẫn thiết kế web hữu ích cho dự án web tiếp theo của bạn.

Bootstrap đang là CSS Framework được sử dụng phổ biến hiện nay do Twitter phát triển. Với việc tập trung vào các thiết kế web thích ứng, Bootstrap CSS hỗ trợ khả năng responsive tuyệt vời, tương thích tốt với các thiết bị cỡ nhỏ. Cùng xem những tài liệu thiết kế web dưới đây có thể giúp bạn trong dự án tiếp theo của mình.

tai lieu huong dan thiet ke web thich ung bootstrap css
Tài liệu hướng dẫn thiết kế web thích ứng với Bootstrap CSS

Nếu dạo 1 vòng những [website] hoặc blogger khác, bạn có thể thấy giao diện sử dụng Bootstrap rất nhiều. Bạn có thể nhanh chóng tạo 1 giao diện web bằng cách sử dụng các component của bootstrap, giúp bạn tránh việc lặp đi lặp lại quá trình tạo ra các lớp [CSS] và những đoạn mã [HTML] giống nhau. Chúng ta hãy cùng xem xét một số lời khuyên thiết kế web thích ứng với Bootstrap CSS.

Xác định đúng thiết bị truy vấn

Bootstrap đã xác định rõ ràng các điểm dừng cho các loại thiết bị khác nhau, cụ thể bằng cách sử dụng phương tiện truyền thông truy vấn CSS. Sau đây là một vài điểm dừng cụ thể được sử dụng cho các loại thiết bị khác nhau.

1. Extra small devices (ví dụ như điện thoại di động) là mặc định, là khái niệm “mobile first” được tạo ra trong Bootstrap. Bao gồm các điện thoại có kích thước nhỏ hơn 768px
2. Small devices (ví dụ như máy tính bảng) được sử dụng với @media (min-width: 768px) and (max-width: 991px) { ... }.
3. Medium Sized Devices (ví dụ như máy tính để bàn) có kích thước màn hình nhỏ hơn 1200px và lớn hơn 991px, sử dụng media (min-width: 992px) and (max-width: 1999px) {...} .
4. Larger Devices là các thiết bị lớn hơn 1200px, nhắm mục tiêu sử dụng @media (min-width: 1200px) { ... }.

Chú ý: các thiết bị di động mà chúng ta sử dụng ngày nay đi kèm với 2 định hướng màn hình khác nhau là Portrait và Landscape. Vì vậy, ở trên là hầu hết đều chính xác với duy nhất màn hình Landscape. Ví dụ, nếu bạn đang sử dụng điện thoại Samsung Galaxy Note III, nếu sử dụng cái định hướng Landscape sẽ rơi vào “Small devices” trong khi sử dụng định hướng Portrait thì rơi vào “Extra Small Devices”.

Các phân loại này phổ biến trong framework responsive và bạn có thể chắc chắn rằng mình sẽ nắm rõ hơn các khái niệm này.

Grid System

Nếu bạn đã quá quen thuộc với Grid System của Bootstrap, thì bạn có thể biết rằng một cấu trúc HTML cụ thể cần thiết để thiết lập đúng cách trên grid.

Đầu tiên hãy nhìn HTML Bootstrap dành cho thiết lập hai cột bên dưới

Column 1

Column 2


Như trình bày ở trên, grid Systems của Bootstrap bắt đầu với một yếu tố container. Container xác định bao nhiêu không gian mà một hệ thống grid nên sử dụng. Chúng có thể có hai loại: .container có độ rộng khác nhau với các thiết bị khác nhau, trong khi .container-fluid thì mở rộng để phù hợp với chiều rộng của các thiết bị.

Với sự hỗ trợ của các phương tiện truy vấn, Bootstrap có các độ rộng khác nhau cho .container tùy thuộc vào kích thước của thiết bị.

- Extra small devices (<768px): width: auto (hoặc không có)
- Small devices (>=768px): width: 750px
- Medium Devices (>99spx): width: 970px
- Larger Devices (>=1200px): width: 1170px

Dưới đây là một CSS được áp dụng cho lớp .container

.container {    padding-right: 15px;    padding-left: 15px;    margin-right: auto;    margin-left: auto;  }  
container thiet ke web thich ung bootstrap css

Như đã thấy ở hình trên, các .container ngăn chặn các nội dung bên trong các yếu tố tạm vào các cạnh của trình duyệt bằng cách sử dụng [padding] 15px cho mỗi bên.

Hàng là một yếu tố quan trọng trong hệ thống grid của Bootstrap. Trước khi tạo cột, bạn có thể xác định một hàng sử dụng các lớp .row. dưới đây là một đoạn trích từ bootstrap CSS cho các lớp .row .

.row {    margin-right: -15px;    margin-left: -15px;  }  

Như đã trình bày ở trên, hàng có tiêu cực lề trái và phải là -15px để cho phép hàng chạm vào cạnh của các [container element] của nó. Điều này đóng vai trò như một vỏ bọc để giữ cột, trong đó có thể tăng lên đến 12 cột.

row container thiet ke web thich ung

Bạn có thể nhận thấy rằng các margins trên row dường như đang được padding 15px áp dụng cho các container. Nếu chúng ta phân tích các cột, chúng ta có thể thấy tại sao điều này là cần thiết.

Dưới đây là một đoạn trích từ Bootstrap CSS cho các lớp .col-xs-6

.col-xs-6 {    padding-right: 15px;    padding-left: 15px;  }  

Như đã trình bày ở trên, bên trái và bên phải của padding 15px được áp dụng cho các cột, kết quả là hình ảnh giống như bên dưới.

tong hop thiet ke web thich ung

Do margin âm trên hàn, các cột được chạm và các cạnh của hàng và các cạnh container. Nhưng padding là nguyên nhân khiến cho các nội dung đi vào bên trong các cột này để duy trì khoảng cách 15px so với các cạnh của container.

Container được sử dụng cho nhiều mục đích, không chỉ có hệ thống grid, do đó padding 15px giúp tránh nội dung chạm vào các cạnh của trình duyệt (khi sử dụng .container-fluid ). Hàng có margin âm để chúng không bị đẩy bởi các padding của container.

Nếu bạn đang xem xét thiết kế framework, bạn có thể muốn xem xét việc sử dụng kỹ thuật padding hoặc margin.

Xác định độ rộng cột thích hợp


Bootstrap sử dụng tỷ lệ % là đơn vị để xác định độ rộng của cột. Như đã nếu ở trên, có 4 loại thiết bị khác nhau dựa trên các điểm dừng của px. Mỗi loại đều có các kích thước khác nhau của các cột.

1. Extra small devices sử dụng .col-xs- *
2. Small devices sử dụng .col-sm- *
3. Medium devices .col-MD- * .
4. Larger devices sử dụng .col-lg- * .

Các ký tự sao (* ) được thay thế bằng một con số. Ví dụ, .col-xs-6 tạo ra một cột có kích thước gấp 6 lần so với kích thước của cột .col-xs-1, cột .col-sm-4 tạo ra một cột có kích thước gấp 4 lần so với của .col-sm-1..

Theo mặc định, tất cả các cột không có thiết lập chiều rộng, mặc định là width: auto. Tuy nhiên, đối với các phương tiện truy vấn, Bootstrap đều có các chiều rộng cho mỗi lớp cột.

Dưới đây là một đoạn trích từ Bootstrap CSS cho các lớp cột với dấu hoa thị thay thế các kích thước cho ngắn gọn:

.col-*-12 {    width: 100%;  }     .col-*-11 {    width: 91.66666667%;  }     .col-*-10 {    width: 83.33333333%;  }     .col-*-9 {    width: 75%;  }     .col-*-8 {    width: 66.66666667%;  }     .col-*-7 {    width: 58.33333333%;  }     .col-*-6 {    width: 50%;  }     .col-*-5 {    width: 41.66666667%;  }     .col-*-4 {    width: 33.33333333%;  }     .col-*-3 {    width: 25%;  }     .col-*-2 {    width: 16.66666667%;  }     .col-*-1 {    width: 8.33333333%;  }  

Hãy phân tích đoạn mã trên. Một lớp .col-lg-6 sẽ có chiều rộng 50% trong các thiết bị lớn nhưng khi ở thiết bị medium, small hay extra small thì mặc định width: auto được sử dụng. Điều này đảm bảo rằng các cột sẽ được chuyển đổi để bố trí xếp chồng lên nhau (chứ không phải cạnh nhau) trong các thiết bị nhỏ hơn.

Responsive Tables

Tables, được sử dụng để hiển thị dữ liệu dạng bảng, cũng là thích ứng trong Bootstrap.

Để sử dụng style table trong Bootstrap, chúng ta sử dụng lớp .table, trong đó có CSS sau đây:

.table { width: 100%; max-width: 100%; margin-bottom: 20px; }

Bootstrap điều chỉnh bảng để phù hợp với chiều rộng của phần tử cha mẹ bằng cách áp dụng một chiều rộng từ 100%. Tuy nhiên, một bảng nhiều cột sẽ không hiển thị đầy đủ trên các thiết bị nhỏ và có thể không đọc được.

Bootstrap có một lớp để khắc phục điều này: table-responsive. Dưới đây là CSS

.table-responsive {    width: 100%;    overflow-x: auto;    overflow-y: hidden;    -webkit-overflow-scrolling: touch;    -ms-overflow-style: -ms-autohiding-scrollbar;    border: 1px solid #ddd;  }  

Những styles này sẽ giúp bảng trở thành cuộn trên trục ngang trên các thiết bị nhỏ hơn.

Hình ảnh responsive

Các hình ảnh lớn có thể là vấn đề đối với các thiết bị nhỏ. Bootstrap sử dụng một lớp img-responsive để thực hiện thích ứng cho bất kỳ hình ảnh.

.img-responsive {    display: block;    max-width: 100%;    height: auto;  }  

Sự kết hợp của max-width: 100% và height: auto sẽ đảm bảo những hình ảnh được thu hẹp tương ứng với các thiết bị nhỏ hơn, trong khi ở trong vòng ràng buộc của các yếu tố parents trên các thiết bị lớn hơn.

Kết luận

Các hướng dẫn thiết kế web thích ứng chỉ là một số lời khuyên từ Bootstrap 3. Nếu có bất kỳ điều gì khác trong mã nguồn của họ không được đề cập ở trên, hãy chia sẻ ý kiến với Vivicorp ở bên dưới.

Xem thêm: 11 công cụ web hỗ trợ thiết kế web Responsive hiệu quả

Column 1

Column 2