Đào tạo Tin học trực tuyến

Bootstrap 4.0: Bài 2. Thiết lập hệ thống lưới Grid System


Grid System là một hệ thống lưới và bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Kích thước trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout.

Click vào đây hoặc hình ảnh trên để xem hướng dẫn chi tiết

Xem toàn bộ danh sách bài giảng bootstrap 4.0

Phần thực hành

<!DOCTYPE html>
<html lang="vi">
<head>
	<meta charset="UTF-8">
	<title>Demo Bootstrap 4 CSS FrameWork</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- 
	.col- (extra small devices < 576px)
	.col-sm- (small devices >= 576px)
	.col-md- (medium devices >= 768px)
	.col-lg- (large devices >= 992px)
	.col-xl- (xlarge devices >= 1200px)
 -->	
 	<div class="container">
 		<div class="row">
 			<div class="col-7 bg-primary">
 				<p>col-7</p>
 			</div>
 			<div class="col-5 bg-success">
 				<p>col-5</p>
 			</div>
 		</div>
 	</div> <hr>

 	<div class="container">
 		<div class="row">
 			<div class="col-sm-7 bg-primary">
 				<p>col-sm-7</p>
 			</div>
 			<div class="col-sm-5 bg-success">
 				<p>col-sm-5</p>
 			</div>
 		</div>
 	</div> <hr>

 	<div class="container">
 		<div class="row">
 			<div class="col-md-7 bg-primary">
 				<p>col-md-7</p>
 			</div>
 			<div class="col-md-5 bg-success">
 				<p>col-md-5</p>
 			</div>
 		</div>
 	</div> <hr>

 	<div class="container">
 		<div class="row">
 			<div class="col-lg-7 bg-primary">
 				<p>col-lg-7</p>
 			</div>
 			<div class="col-lg-5 bg-success">
 				<p>col-lg-5</p>
 			</div>
 		</div>
 	</div> <hr>

 	<div class="container">
 		<div class="row">
 			<div class="col-xl-7 bg-primary">
 				<p>col-xl-7</p>
 			</div>
 			<div class="col-xl-5 bg-success">
 				<p>col-xl-5</p>
 			</div>
 		</div>
 	</div> <hr>

 	<div class="container">
 		<div class="row">
 			<div class="col-xl-8 col-md-6 col-sm-12 bg-primary">
 				<p>col-xl-8 col-lg-6 col-md-12</p>
 			</div>
 			<div class="col-xl-4 col-md-6 col-sm-12 bg-success">
 				<p>col-xl-4 col-lg-6 col-sm-12</p>
 			</div>
 		</div>
 	</div> <hr>
	

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

 


Bình luận

Đăng ký là thành viên để tham gia bình luận

hoanganh
hoanganh 1 tháng trước

thanks!