Học Bootstrap 4

Kể từ khi ra mắt năm 2013 cho đến 2017 Bootstrap 3 đã làm mưa làm gió trong cộng đồng làm web, thế nhưng phát triển và tối ưu là xu hướng tất yếu của công nghệ vì vậy tháng 8 năm 2017 phiên bản Bootstrap 4 đã được phát hành với nhiều cải tiến. Cho đến hiện tại Bootstrap 4 và Bootstrap 3 vẫn là hai phiên bản boostrap vẫn được nhiều người dùng nhất trên thế giới. Nếu Bootstrap 3 đại diện cho độ ổn định và thích hợp nhiều trình duyệt cũ thì Bootstrap 4 đại diện cho công nghệ mới nhiều ưu điểm hơn nhanh hơn. Trong loạt bài viết này chúng ta sẽ cùng nhau học cách sử dụng Bootstrap 4 các bạn nhé.

Bootstrap 3 so với Bootstrap 4

Bootstrap 4 là phiên bản ra đời sau Bootstrap 3 với các thành phần mới, stylesheet nhanh hơn và khả năng phản responsive tốt hơn.

Bootstrap 4 hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 9 trở xuống không được hỗ trợ.

Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản ổn định nhất của Bootstrap và nó vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào nó.

Tham khảo loạt bài học Bootstrap 3

Mẫu cơ bản Bootstrap 4

Dưới đây là một mẫu responsive khởi đầu với Bootstrap 4. Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng nó trong các dự án của mình:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap 4</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>
  <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 của tôi</h1>
  <p>Thay đổi kích thước trang để xem hiệu ứng!</p> 
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>
<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>
</body>
</html>

Bootstrap 3 so với Bootstrap 4

Mẫu cơ bản Bootstrap 4

Danh sách bài học Bootstrap 4 được trình bày ở dưới đây

BOOTSTRAP 4 CƠ BẢN

Học Bootstrap 4