Bootstrap 4 chính là phiên bản mới nhất của bootstrap, đây là 1 framework HTML, CSS và Javascript được sử dụng phổ biến nhất trong việc xây dựng website, và đặc biệt nhất là ưu tiên các nền tảng di động.
Nội dung chính
Sự khác biệt giữa bootstrap 3 và bootstrap 4
Bootstrap 4 là phiên bản mới nhất, khi đó nó được update thêm nhiều thành phần mới, css được chạy nhanh hơn cũng như khả năng đáp ứng cao hơn, nó hỗ trợ tất cả các trình duyệt hay nền tảng với nhiều phiên bản ổn định.
Nhược điểm lớn nhất của bootstrap 4 đó chính là nó không còn hỗ trợ trình duyệt IE9 nữa, và nếu như bạn cần sử chạy giao diện website trên IE8 hay IE9 thì bạn nên sử dụng bootstrap 3.
Tại sao bạn nên sử dụng bootstrap 4
- Dễ dàng sử dụng: đây là framework mà bất kỳ ai cũng có thế ử dụng, chỉ cần am hiểu cơ bản về css, html và javascript là đều có thể sử dụng được.
- Nhiều tính năng hữu ích: css của bootstrap có thể đáp ứng cho mọi điện thoại, laptop hay máy tính để bàn.
- Mobile first: trong bootstrap thì phong cách điện thoại di động là yếu tố đầu tiên mà Twitter hướng đến.
- Tương thích nhiều trình duyệt: bootstrap 4 tương thích với nhiều trình duyệt hiện đại nhất hiện nay như: chrome, firefox, safari, opera…
>> Xem thêm: Cách tải phiên bản bootstrap 4 và bootstrap 3
Giao diện bootstrap 4
Dưới đây là mẫu bootstrap 4 cơ bản sẽ giúp bạn có cái nhìn cơ bản nhất về phiên bản mới nhất của bootstrap nhé.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Ví dụ website dùng Bootstrap 4 — dammio.com</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.1.0/css/bootstrap.min.css”>
<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.14.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js”></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body><div class=”jumbotron text-center” style=”margin-bottom:0″>
<h1>Trang Bootstrap 4 đầu tiên</h1>
<p>Phóng to/thu nhỏ kích thước trang để xem thay đổi</p>
</div><nav class=”navbar navbar-expand-sm bg-dark navbar-dark”>
<a class=”navbar-brand” href=”#”>Blog Getbootstrap</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#collapsibleNavbar”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”collapsibleNavbar”>
<ul class=”navbar-nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Liên kết 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Liên kết 2</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Liên kết 3</a>
</li>
</ul>
</div>
</nav><div class=”container” style=”margin-top:30px”>
<div class=”row”>
<div class=”col-sm-4″>
<h2>Về tôi</h2>
<h5>Hình ảnh của tôi:</h5>
<div class=”fakeimg”>Hình ảnh giả</div>
<p>Nội dung về tôi ở đây…</p>
<h3>Các đường dẫn</h3>
<p>Nội dung đường dẫn — Blog Getbootstrap</p>
<ul class=”nav nav-pills flex-column”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Kích hoạt</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Liên kết</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Liên kết</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Hủy</a>
</li>
</ul>
<hr class=”d-sm-none”>
</div>
<div class=”col-sm-8″>
<h2>Thẻ tiêu đề h2</h2>
<h5>Thẻ tiêu đề h5</h5>
<div class=”fakeimg”>Hình ảnh giả</div>
<p>Tiêu đề…</p>
<p>Blog Getbootstrap.</p>
<br>
<h2>Thẻ tiêu đề h2</h2>
<h5>Thẻ tiêu đề h5</h5>
<div class=”fakeimg”>Hình ảnh</div>
<p>Tiêu đề…</p>
<p>Blog Getbootstrap</p>
</div>
</div>
</div><div class=”jumbotron text-center” style=”margin-bottom:0″>
<p>Phần đáy trang</p>
</div></body>
</html>
Hi vọng với những thông tin ở trên về bootstrap 4 sẽ giúp bạn có cái nhìn tổng quan hơn về bootstrap 4 nhé. Nếu như các bạn còn thắc mắc về kiến thức của bootstrap thì có thể tham khảo thêm các bài viết trước đây, hãy cùng học bootstrap 4 với blog vietnamforestry nhé. Chúc các bạn thành công.
