Vào ngày 19/8 thì trên trang chủ của bootstrap là https://getbootstrap.com.vn đã đưa ra thông báo ra mắt bootstrap 4, sau đó tung ra phiên bản bootstrap 4 alpha. Vậy getbootstrap 4 có gì hay ho? cách cài đặt bootstrap 4? Ưu điểm của bootstrap 4 như thế nào? Mời các bạn cùng tham khảo tại bài viết đưới đây.
Cài đặt getbootstrap 4
Cách 1: Qua source Github
# Clone repository
git clone https://github.com/twbs/bootstrap# Fetch branches
git fetch# Chuyển sử dụng branch v4-dev
git checkout v4-dev
Sử dụng Grunt để complile Sass
#Cài đặt grunt
npm install
npm install grunt#Compile
grunt watch
Cách 2: Qua CDN link
Bạn chỉ cần thêm đoạn code sau vào html
<link rel=”stylesheet” href=”https://cask.scotch.io/bootstrap-4.0.css”>
<link rel=”stylesheet” href=”https://cask.scotch.io/bootstrap-4.0-flex.css”>
<script src=”https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js”></script>
Ưu điểm của bootstrap 4
- Đã thống nhất các đoạn reset HTML vào một module Reboot: reboot đã can thiệp rộng hơn Normalize.css (chứa những đoạn reset cũ), cung cấp nhiều lựa chọn reset hơn như box-sizing, margin … tất cả đều nằm ở 1 file Sass.
- Viết lại Javascript: Toàn bộ các plugin bằng Javascript đều được viết ở trên ES6 để có thể tận dụng triệt để những ưu điểm của Javascript mới.
- Nhờ vào thư viện Tether – là 1 thư viện js được cung cấp bởi bên thứ 3, giúp nâng cấp tooltips và popovers
- Cải thiện Docs
- Thêm nhiều vấn đề khác như: custom form control hay margin, class padding, …
Điểm nổi bật của Bootstrap 4
Chuyển đổi từ Less sang Sass
Như các bạn đã từng sử dụng phiên bản bootstrap 3 thì ở phiên bản đó đã sử dụng Less để xử lý CSS.
Còn với getbootstrap 4 thì sử dụng Sass một công cụ vô cùng nhanh, mạnh mẽ và Sass có một cộng đồng phát triển rộng lớn.
Cải tiến Grid system dựa vào Rems
Việc bạn sử dụng grid system ở bootstrap 4 cũng không có gì khác biệt so với syntax HTML
Khi đó ta vẫn có thể tạo ra 12 col grid như trước đây:
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-4″>
What
</div>
<div class=”col-md-6″>
The
</div>
<div class=”col-md-2″>
Hợi
</div>
</div>
</div>
Và điều khác biệt so với phiên bản trước là sử dụng REM để căn chỉnh (aka root em của CSS3)
Với
- ROW: có giá trị mặc định: margin-left và right = -0,9375rem
- Columns: mặc định là padding-left và right = 0,9375rem
Còn đối với bootstrap 3 là 15px
Ở phiên bản bootstrap 3 thì bootstrap đã giới thiệu xu hướng thiết kế dạng moblile first, và bắt đầu hỗ trợ cho các kích thước màn hình khác nhau. Khi đó rem được sử dụng cũng nhằm để phát triển thêm về moblile first.
Để nói rõ hơn về điều này thì bạn cần xem bootstrap set global font-size
Bạn mở file _reboot.css, coi dòng 60:
html {
// Sets a specific default `font-size` for user with `rem` type scales.
font-size: $font-size-root;
/* etc… */
}body {
// Make the `body` use the `font-size-root`
font-size: $font-size-base;
/* etc… */
}
Và khi bạn tìm tới _variables.scss thì sẽ thấy biến
$font-size-root: 16px !default;
$font-size-base: 1rem !default;
Dựa vào phép tính chia px cho 16, thì bạn sẽ ra được số rem tương ứng là bao nhiêu.
VD: Bạn muốn font-size = 40px, => rem = 40/16=2.5
Cho nên việc sử dụng rem đã có ý nghĩa vô cùng quan trọng đối với các màn hình có kích thước khác nhau, sự cân đối của design sẽ không bị phá vỡ bởi các thuộc tính có giá trị động và phụ thuộc vào nhau.
Hỗ trợ Opt-in flexbox
Flexbox ở trong bootstrap 4 đã trở lên dễ hơn bao giờ hết, và chỉ cần 1 thay đổi nhỏ trong file _variables.scss, khi đó ta có thể tận hưởng thành quả.
Sự ra đời của Yaoming(Card)
Card được ra đời để thay thế cho wells, thumbnails, panels.
Với phiên bản bootstrap 4 đã sử dụng card, cung cấp rất nhiều option cho nên nó có thể cân hết các công việc của wells, thumbnails hay panels.
Đã ngừng hỗ trợ IE8
IE8 đã là trình duyệt lỗi thời, mang trong nó vô cùng số lỗi, hạn chế nhiều về mặt công nghệ.
Việc ngừng hỗ trợ IE8 đồng nghĩa với việc bootstrap 4 có thể tận dụng tối ưu CSS mà không cần phải quan tâm đến trick hack CSS.
Ngoài ra, việc sử dụng jQuery 2.0 đã trở nên an toàn hơn.
và nếu như bạn vẫn sử dụng IE8 thì nên sử dụng bootstrap 3 nhé.
Hi vọng với những thông tin ở trên về getbootstrap 4 sẽ giúp bạn có thêm kiến thức bootstrap nhé. Chúc các bạn thành công.
