Bài 30 - Sự khác nhau giữa Bootstrap 3 và Bootstrap 4 - Phần 2
Bài đăng này đã không được cập nhật trong 5 năm
Chào các bạn,
Tiếp nối bài viết trước Sự khác nhau giữa Bootstrap 3 và Bootstrap 4 bài này mình liệt kê tiếp những phần khác cho các bạn cùng tham khảo nhé!
| Component | Bootstrap 3 | Bootstrap 4 |
|---|---|---|
| Buttons | ||
| Styles | Bao gồm các class .btn-default và .btn-info. Riêng với class .btn-secondary không được sử dụng trong Bootstrap 3. | Giới thiệu tới người sử dụng class .btn-secondary, .btn-light, và .btn-dark. Ngưng sử dụng class .btn-default. Trường hợp đặc biệt là class .btn-info đã bị ngừng sử dụng nhưng sau đó lại được dùng trở lại. |
| Outline Buttons | Không hỗ trợ. | Giới thiệu class .btn-outline-* để style cho các button outline với các màu outline tới người sử dụng. |
| Button Sizes | Class .btn-xs được sử dụng. | Loại bỏ class .btn-xs. Chỉ sử dụng các class .btn-sm và .btn-lg để định nghĩa size co button. |
| Input groups | ||
| Classes | Bootstrap 3 sử dụng .input-group-addon và .input-group-btn classes. | Bootstrap 4 đã loại bỏ 2 class .input-group-addon và .input-group-btn classes. Thay vào đó là 2 class .input-group-prepend và .input-group-append. Ngoài ra, Bootstrap 4 còn thêm class .input-group-text cho các đoạn text trong group |
| Images | ||
| Responsive Images | Sử dụng .img-responsive class. | Sử dụng .img-fluid class. |
| Image Alignment | Sử dụng các classes .pull-right, .pull-left, và .center-block để hỗ trợ việc căn chỉnh ảnh | Sử dụng .m-x-auto thay vì .center-block để căn chỉnh. Trong Bootstrap 4 có thể sử dụng các class hỗ trợ responsive như pull-#-right và .pull-#-left hoặc có thể sử dụng các class .text-#-left, .text-#-center, and .text-#-right cho các thành phần cha chứa image cần chỉnh. Ngoài ra có thể sử dụng class .pull-#-none để disable floating (# là các class md, lg, xl). |
| Media Objects | ||
| Classes | Bootstrap 3 sử dụng khá nhiều các class khác nhau cho phần media, bao gồm: media, .media-body .media-object, .media-heading, .media-right, .media-left, .media-list và .media-body. | Bootstrap 4 chỉ sử dụng duy nhất 1 class .media. Khoảng cách được áp dụng khi sử dụng các class trong phần spacer utilities. Bootstrap 4 sử dụng flexbox cho mọi thành phần nên media cũng áp dụng flexbox. |
| Dropdowns | ||
| Structure | Áp dụng dropdown list (Ví dụ: sử dụng <ul> và <li>) . | Dropdown có thể built từ <ul> hoặc bằng cách thêm class .dropdown-item vào <a> hoặc <button>. Tất cả các thành phần này được gói gọn trong trong 1 <div> hoặc <ul> với class .dropdown-menu. |
| Menu Headers | Thêm class .dropdown-header cho <li> . | Thêm class .dropdown-header cho <h1> hoặc <h2> |
| Dividers | Thêm class .divider cho <li> bởi bootstrap 3 sử dụng lists tag để tạo dropdown. | Sử dụng class .dropdown-divider cho <div> element. |
| Disabled Menu Items | Sử dụng class .disabled thêm vào <li> element | Thêm class .disabled cho <a> element. |
| Button Groups | ||
| Justified? | Hỗ trợ justified cho button groups thông qua việc sử dụng class .btn-group-justified. | Không hỗ trợ. |
| Extra Small? | Hỗ trợ sử dụng kích thước nhỏ cho button groups thông qua việc sử dụng class .btn-group-xs. | Không hỗ trợ do đã bỏ class .btn-group-xs. |
| Navbars | ||
| Colors | Giới hạn phần tùy chọn màu sắc có sẵn trong phần cài đặt | Có thêm các option mới bằng cách sử dụng 2 class .navbar-light và the .navbar-dark. Cho phép sử dụng class .bg-* để trong phần navbars (* ở đây là các màu). |
| Navbar Alignment | Sử dụng .navbar-right, .navbar-left class để căn chỉnh các thành phần trong navbar. | Không khuyến khích sử dụng các class pull-#-right và .pull-#-left hoặc .pull-#-none (# là các class md, lg, xl). Thay vào đó, có thể sử dụng flexbox hoặc các class trong phần spacing utilities. |
| Navbar Forms | Thêm class .navbar-form cho form nếu sử dụng form trong navbars. | Bootstrap 4 không sử dụng class .navbar-form bởi nó không cần thiết nữa. |
| Fixed Navbars | Sử dụng class .navbar-fixed-top hoặc .navbar-fixed-bottom để fix navbar ở top hoặc bottom. | Thay đổi thành sử dụng 2 class .fixed-top và .fixed-bottom để cố định vị trí của navbar ở top hoặc bottom. |
Vậy là qua 2 bài, các bạn cũng đã biết được kha khá sự thay đổi, nâng cấp của bootstrap 4 so với bootstrap 3. Theo như cuối bài phần 1, mình có nói bài này sẽ liệt kê hết các phần khác nhau còn lại giữa bootstrap 3 và bootstrap 4. Tuy nhiên nó còn khá ài, vì vậy mình quyết định cắt sang phần 3. Và phần 3 cũng là phần kết thúc luôn.
Bài viết được tham khảo từ: https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm
All rights reserved
