Bootstrap là gì? Tổng quan về Bootstrap 4

11-06-2020 13:27:57
by: baobinhnet

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Nó được xuất bản như là một mã nguồn mở vào tháng 8 năm 2011 trên GitHub. Tính ra đến thời điểm mình viết bài viết này nó cũng đã phát triển được 7 năm rồi. Bản bootstrap mới nhất bây giờ là bootstrap 4.

Bootstrap là gì?

Tổng quan về Bootstrap 4
Bootstrap 4 (viết tắt là BS4), là phiên bản mới nhất của Bootstrap. Bootstrap là framework HTML, CSS và Javascript phổ biến nhất hiện nay để thiết kế website có thể đáp ứng trên tất cả các nền tảng di động và các thiết bị khác như máy tính bảng, laptop, …. Tương tự như Bootstrap 3 phiên bản cũ, Bootstrap 4 hoàn toàn miễn phí và tự do sử dụng.

Sự phát triển của Framework Bootstrap

Về lịch sử phát triển thì tất nhiên, Bootstrap cũng sẽ phát triển dần từ những phiên bản ban đầu từ 1, 2, … và lên dần các phiên bản mới hơn. Và hiện nay, thì Bootstrap chỉ còn phổ biến nhất 2 phiên bản đó là Bootstrap 3 và Bootstrap 4, trong đó thì Bootstrap 3 vẫn phổ biến hơn vì Bootstrap 4 mới ra trong khoảng 1 năm nay thôi.

Về cơ bản thì 2 phiên bản này có cấu trúc và cách sử dụng khá giống nhau, nên nếu như bạn nào đã từng học và làm qua về Bootstrap 3, thì chắc hẳn sẽ không khó khăn để hiểu về Bootstrap 4, đơn giản vì chúng cũng khá giống nhau. Còn về những điểm khác, phần tiếp theo mình sẽ nói tới nhé.

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 hiện tại, với các thành phần mới, CSS nhanh hơn và khả năng đáp ứng cao hơn phiên bản cũ. Vì là bản mới nên bootstrap 4 có hỗ trợ responsive cho nhiều thiết bị hơn, code css được tối ưu hơn, nhiều file chia nhỏ 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, 1 nhược điểm duy nhất đó là IE9 không hỗ trợ Bootstrap 4.

Nếu các bạn cần chạy giao diện web trên trình duyệt của IE, cụ thể là IE8 và IE9, thì bạn nên dùng Bootstrap 3 nhé. Phiên bản cũ Bootstrap 3 ổn định, hỗ trợ các bản vá lỗi và các thay đổi tài liệu.

Tại sao sử dụng Bootstrap

Sau đây là 1 số lý do mà các bạn nên 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 được Bootstrap
Các tính năng đáp ứng: Bootstrap thích hợp, tương thích (reponsive) với điện thoại, máy tính bảng và máy tính để bàn (laptop, dektop).
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).

Demo Bootstrap 4

Để test reponsive của Bootstrap 4 thì các bạn bằng việc chạy thử thật trên tất cả các thiết bị thì các bạn có thể tải các Add on tiện ích của trình duyệt, mình gợi ý cho các bạn cài Add on Mobile/Reponsive Web Design Tester trên Chrome nhé, dùng rất tiện ích để kiểm tra website chạy trên các thiết bị như thế nào, không phải đi mượn máy móc thật về test thử đâu.

Nói nhiều rồi, để các bạn hình dung ra BS4 trông như thế nào, mình sẽ để bản demo ở đây cho các bạn xem qua nhé, không hiểu cũng không sao, chúng ta sẽ học làm ra nó ở những bài kế tiếp.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.3/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.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Cột số 2</h3>
      <p>Thông tin cơ bản của cột số 2</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Kết luận

Mình đã giới thiệu về bootstrap nói chung và tổng quan về bootstrap 4 nói riêng hi vọng hiện tại các bạn đã có một cái nhìn tổng quan về Bootstrap 4. Mặc dù có rất nhiều ưu điểm vượt trội, nhưng Bootstrap 4 vẫn chưa thể giải quyết vấn đề tương thích trình duyệt dành cho các dòng IE9, cũng như tương thích hoàn toàn với IE10+. Bootstrap 3 sẽ đáp ứng tốt hơn trong việc thực hiện nhu cầu tương thích với IE9 và IE10. Mời các 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.

Xem thêm: bootstrap bootstrap 4 bootstrap là gì

Posted by baobinhnet
2020-06-11 13:27:57

Danh Mục Lập Trình

Baobinh.net

Học Bootstrap 4

Bootstrap là gì? Tổng quan về Bootstrap 4