Twitter đã phát triển Bootstrap vào năm 2011 và được phát hành trên Github cùng năm. Bootstrap là một front-end-framework nguồn mở miễn phí để phát triển các trang web nhanh hơn, dễ dàng hơn, đáp ứng nhanh hơn và các trang web ưu tiên thiết bị di động. Bootstrap là framework phổ biến nhất vì khả năng tương thích với tất cả các trình duyệt hiện đại như Firefox, Chrome, Opera, Safari, Edge, v.v. Bootstrap có các lớp được xác định trước giúp công việc của nhà phát triển trở nên dễ dàng. Tuy nhiên, cần có hiểu biết cơ bản về HTML & CSS để làm việc với Bootstrap. Bạn có thể tạo các thiết kế đáp ứng cho các thiết bị khác nhau bằng Bootstrap. Nó chứa các mẫu thiết kế dựa trên HTML & CSS khác nhau, đặc biệt dành cho kiểu chữ, nút, bảng, biểu mẫu, mô hình, điều hướng, băng chuyền hình ảnh cũng như các plugin JavaScript tùy chọn Sự phát triển của BootstrapKể từ khi ra đời vào năm 2011, Bootstrap đã trải qua một chặng đường dài với bốn phiên bản cho đến nay. Infographic sau đây cho thấy sự phát triển của công nghệ này Bootstrap 3 so với Bootstrap 4Vào năm 2013, Bootstrap 3 đã được ra mắt và Bootstrap 4 được phát hành vào tháng 8 năm 2017. Hãy xem những thay đổi toàn cầu và cập nhật kỹ thuật qua các phiên bản này Thay đổi toàn cầu- Đã chuyển từ LESS sang SASS cho các tệp CSS nguồn
- Đã chuyển từ px - rem làm đơn vị CSS chính của Bootstrap, mặc dù pixel vẫn được sử dụng cho truy vấn phương tiện và hành vi lưới vì chế độ xem của thiết bị không bị ảnh hưởng bởi kích thước loại
- Kích thước phông chữ chung tăng từ 14px lên 16px
- Đã thêm một tầng lưới mới cho ~480px trở xuống
1. Cập nhật tệp nguồn CSS từ LESS sang SASSSASS mạnh hơn LESS. SASS có các chức năng như toán tử logic, vòng lặp, trộn, em, truy vấn phương tiện lồng nhau, mở rộng, v.v. SASS có rất nhiều tùy chọn biên dịch sang CSS. Do đó, nó trở nên dễ dàng đối với các nhà phát triển Bootstrap 2. Cập nhật cỡ chữ từ px sang remQuy tắc tốt nhất của kiểu chữ là sử dụng các đơn vị tương đối của rem (gốc em), em (đơn vị đo phông chữ) và px (số lượng độ dài bằng pixel trong HTML không chia tỷ lệ). Bootstrap 4 sử dụng rem linh hoạt hơn so với px. Với rem, Bạn cũng có thể tăng và giảm tỷ lệ các phần tử mà không bị kẹt với kích thước cố định. Điều này làm cho thiết kế dễ điều chỉnh hơn trong quá trình phát triển bằng cách làm cho thiết bị nội dung phản hồi nhanh 3. Hệ thống lưới được cập nhậtBootstrap3 có 4 lớp lưới (col-xs-3, col-sm-3, col-md-3, col-lg-3), trong khi phiên bản 4 có 5 lớp lưới (. col-,. col-sm-3,. col-md-3,. col-lg-3,. col-xl-3) Bootstrap 4 đã tách xs khỏi điểm dừng thấp nhất. Trong khi ở Bootstrap 3, điểm thấp hơn hoạt động với xs (. col-xs) nhưng hiện tại ở Bootstrap 4 nó đã được gỡ bỏ và chỉ sử dụng (. col-) cho điểm dừng thấp hơn Kích thước lưới Cực nhỏ <576px Nhỏ ≥576px Trung bình ≥768px Lớn ≥992px Cực lớn ≥1200px Chiều rộng thùng chứa tối đa Không có (ô tô) 540px 720px 960px 1140px tiền tố lớp col- col-sm- col-md- col-lg- col-xl- 4. Hỗ trợ trình duyệtBỏ hỗ trợ IE8 và iOS 6. v4 hiện chỉ có IE9+ và iOS 7+. Đối với các trang web cần một trong hai thứ đó, hãy sử dụng v3 5. lớp học tiện íchTrong Bootstrap 4, các lớp tiện ích mới đã được đưa vào mà không cản trở bất kỳ chức năng hiện có nào. Những bổ sung quan trọng như vậy là các lớp căn chỉnh văn bản đáp ứng, số float đáp ứng và nhúng đáp ứng. Ngoài việc cung cấp nhiều phím tắt, những phím tắt này còn cho phép thay đổi cách căn chỉnh văn bản, thả nổi các phần tử và điều chỉnh tỷ lệ khung hình của bất kỳ phương tiện nhúng nào (E. G. hidden-md-up ẩn một phần tử trên các khung nhìn trung bình, lớn và cực lớn. Bây giờ, thay vì. ẩn-md-up, sử dụng. d-md-không) 6. bảng đáp ứngBảng Bootstrap 4 hoàn toàn đáp ứng với lớp của nó (đáp ứng bảng) để cho phép cuộn ngang các bảng trên thiết bị di động, nó thoải mái với mọi kích thước màn hình máy tính để bàn, tab hoặc thiết bị di động Responsive tables no longer require a wrapping element. In simple words, in Bootstrap 3, .table-responsive class should be added to the parent . But in Bootstrap 4 , .table-responsive class to be added to element.Đã thêm một cái mới. tùy chọn đảo ngược bảng Đã thêm công cụ sửa đổi tiêu đề bảng. . thead-default và. thead-inverse Đổi tên các lớp theo ngữ cảnh để có một. bảng Prefix. Vì thế,. tích cực. thành công,. cảnh báo,. nguy hiểm và. bảng-thông tin để. kích hoạt bảng,. bảng thành công,. bảng cảnh báo,. bàn nguy hiểm và. thông tin bảng Bạn có thể quyết định khi nào bảng sẽ có thanh cuộn, tùy thuộc vào độ rộng màn hình Lớp Độ rộng màn hình bảng-responsive-sm < 576px bảng-responsive-md < 768px table-responsive-lg < 992px bảng-responsive-xl < 1200px Cửa sổ bật lên Bootstrap 4 tương tự như chú giải công cụ, đó là hộp bật lên xuất hiện khi người dùng nhấp vào bất kỳ phần tử nào, điểm khác biệt là cửa sổ bật lên có thể chứa nhiều nội dung hơn để hiển thị Nhấp vào tôi 8. Đổi tên các lớp cho hình ảnhĐã đổi tên. img đáp ứng với. img-chất lỏng.
Đã đổi tên. img được làm tròn thành. làm tròn.
Đã đổi tên. img-vòng tròn tới. hình tròn 9. dẫn đườngTrong Bootstrap 4, thành phần Điều hướng đã được đơn giản hóa rất nhiều. Một người được yêu cầu tạo một danh sách các phần tử mới sử dụng lớp cơ sở điều hướng mới nhất. Có một số bổ sung gần đây như lớp liên kết điều hướng, lớp mục điều hướng và các kiểu thanh điều hướng cũng Viết lại component với flexbox navbar-mặc định là bây giờ. navbar-light, mặc dù. navbar-dark vẫn giữ nguyên. Tuy nhiên, các lớp này không còn đặt màu nền nữa; .navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three s). đánh rơi. lớp dạng thanh điều hướng hoàn toàn. Nó không còn cần thiết nữa; . form-inline và áp dụng các tiện ích ký quỹ khi cần thiết Theo mặc định, thanh điều hướng không còn bao gồm lề dưới hoặc bán kính đường viền 10. Đã thêm lưới dựa trên FlexboxBootstrap 4 chuyển sang flexbox. Đây có thể coi là một trong những thành tựu lớn nhất và ý nghĩa nhất của phiên bản này. Điều này sẽ mang lại những lợi ích sau - Lưới dựa trên Flexbox
- Bậc lưới XLl mới
- Lưới bố cục tự động mới nhất
- Tùy chọn tùy chỉnh thanh điều hướng
- Tiện ích giãn cách mới
- Cấu hình Sans Glyphicons (Vùng không bị phình)
- kích thước đáp ứng
- Phao đáp ứng
- Ký quỹ tự động
- Định tâm dọc
Chúng tôi đang so sánh các thành phần kỹ thuật giữa Bootstrap 3 và Bootstrap 4 trong bảng sau. Thành phần Bootstrap 3 Bootstrap 4 Tệp CSS nguồn ÍT HƠN SASS Đơn vị CSS chính; Px. 14px Rem. 16px Đơn vị truy vấn phương tiện px px Phông chữ mặc định Helvetica Neue, Helvetica, Arial, sans-serif Sử dụng "ngăn xếp phông chữ gốc" (phông chữ hệ thống của người dùng), với dự phòng cho Helvetica Neue, Arial và sans-serif Bậc lưới 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) Cột bù đắp Sử dụng các lớp col-*-offset-* để bù cột. Ví dụ: col-md-offset-4 Sử dụng các lớp offset-*-* để bù cột. Ví dụ: offset-md-4 Bảng tối/nghịch đảo Không được hỗ trợ Đã thêm các bảng tối/nghịch đảo với. lớp học tối Hình ảnh phản hồi Sử dụng. lớp đáp ứng img Sử dụng. lớp img-chất lỏng Căn chỉnh hình ảnh Sử dụng. kéo sang phải,. kéo sang trái, và. các lớp trợ giúp khối trung tâm công dụng. m-x-auto thay vì. khối trung tâm để căn chỉnh hình ảnh cấp khối. Có thể sử dụng các loại khác nhau. pull-*- noneclasses để vô hiệu hóa thả nổi. Cũng hỗ trợ các thành phần Bootstrap 3 Glyphicons được hỗ trợ Không được hỗ trợ Thanh tiến trình Không sử dụng tiến trình cho thanh tiến trình. Thay vào đó, hãy áp dụng các lớp thanh tiến trình cho các phần tử div lồng nhau Việc sử dụng phần tử tiến trình đã bị loại bỏ trong Alpha 6. Bootstrap 4 hiện sử dụng lại phần tử div Phân trang mặc định .pagination needs to be added to |
