Tiếp sau phiên bản thứ 3 là Bootstrap 4 nó được bổ sung hệ thống lưới Grid để thiết kế website Responsive. Trong bài viết Bootstrap là gì chúng tôi đã hướng dẫn cơ bản về cách cài đặt và sử dụng bạn có thể xem lại. Trong khuôn khổ bài viết này SONGMAWEB sẽ hướng dẫn sử dụng Bootstrap 4 để xây dựng nên một trang web đẹp và tiết kiệm thời gian nhất.

Cách sử dụng Bootstrap 4

Trước tiên bạn cần chạy chương trình này bằng cách sử dụng Notepad++ hoặc Sublime Text lưu lại với tên là index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title> Ví dụ về Bootstrap</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.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="jumbotron text-center">
<h1>Tiêu đề của website</h1>
<p>Đây là phần mô tả trang web</p>
</div>

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p> Nội dung</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p> Nội dung</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p> Nội dung</p>
</div>
</div>
</div>

</body>
</html>

Trong Bootstrap bạn sẽ cần lưu ý các class sau:

  • Container: là không gian có chiều rộng cố định với kích thước min-width: 1200px sẽ là 1140px
  • Container-fluid: là không gian chiều rộng trải toàn bộ màn hình
  • col-sm-4: Hệ thống lưới sẽ được chia thành 12 cột. Khi đặt col-sm-4 thì lấy 12/4 = 3. Vậy làm một col sẽ chiếm 3 cột

Cũng với ví dụ trên bây giờ sẽ thay đổi thành

<div class="container">
<div class="row">
<div class="col-sm-8 content">
<h3>Column 1</h3>
<p> Nội dung</p>
</div>
<div class="col-sm-4 sidebar">
<h3>Column 2</h3>
<p> Nội dung</p>
</div>
</div>
</div>

Thêm một chút CSS cho dễ phân biệt

<style>
.content {
background: #ff0800;
}
.sidebar {
background: #ddd;
}
</style>

bootstrap-4

Thêm Menu

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lập Trình</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Thủ Thuật Seo</a>
</li>
</ul>
</nav>

bootstrap-4-menu

Tiếp theo sẽ thêm một chút mã CSS để trang trí đẹp hơn

.jumbotron {
margin-bottom: 0;
}
.navbar-nav {
max-width: 1140px;
margin: 0 auto;
}

Cuối cùng là thêm 3 cột ở Footer

<div class="container">
<div class="row">
<div class="col-sm-4 footer-1">
<h3>Footer 1</h3>
<p> Nội dung</p>
</div>
<div class="col-sm-4 footer-2">
<h3>Footer 3</h3>
<p> Nội dung</p>
</div>
<div class="col-sm-4 footer-3">
<h3>Footer 3</h3>
<p> Nội dung</p>
</div>
</div>
</div>

Và sau khi thêm nội dung vào chúng ta sẽ được một trang web thiết kế bằng Bootstrap 4 gần như hoàn chỉnh.

bootstrap-4-huong-dan-1

Bootstrap 4 là một Framework khá tuyệt vời để xây dựng website phía Frontend tiện lợi. Dùng Bootstrap bạn sẽ không cần phải viết quá nhiều mã CSS hay sợ bị vỡ khung bởi mọi thứ đã được thiết kế hoàn hảo.

Trong chuyên mục: Web