-------
Phần 37. Grid
system trong Bootstrap
Đây là clip số 10: grid system – hệ thống lưới
Dưới đây là hình ảnh về hệ thống lưới của Bootstrap 3. (https://getbootstrap.com/docs/3.3/css/)
Dưới đây là hình ảnh về hệ thống lưới của Bootstrap 4. (https://v4-alpha.getbootstrap.com/layout/grid/)
Cấu trúc chung khi dùng Bootstrap: các cột (column) sẽ được
đặt vào các hàng (row), sau đó các hàng sẽ được đặt trong các thùng chứa
(container).
<div class="container">
<div
class="row">
<div
class="col-md-6">
<p>Left</p>
</div>
<div
class="col-md-6">
<p>Right</p>
</div>
</div>
</div>
Class=“container” giúp căn giữa toàn bộ nội dung.
Đoạn mã CSS để hiển thị grid-system:
.show-grid [class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background: #eee;
border: 1px solid #ddd;
}
Ý nghĩa của “.show-grid [class*="col-"]”: chọn các
thẻ con trong .show-grid có thuộc tính class có chứa chuỗi "col-".
Lưu lại đoạn mã về grid-system để tham khảo:
<!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">
<!-- The above 3 meta
tags *must* come first in the head; any other head content must come *after*
these tags -->
<title>Bootstrap
101 Template</title>
<style>
.show-grid
[class^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background: #eee;
border: 1px solid #ddd;
}
</style>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div
class="container">
<div
class="row show-grid">
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
<div
class="col-md-1"><p>1</p></div>
</div>
<div
class="row show-grid">
<div
class="col-md-6"><p>left</p></div>
<div
class="col-md-6"><p>right</p></div>
</div>
<div
class="row show-grid">
<div
class="col-md-3"><p>left</p></div>
<div
class="col-md-7"><p>center</p></div>
<div
class="col-md-2"><p>right</p></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's
JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all
compiled plugins (below), or include individual files as needed -->
<script
src="js/bootstrap.min.js"></script>
</body>
</html>
Hệ thống grid-system đã có sẵn đặc tính responsive.
Đây là clip số 11: Mobile First
Ý tưởng của Mobile First là thiết kế cho màn hình có kích
thước nhỏ trước và chuyển lên màn hình có kích thước lớn hơn.
Khi thực thi Bootstrap, ứng với mỗi kích thước màn hình,
class tương ứng với màn hình đó sẽ được ưu tiên lựa chọn.
|
Bootstrap3
|
|
|
|
|
|
<768px
|
>=768px - < 992px
|
>=992px - < 1200px
|
>=1200px
|
|
|
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
|
|
Bootstrap4
|
|
|
|
|
|
<544px
|
>=544px - < 768px
|
>=768px - < 992px
|
>= 992 px - < 1200px
|
>= 1200px
|
|
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
Ví dụ về mobile first:
<div class="container">
<div
class="row show-grid">
<div
class="col-xs-6 col-sm-9 col-md-3
col-lg-12"><p>left</p></div>
<div
class="col-xs-6 col-sm-3 col-md-9
col-lg-12"><p>right</p></div>
</div>
</div>
Đây là clip số 12: thay đổi vị trí của các cột
Responsive column reset: tác dụng giống như tạo row mới cho
các cột dữ liệu, <div class="clearfix"></div>.
Ví dụ,
<div class="container">
<div
class="row show-grid">
<div class="col-md-6"><p>Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusantium hic aperiam
veritatis similique suscipit porro, eaque, minus sed quaerat corporis dolore
impedit dolorem facere incidunt vitae exercitationem provident? Ad inventore id
totam repellendus possimus, rerum temporibus harum debitis nam
magni.</p></div>
<div
class="col-md-6"><p>right 1</p></div>
<div
class="clearfix"></div>
<div
class="col-md-6"><p>left 2</p></div>
<div
class="col-md-6"><p>right 2</p></div>
</div>
</div>
Offsetting columns: thiết lập vị trí bắt đầu của các cột dữ
liệu.
Ví dụ,
<div class="container">
<div
class="row show-grid">
<div
class="col-md-4
col-md-offset-2"><p>Content</p></div>
</div>
</div>
Nesting columns: lồng cột trong cột,
<div class="container">
<div
class="row show-grid">
<div
class="col-md-6">
<div
class="row show-grid">
<div
class="col-md-6">
<p>child content 1</p>
</div>
<div
class="col-md-6">
<p>child content 2</p>
</div>
</div>
</div>
<div
class="col-md-6">
<p>parent
content</p>
</div>
</div>
</div>
Column ordering: hoán chuyển vị trí của các cột,
<div class="container">
<div
class="row show-grid">
<div
class="col-md-6 col-md-push-6">
<p>Left</p>
</div>
<div
class="col-md-6 col-md-pull-6">
<p>Right</p>
</div>
</div>
</div>
-----------
Cập nhật [10/10/2017][12/10/2016]
-----------