Sự khác biệt giữa Bootstrap 3 và 4

Sự miêu tả

Bootstrap là một khuôn khổ giao diện người dùng đầu tiên trên thiết bị di động mạnh mẽ và phổ biến để xây dựng các trang web đầu tiên dành cho thiết bị di động đáp ứng trên web bằng cách sử dụng khuôn khổ HTML, CSS và JS.

Bảng sau đây cho thấy sự khác biệt trong Bootstrap 3 và Bootstrap 4:

Không.	Thành phần	Bootstrap 3	Bootstrap 4
1	Tệp nguồn CSS	ÍT HƠN	SCSS
2	Hệ thống lưới điện	Hệ thống lưới 4 tầng (xs, sm, md, lg)	Hệ thống lưới 5 tầng (xs, sm, md, lg, xl)
3	Đơn vị CSS	px	rem
4	Cỡ chữ	14px	16px
5	Cấu trúc thả xuống	Được tạo bằng <ul> và <li>	Được tạo bằng <ul> hoặc <div>
6	Cột bù trừ	col-md-offset-4	offset-md-4
7	Hình ảnh	.img-responsive class	.img-chất lỏng lớp
số 8	Những cái bàn	Thêm lớp .table-đáp ứng vào phần tử <div> chính	Thêm lớp .table-đáp ứng vào phần tử <table>
9	Glyphicons	Được hỗ trợ	Không được hỗ trợ
10	Đối tượng phương tiện	Sử dụng các lớp cho các đối tượng phương tiện, chẳng hạn như .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list và .media-body	Chỉ sử dụng lớp .media cho các đối tượng media.
11	Bảng tối / nghịch đảo	Không được hỗ trợ	Sử dụng lớp .table-dark để tạo bảng tối / nghịch đảo
12	Hộp kiểm và nút radio	Hiển thị các hộp kiểm và nút radio bằng cách sử dụng .radio , .radio-inline , .checkbox , hoặc .checkbox-inline lớp	Hiển thị các hộp kiểm và nút radio bằng cách sử dụng .form kiểm tra , .form kiểm tra nhãn , .form kiểm tra đầu vào , hoặc .form-check-inline lớp
13	Kích thước kiểm soát biểu mẫu	Tăng hoặc kích thước giảm một kiểm soát đầu vào bằng cách sử dụng .input-lg và .input-sm lớp	Tăng hoặc giảm kích thước của một kiểm soát đầu vào bằng cách sử dụng .form-control-lg và .form-control-sm lớp
14	Văn bản trợ giúp	Hiển thị văn bản trợ giúp bằng cách sử dụng lớp .help-block	Hiển thị văn bản giúp đỡ bằng cách sử dụng .form văn lớp
15	Phong cách	Sử dụng các lớp .btn-default và .btn-info trên các nút	Sử dụng các lớp .btn-Secondary , .btn-light và .btn-dark trên các nút và bỏ lớp .btn-default .
16	Các nút phác thảo	Không được hỗ trợ	Phong cách các nút với màu phác thảo bằng cách sử dụng .btn-outline- * lớp
17	Kích thước nút	Lớp .btn-xs có sẵn	Chỉ .btn-sm và .btn-lg lớp và bỏ .btn-xs lớp
18	Tiêu đề menu	Sử dụng lớp .dropdown-header cho thẻ li	Sử dụng lớp .dropdown-header cho các thẻ h1 - h2
19	Ngăn cách	Sử dụng lớp .divider trong phần tử li	Sử dụng lớp .dropdown-divider trong phần tử div
20	Điều hướng cố định	Vá navbar đến đỉnh hoặc đáy bằng .navbar cố định-top và .navbar-cố định dưới lớp	Vá navbar đến đỉnh hoặc đáy bằng .fixed-top và .fixed đáy lớp
21	Máy nhắn tin	Align trang bằng cách sử dụng .previous và .next lớp	Không được hỗ trợ
22	Chiều rộng đầy đủ của Jumbotron	Nó không sử dụng lớp .jumbotron-chất lỏng trên jumbotron có chiều rộng đầy đủ	Nó sử dụng lớp .jumbotron-chất lỏng cho các jumbotron có chiều rộng đầy đủ
23	Mục băng chuyền	Sử dụng lớp .item cho các mục băng chuyền.	Sử dụng .carousel-item class cho các mục băng chuyền.
24	Wells, Panels và Thumbnail	Được hỗ trợ	Không được hỗ trợ. Sử dụng thẻ thay thế
25	Điều hướng nội tuyến	Nó không bao gồm .nav-inline lớp	Hiển thị navs như inline bằng .nav-inline lớp