Bootstrap là sự lựa chọn hàng đầu của các nhà phát triển front-end. Khung giao diện người dùng mã nguồn mở đáng tin cậy, người ta có thể dễ dàng phát triển một trang web hiện đại với các tính năng như khả năng đáp ứng trên thiết bị di động.
Để xây dựng một trang web hấp dẫn và đầy đủ chức năng, Bootstrap cung cấp cấu trúc cơ bản của HTML và CSS với các lớp được xác định trước giúp đáp ứng thiết bị.
Vào năm 2013, Bootstrap 3 đã được ra mắt và sau đó vào tháng 8 năm 2017, Bootstrap 4 đã được phát hành.
Bootstrap 3 so với Bootstrap 4
1. Cài đặt chủ đề
Bootstrap 3 chỉ có một tùy chọn để cài đặt Bootstrap trong một gói trong khi Bootstrap 4 có bốn tùy chọn.
Bootstrap 3
nuget
PM> Install-Package bootstrap -Version 3.3.7
Cài đặt Bootstrap 4 với Trình quản lý gói
Có rất nhiều trình quản lý gói có sẵn để dễ dàng tải xuống bootstrap 4 trong dự án của bạn
npm
Cài đặt Bootstrap trong Nút của bạn. ứng dụng hỗ trợ js với gói npm
$ npm install bootstrap
RubyGem
Cài đặt Bootstrap trong các ứng dụng Ruby của bạn bằng Bundler [được khuyến nghị] và RubyGems bằng cách thêm dòng sau vào Gemfile của bạn
đá quý 'bootstrap', '~> 4. 0. 0'
a] Ngoài ra, nếu bạn không sử dụng Bundler, bạn có thể cài đặt đá quý bằng cách chạy lệnh này
$ gem install bootstrap -v 4.0.0
nhà soạn nhạc
Bạn cũng có thể cài đặt và quản lý Sass và JavaScript của Bootstrap bằng Composer
$ composer require twbs/bootstrap:4.0.0
NuGet
Nếu bạn phát triển trong. NET, bạn cũng có thể cài đặt và quản lý CSS hoặc Sass và JavaScript của Bootstrap bằng NuGet
PM> Khởi động gói cài đặt
PM> Khởi động gói cài đặt. ngổ ngáo
2. Cập nhật tệp nguồn CSS từ LESS sang SASS
SASS mạnh hơn LESS. SASS có chức năng như toán tử logic, vòng lặp, trộn, em, rem, truy vấn phương tiện lồng nhau, mở rộng, v.v.
LESS rất dễ học và giúp bạn nhanh chóng chuyển sang SASS. Vì vậy, có vẻ như bây giờ là lúc để bạn cảm thấy thoải mái với SASS
Bạn cũng có thể đọc về chín cách để viết mã SASS tốt nhất
Có rất nhiều tùy chọn để biên dịch SASS thành CSS, vì vậy sẽ dễ sử dụng hơn.
3. Cập nhật cỡ chữ từ px sang rem
Thực tiễn tốt nhất về kiểu chữ trên web là sử dụng các đơn vị tương đối của rem, em và px. Bootstrap 4 sử dụng rem. Nó sẽ linh hoạt hơn so với px. Với rem, bạn có thể tăng 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ễ dàng điều chỉnh hơn trong quá trình phát triển giúp thiết bị nội dung phản hồi nhanh.
Một số tính năng có thể được sử dụng để phân biệt giữa Bootstrap 3 và 4
Thành phần
Bootstrap 3
Bootstrap 4
Tệp CSS nguồn
ÍT HƠN
SCSS
Đơ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ù trừ
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
4. Hệ thống lưới được cập nhật
Bootstrap3 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 đã xóa 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 trong Bootstrap 4, nó đã bị xóa và chỉ được sử dụng [. col-] cho điểm dừng thấp hơn.
Kích thước lướiRất nhỏ