TWITTER BOOTSTRAP 4
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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 

Đâ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.

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

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ó devil, 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à smiley. 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 cheeky.

À 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

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 wink, 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ì  crying) ... 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 laugh. 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é!

Cùng chuyên mục:

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc…

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ…

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây là bài lý thuyết cuối cùng trong series bootstrap 3, ở các bài tiếp…

Bài 19: Helper classes trong bootstrap 3

Bài 19: Helper classes trong bootstrap 3

Trong bài viết này thì chúng ta sẽ tìm hiểu về các helper classes hỗ…

Bài 18: Tạo Tabs trong bootstrap 3

Bài 18: Tạo Tabs trong bootstrap 3

Bài viết này cũng có một mối liên quan mật thiết với component navs vì…

Bài 17: Dropdown menu trong bootstrap 3

Bài 17: Dropdown menu trong bootstrap 3

Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng…

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Như vậy sau khi kết thúc bài trước thì xem như chúng ta đã tìm…

Bài 15: Navigation trong bootstrap 3

Bài 15: Navigation trong bootstrap 3

Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về…

Bài 14: Navs menu trong bootstrap 3

Bài 14: Navs menu trong bootstrap 3

Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi…

Bài 13: Glyphicons trong bootstrap 3

Bài 13: Glyphicons trong bootstrap 3

Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về…

Bài 12: Button group bootstrap 3

Bài 12: Button group bootstrap 3

Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem…

Bài 11: List group trong bootstrap 3

Bài 11: List group trong bootstrap 3

Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong…

Bài 10: Tạo button trong bootstrap 3

Bài 10: Tạo button trong bootstrap 3

Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận…

Bài 9: Xây dựng form với bootstrap 3

Bài 9: Xây dựng form với bootstrap 3

Khi các bạn tiến hành xây dựng giao diện một website thì form chính là…

Bài 8: Định dạng Typography bootstrap 3

Bài 8: Định dạng Typography bootstrap 3

Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định…

Bài 7: Panel & Labels trong bootstrap 3

Bài 7: Panel & Labels trong bootstrap 3

Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà…

Bài 6: Pagination trong bootstrap 3

Bài 6: Pagination trong bootstrap 3

Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web,…

Bài 5: Breadcrumbs  & Images trong bootstrap 3

Bài 5: Breadcrumbs & Images trong bootstrap 3

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết…

Bài 4: Tạo table trong bootstrap 3

Bài 4: Tạo table trong bootstrap 3

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần…

Bài 3: Grid System trong bootstrap 3

Bài 3: Grid System trong bootstrap 3

Chắc hẳn các bạn còn đang lạ lẫm và đặt ra câu hỏi Grid system…

Top