Thế nào là Responsive Web Design?
Responsive web design là việc tạo các trang web có thể tự động điều chỉnh để phù hợp trên các thiết bị, từ điện thoại nhỏ đến máy tính lớn.
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>
Bootstrap 4 là phiên bản mới hơn; với nhiều thành phần và phản ứng nhanh hơn.
Bootstrap 4 hỗ trợ sự mới nhất, ổn định nhất cho tất cả các trình duyệt và nền tảng. Tuy nhiên, Internet Explorer 9 trở xuống không được hỗ trợ.
Nếu bạn cần hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản Bootstrap ổn định nhất và vẫn được hỗ trợ. Tuy nhiên, Bootstrap 3 không có các tính năng mới như Bootstrap 4.
Bootstrap 4 không hỗ trợ Glyphicons như Bootstrap 3. Ta cần sử dụng Font-Awesome hoặc các thư viện icon khác thay thế.
Ưu điểm của Bootstrap:
Có 2 cách nhúng Bootstrap 4 vào website của bạn:
Nếu không muốn download bất cứ thứ gì về, bạn có thể dùng link CDN (Content Delivery Network).
MaxCDN cung cấp CDN hỗ trợ cho Bootstrap's CSS và JavaScript. Bạn cần nhúng cả thư viện jQuery:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Nếu bạn muốn download để sử dụng Bootstrap 4, có thể vào https://getbootstrap.com/ để download.
1. Tạo HTML5 doctype
Bootstrap 4 sử dụng các yếu tố HTML và các thuộc tính CSS yêu cầu HTML5 doctype.
Luôn nhúng HTML5 doctype đầu tiên vào trang, cùng lang attribute và các thẻ meta character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 4 mobile-first
Bootstrap 4 được thiết kế responsive cho thiết bị di động. Nó được gọi là mobile-first styles - phần cốt lõi của framework.
Để đảm bảo responsive được trước hết cần add thẻ <meta>
bên trong thẻ <head>
:
<meta name="viewport" content="width=device-width, initial-scale=1">
3. Containers
Hai class container để bao bọc nội dung trang web có thể chọn:
.container
cung cấp một container chiều rộng cố định, luôn cách 2 bên màn hình một đoạn nhỏ cố định..container-fluid
cung cấp một container chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của màn hình.Hai trang Bootstrap 4 cơ bản
Ví dụ sau đây hiển thị code cho trang Bootstrap 4 cơ bản (với container chiều rộng cố định):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website