Bootstrap Container Padding.
Với Bootstrap, theo mặc định, container có left và right padding mỗi bên 15px, không có top và bottom padding. Do đó, chúng ta thường sử dụng các tiện ích như padding hay margin để làm cho chúng trông đẹp hơn.
Chúng ta dùng cấu trúc sau để làm việc đó:
{property}{sides}-{size}
Trong đó:
property có thể là một trong hai trường hợp:
m - thiết lập margin
p - thiết lập padding
sides có thể là một trong các trường hợp:
t - thiết lập margin-top hoặc padding-top
b - thiết lập margin-bottom hoặc padding-bottom
l - thiết lập margin-left hoặc padding-left
r - thiết lập margin-right hoặc padding-right
x - thiết lập cả *-left và *-right
y - thiết lập cả *-top và *-bottom
blank - thiết lập margin hoặc padding cả 4 chiều của phần tử
size có thể là một trong các trường hợp:
0 - loại bỏ margin hoặc padding bằng cách đặt thành 0
1 - thiết lập margin hoặc padding thành $spacer * .25
2 - thiết lập margin hoặc padding thành $spacer * .5
3 - thiết lập margin hoặc padding thành $spacer
4 - thiết lập margin hoặc padding thành $spacer * 1.5
5 - thiết lập lề hoặc đệm thành $spacer * 3
auto - thiết lập lề thành auto
Chúng ta sẽ quay lại với phong cách...tào lao để dễ dàng "thí nghiệm" các khái niệm trong Bootstrap. Ta sẽ sử dụng lại ví dụ trong phần trước.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Đất Việt Lập Trình-container</h1>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.</p>
</div>
<div class="container-fluid">
<h1>Đất Việt Lập Trình-container-fluid</h1>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.</p>
</div>
</body>
</html>
Để tạo top padding cho class container, chúng ta sử dụng pt-5, trong đó:
p: padding
t: top
5: padding lớn nhất
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-5">
<h1>Đất Việt Lập Trình-container</h1>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.</p>
</div>
<div class="container-fluid">
<h1>Đất Việt Lập Trình-container-fluid</h1>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương.</p>
</div>
</body>
</html>
Sử dụng OnlineGDB để thực thi
Chúng ta sẽ tạo border bằng cách thêm border vào bên cạnh pt-5
<div class="container pt-5 border">
Bấm Run để thực thi
Border đã có nhưng phần chữ quá gần với border, chúng ta sửa lại như sau:
<div class="container p-5 my-5 border">
p-5: padding với side blank tức là padding cả 4 chiều.
m: margin
y: cho cả top và bottom
Bấm Run để thực thi
Bây giờ "nhan sắc" đã cải thiện hơn. Chúng ta tiếp tục chương trình...tào lao bằng cách thay đổi màu sắc nền và chữ
<div class="container p-5 my-5 border bg-dark text-white">
bg: background
dark: Set màu tối
Bấm Run để thực thi
Không có nhận xét nào:
Đăng nhận xét