Kết nối

[Bootstrap 4] Phần 1: Giới thiệu về Bootstrap 4

22.890 lượt xem 
 Cập nhật lần cuối: 19/06/2018 lúc 10:52:51
Thể loại: Bootstrap 

Bootstrap 4 (viết tắt là BS4) là phiên bản mới của Bootstrap, là framework HTML, CSS và JavaScript phổ biến nhất để thiết kế web đáp ứng, ưu tiên trên nền tảng di động. Tương tự như Bootstrap 3, Bootstrap 4 hoàn toàn miễn phí tải về và tự do sử dụng.

So sánh Bootstrap 3 và Bootstrap 4

Bootstrap 4 là phiên bản mới nhất của Bootstrap tính đến thời điểm viết bài này, với các thành phần mới, css nhanh hơn và khả năng đáp ứng cao hơn. Bootstrap 4 hỗ trợ tất cả các trình duyệt và nền tảng với các phiên bản ổn định và mới nhất. Tuy nhiên, một nhược điểm duy nhất đó IE9 không hỗ trợ Bootstrap 4.

Nếu bạn cần chạy giao diện web trên trình duyệt IE8 và IE9, bạn nên dùng Bootstrap 3. Đây là phiên bản ổn định, hỗ trợ các bản vá lỗi và các thay đổi tài liệu.

Lý do sử dụng Bootstrap

Sau đây là các lý do sử dụng Bootstrap:

  • Dễ dùng: bất cứ ai với kiến thức cơ bản về HTML và CSS đều cũng có thể sử dụng Bootstrap
  • Các tính năng đáp ứng: CSS đáp ứng của Bootstrap thích hợp với điện thoại, máy tính bảng và máy tính để bàn.
  • Tiếp cận ưu tiên thiết bị di động đầu tiên: Trong Bootstrap, các phong cách điện thoại di động là một phần của framework lõi.
  • Tương thích trình duyệt: Bootstrap 4 tương thích với các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera).

Giao diện Bootstrap 4 cơ bản

Bạn có thể tham khảo mẫu Bootstrap 4 cơ bản sau để có cái nhìn đầu tiên về phiên bản này.

<!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="#">DAMMIO</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 --- dammio.com</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>Nội dung giới thiệu về website dammio.com: Trang lập trình, thiết kế Web, học tiếng Anh.</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>Nội dung giới thiệu về website dammio.com: Trang lập trình, thiết kế Web, học tiếng Anh.</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Phần đáy trang</p>
</div>

</body>
</html>

Kết luận

Bài này giúp bạn có cái nhìn tổng quát về Bootstrap 4. Tuy có nhiều ưu điểm vượt trội, Bootstrap 4 vẫn chưa thể giải quyết vấn đề tương thích với IE9, cũng như tương thích hoàn toàn với IE10+. Bạn có thể dùng Bootstrap 3 để thực hiện nhu cầu tương thích với IE9 và IE10. Mời bạn theo dõi bài tiếp theo để bắt đầu học và tìm hiểu sâu hơn về Bootstrap 4.

Liên quan:  [Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4
Trích dẫn bài viết
  • APA:
    Dammio. (2018). [Bootstrap 4] Phần 1: Giới thiệu về Bootstrap 4. https://www.dammio.com/2018/06/17/bootstrap-4-phan-1-gioi-thieu-ve-bootstrap-4.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap 4] Phần 1: Giới thiệu về Bootstrap 4},
    year = {2018},
    url = {https://www.dammio.com/2018/06/17/bootstrap-4-phan-1-gioi-thieu-ve-bootstrap-4},
    urldate = {2024-03-13}
    }
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x