Bootstrap4 là gì?

Chào các bạn, nếu các bạn đang tìm hiểu về Bootstrap 4 thì các bạn đã tìm đúng nguồn rồi đấy... ahihi

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Đây là chuỗi series đầu tiên của mình với Bootstrap 4, mong các bạn sẽ ủng hộ mình và kiên nhẫn theo dõi series này.

1. Bootstrap - Bootstrap 4 là gì?

Như các bạn thấy đấy, bây giờ thì số lượng truy cập web qua điện thoại là cao hơn qua desktop hay tablet rất nhiều, nhưng k phải là k có , nên là lập trình viên như chúng ta phải chiều lòng khách hàng thôi, khách hàng "nuôi" ta sống mà . Mà chiều sao cho khách hàng thì "sướng" mà bản thân chúng ta thì cũng đỡ cực. Vậy thì chiều khách hàng bằng cách nào? Trước tiên ta phải cho họ "sướng" con mắt trước đã => đó chính là phần giao diện của 1 website. Vậy làm sao để ta đỡ cực? Chỉ còn cách làm ít được nhiều => code ít mà giao diện tương thích với toàn bộ các thiết bị . Ta không thể để khách hàng desktop có giao diện đẹp như Ngọc Trinh mà khách hàng mobile lại vớ phải Tùng Sơn được... Chính vì lí do đó mà bootstrap ra đời .

À vậy ra Bootstrap là css à? K hẳn đâu, theo mình thấy thì BS chính là 1 mớ hỗn độn HTML, CSS, JS với mục tiêu làm cho website của bạn tương thích với mọi thiết bị . Mà chủ yếu chúng ta sẽ sử dụng css của nó qua các class. Còn bootstrap 4 chỉ là version mới nhất mà BS vừa phát hành thôi . Đơn giản vậy đấy ! Mà Bootstrap còn hào phóng tạo ra và cho chúng ta sử dụng free nữa chứ nên tội gì mà không dùng ha...hehe

Bài viết này được đăng tại [free tuts .net]

bootstrap4 la gi png

2. Sơ qua các thế hệ nhà Bootstrap

Hiện tại thì Bootstrap chỉ còn phổ biến nhất 2 version đó là Bootstrap 3 và Bootstrap 4, trong đó thì bootstrap 3 phổ biến hơn vì bootstrap 4 mới chốt trong năm nay thôi mà .

Về cơ bản thì 2 thằng này có cấu trúc và cách sử dụng khá giống nhau, nên khi bạn đã biết các sử dụng 1 trong 2 version này thì việc bạn chuyển qua vesion khác chắc chỉ mất 30p cho bạn đọc qua tài liệu thôi , vậy nên bạn không phải lo lắng nếu bạn chưa từng học qua bootstrap 3 trước đó. Chỉ cần bạn theo sát mình là được (í nhầm, theo sát series của mình) còn nếu không thì freetuts cũng có series Bootstrap3 cho bạn vọc đấy.

3. Ưu điểm và nhược điểm

Ưu điểm: 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...blabla

Nhược điểm: Mặc dù hỗ trợ hầu hết các trình duyệt chính nhưng với IE9 trở xuống thì bootstrap 4 lại k hỗ trợ (khổ ghê , nhiều khi nghĩ trời đã sinh ra dev còn đẻ ra IE là gì ) ... nhưng bạn vẫn có thể sử dụng bootstrap 3 nếu cần thiết vì nó chạy khá ổn định . Còn lại thì mình chưa nghĩ ra thêm được nhược điểm nào .

Tào lao từ này mà chưa cho các bạn xem thử demo về bs4, để test được việc responsive của bs4 thì các bạn vui lòng chạy quanh xóm mượn cho mình hết tablet, mobile, desktop về và mở demo này ra và tấm tắc khen bootstrap 4 cho mình. Mình đùa chút, thật ra thì các bạn chỉ cần test bằng dev tool của chrome hay các trình duyệt tương tự là đc . Có thiết bị nào mà chạy demo này giao diện nhìn giống Tùng Sơn thì liên hệ mình để mình kiện bs4 nhé .

Demo giao diện sử dụng bs4 RUN

<!DOCTYPE html>
<html lang="en">
<head>
  <title>BootstrapDemo</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.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Bootstrap 4 giao diện demo</h1>
  <p>Hãy thu thập đủ các thiết bị desktop, mobile, tablet quanh xóm trước khi test</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-md col-sm-6">
      <h3>Cột 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-md col-sm-6">
      <h3>Cột 2</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-md col-sm-6">
      <h3>Cột 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 class="col-md col-sm-6">
      <h3>Cột 4</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>

4. Lời kết

Qua bài này chắc bạn đã hiểu được bootstrap 4 là gì rồi phải không nào? Bootstrap4 quả thật rất đáng để học, đặc biệt với các bạn muốn theo front-end, hãy xem tiếp các bài viết tiếp theo để ủng hộ mình và freetuts nhé!