Bootstrap 4 - Ví dụ về Bootstrap
Ví dụ đầu tiên về Bootstrap
Add the HTML 5 doctype: Bootstrap sử dụng các phần tử HTML và thuộc tính CSS, vì vậy bạn phải thêm doctype HTML 5 ở đầu trang với thuộc tính lang và bộ ký tự chính xác.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Any title</title>
</head>
<body>
//write code
</body>
</html>
Bootstrap thân thiện với thiết bị di động: Bootstrap 3 được thiết kế để đáp ứng với các thiết bị di động.
Framework Bootstrap dùng cho thiết kế cho các thiết bị di động. Bạn phải thêm thẻ <meta> sau bên trong phần tử <head> để hiển thị phù hợp và phóng to chạm:
<meta name="viewport" content="width=device-width, initial-scale=1">
Lưu ý: Phần "width = device-width" được sử dụng để đặt chiều rộng của trang tuân theo chiều rộng màn hình của thiết bị (thay đổi tùy theo thiết bị).
Phần Initial-scale = 1 được sử dụng để đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.
Container: container được sử dụng để bao bọc nội dung trang web. Có hai lớp vùng chứa.
- Lớp .container cung cấp một vùng chứa có chiều rộng cố định responsive.
- Lớp .container-liquid cung cấp một vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của màn hình.
Lưu ý: Lớp container không thể đặt bên trong lớp container
Ví dụ Bootstrap đầu tiên (với vùng chứa chiều rộng cố định responsive)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1> First Bootstrap web page</h1>
<p>Write your text here..</p>
</div>
</body>
</html>