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
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf 1. Bảo vệ khỏi tấn công DoS bằng giới hạn số...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng tính bảo mật cho server (VPS & Dedicated)....
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
V. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn code php sau: <?php if (isset($_GET['file'])) { $file...
Directory traversal vulnerabilities (phần 3)
V. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu vào người dùng Xét đoạn code php sau:...
Directory traversal vulnerabilities (phần 2)
III. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác nhau. Lỗ hổng thường xuất hiện khi chương...