Bootstrap là một CSS framework do Twitter phát triển. Lướt qua những trang web bán theme website như Themeforest.net, bạn có thể thấy hàng nghìn template được thiết kế bằng bootstrap. Điều này cho thấy sự tiện dụng và phổ biến của Bootstrap.
Bootstrap định nghĩa sẵn các CSS class giúp bạn xây dựng một trang web nhanh hơn. Điểm mạnh của Bootstrap là tính năng responsive và mobile first, nghĩa là trang web của bạn có thể tự co giãn để tương thích với mọi thiết bị khác nhau, từ điện thoại di động đến máy tính bảng, máy tính xách tay, máy tính để bàn,...
Trong bài viết này, mình sẽ giới thiệu với các bạn về tính năng responsive - tính năng tuyệt vời nhất của Boostrap.
Tải về Bootstrap
Bạn có thể tải về Bootstrap tại http://getbootstrap.com/getting-started/#download hoặc có thể sử dụng Bootstrap tại CDN
Tạo template cơ bản
Bạn hãy tạo một file bootstrap.html như đoạn mã dưới đây:
<!DOCTYPE html>
<html>
<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>Bootstrap responsive</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Bootstrap responsive</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Mình giới thiệu về các thư viện được sử dụng trong đoạn mã HTML trên
bootstrap.min.css, bootstrap.min.js: Các thư viện của Bootstrapjquery.min.js: Thư viện jQuery, bắt buộc phải có để Bootstrap hoạt độnghtml5shiv.min.js, respond.min.js: Các thư viện javascript dùng để hỗ trợ HTML5 và tính năng responsive trên các trình duyệt IE 8 hoặc thấp hơn.Container
Để sử dụng grid system của Bootstrap bạn phải sử dụng một phần tử bao ngoài hệ thống grid đó. Bạn có thể sử dụng lớp
.container hoặc .container-fluid để làm việc này. Sử dụng lớp .container nếu bạn muốn layout của bạn có chiều rộng giới hạn và .container-fluid sẽ cho một layout có chiều rộng bằng chiều rộng của màn hình thiết bị.Grid system
Bootstrap chia một dòng thành 12 cột. Để tính năng responsive có thể hoạt động, từ bây giờ, khi thiết kế một phần tử bạn chỉ cần quan tâm xem nó sẽ có độ rộng là bao nhiêu cột mà thôi (hãy bỏ qua các khái niệm về kích thước như pixel, point, em,...)
Tùy theo độ phân giải của thiết bị, Bootstrap phân các thiết bị ra 4 loại gồm: Extra small devices, Small devices, Medium devices và Large devices. Bạn hãy nhìn bảng dưới đây để thấy cách thức Bootstrap grid system hoạt động:
| Extra small devices Điện thoại (< 768px) | Small devices Máy tính bảng ( ≥ 768px) | Medium devices Máy tính (≥ 992px) | Large devices Máy tính (≥ 1200px) | |
|---|---|---|---|---|
| Grid behavior | Các cột nằm trên một dòng với mọi thiết bị | Các cột sẽ nhảy dòng tùy vào chiều rộng của thiết bị | ||
| Độ rộng container | Tự động | 750px | 970px | 1170px |
| Class | .col-xs-* | .col-sm-* | .col-md-* | .col-lg-* |
| Độ rộng cột | Tự động | ~62px | ~81px | ~97px |
| Số cột trên 1 dòng | 12 | |||
Những thông tin trên bảng trên vẫn có vẻ hơi trừu tượng, bây giờ ta đi vào một ví dụ cụ thể. Giả sử bạn cần thiết kế một layout cho blog gồm 2 cột: cột bên trái (main content) có độ rộng gấp đôi cột bên phải (sidebar). Vì Bootstrap chia 1 dòng thành 12 cột nên cột bên trái của bạn sẽ bằng 8 đơn vị cột của Bootstrap và cột bên phải là 4 đơn vị cột của Bootstrap. Mình sẽ sử dụng 2 dòng để cho các bạn thấy sự khác biệt của các class đối với các thiết bị khác nhau, các bạn hãy xem đoạn mã dưới đây:
<!DOCTYPE html>
<html>
<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>Bootstrap responsive</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.bordered {
border: 1px solid #0094ff;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Bootstrap responsive</h1>
<div class="row">
<div class="col-xs-8 bordered">.col-xs-8</div>
<div class="col-xs-4 bordered">.col-xs-4</div>
</div>
<div> </div>
<div class="row">
<div class="col-md-8 bordered">.col-md-8</div>
<div class="col-md-4 bordered">.col-md-4</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Như các bạn thấy, dòng thứ nhất mình có 2 cột với class tương ứng là
.col-xs-8 và .col-xs-4, dòng thứ hai mình có 2 cột với các class .col-md-8 và .col-md-4. Mình thêm class .bordered vào các cột để dễ dàng nhận biết các cột khi hiển thị trên trình duyệt.
Bây giờ bạn hãy bật trình duyệt web và chạy đoạn mã HTML trên. Nếu sử dụng Firefox, bạn hãy bấm tổ hợp phím Ctrl + Shift + M để chuyển sang chế độ Responsive Design View. Bạn hãy thay đổi chiều rộng của khung hiển thị với các kích thước khác nhau:
Với chiều rộng 1280px (tương ứng với Large Devices), như bạn thấy trong hình trên, cả 2 trường hợp đều cho các cột nằm trên cùng 1 dòng.
Thu nhỏ phần hiển thị xuống chiều rộng 1024px
Như bạn thấy, cả 2 trường hợp đều cho các cột vẫn nằm ngay ngắn trên một dòng.
Thu nhỏ phần hiển thị xuống chiều rộng 800px
Lúc này bạn đã thấy sự khác biệt xảy ra. Chiều rộng 800px tương ứng với small device, Vì các cột tại dòng dòng thứ 2 của chúng ta được áp dụng class
.col-md-* nên cột thứ 2 của dòng này sẽ bị đẩy xuống dưới và chiếm chiều rộng của toàn bộ dòng 2. Trong khi đó thì dòng 1 vẫn responsive tốt.
Thay đổi chiều rộng xuống 640px (tương ứng với extra small device)
Bạn sẽ thấy trường hợp 1 vẫn responsive tốt và có sự nhảy dòng ở trường hợp 2.
Đến đây thì các bạn đã hiểu về nguyên lí thiết kế responsive của Bootstrap rồi chứ? Vì vậy, tùy vào mục đích thiết kế, cách thể hiện nội dung trên các thiết bị mà các bạn sẽ phải chọn ra class hợp lí cho cột của mình.
Offset column
Bootstrap cung cấp thêm tính năng offset column để các bạn có thể thiết kế layout thuận tiện hơn. Các bạn có thể áp dụng các class
.col-xs-offset-*, .col-sm-offset-*, .col-md-offset-*, .col-lg-offset-* (trong đó * có thể từ 0 đến 12) để dịch chuyển cột của bạn sang phải * đơn vị cột của Bootstrap. VD, đoạn mã dưới đây sẽ tạo đối tượng có độ rộng 4 cột và cách lề trái 4 cột:<div class="row">
<div class="col-md-offset-4 col-md-4"></div>
</div>Ảnh responsive
Bootstrap cũng cung cấp một class để ảnh trên trang web của bạn có thể responsive. Bạn chỉ cần thêm class
.img-responsive vào mỗi thẻ <img /> là xong:<img src="..." class="img-responsive" alt="Responsive image" />
Bootstrap còn rất nhiều điều tuyệt vời khác đang đợi bạn khám phá. Chúc các bạn thành công!
0 nhận xét:
Đăng nhận xét