Phiên bản nào tốt nhất trong Bootstrap?

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ưới

Rất nhỏ

<576px

Bé 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-


5. khả năng tiếp cận

Khả năng truy cập tổng thể của bất kỳ dự án nào được xây dựng bằng Bootstrap phụ thuộc phần lớn vào đánh dấu của tác giả, kiểu dáng bổ sung và tập lệnh mà họ đã đưa vào. Tuy nhiên, với điều kiện là những điều này đã được triển khai chính xác, thì hoàn toàn có thể tạo các trang web và ứng dụng bằng Bootstrap.  

Trách nhiệm tuân thủ một trang web với WCAG 2. 0 và Mục 508 trực tiếp đặt lên vai các nhà phát triển giao diện người dùng.  

Các chủ đề do Bootstrap cung cấp luôn tuân theo các tiêu chuẩn web phổ biến và khiến các nhà phát triển ít phải đau đầu hơn để tạo các trang web có thể truy cập được cho tất cả mọi người.

Trong khi Bootstrap 3 cung cấp Bỏ qua điều hướng, Tiêu đề lồng nhau và độ tương phản màu, Bootstrap 4 đã cải thiện khả năng truy cập với các thành phần của nó.  

Kiểu dáng và bố cục từ phiên bản 4 có thể được áp dụng cho nhiều loại cấu trúc đánh dấu. Các thành phần như hộp thoại phương thức, menu thả xuống và chú giải công cụ tùy chỉnh đã được thiết kế để hoạt động cho người dùng từ cảm ứng, chuột đến bàn phím. Và các thành phần này cũng có thể hiểu được và hoạt động được với các công nghệ hỗ trợ như trình đọc màn hình

Giờ đây, các tác giả có thể sửa đổi/mở rộng các màu mặc định này theo cách thủ công để đảm bảo tỷ lệ tương phản màu phù hợp

Nội dung cần được ẩn trực quan nhưng vẫn có thể truy cập được bằng các công nghệ hỗ trợ giờ đây có thể được tạo kiểu bằng cách sử dụng. lớp chỉ sr.  

Bootstrap 4 cũng bao gồm hỗ trợ cho tính năng phương tiện giảm chuyển động ưu tiên. Tuy nhiên, hiện tại, hỗ trợ chỉ giới hạn ở Safari trên macOS và iOS

Các thành phần của Bootstrap được thiết kế có chủ đích theo cách có thể giải quyết các mối lo ngại về khả năng tiếp cận

Drupal đang đảm bảo tiêu chuẩn truy cập web, đọc cách.  

6. Đã thêm lưới dựa trên Flexbox

Flexbox là một trong những tính năng quan trọng và cốt yếu của Bootstrap 4 khiến nó khác với Bootstrap 3. Người ta có thể nhanh chóng quản lý căn chỉnh bố cục, thay đổi kích thước của các cột lưới, điều hướng các thành phần và quản lý việc hình thành các bố cục phức tạp một cách dễ dàng

Bootstrap 3 đã sử dụng float để xử lý bố cục không giống như flexbox trong Bootstrap 4

Bố cục hộp linh hoạt giúp thiết kế cấu trúc bố cục đáp ứng linh hoạt dễ dàng hơn mà không cần sử dụng float hoặc định vị.  

Mặc dù nó có các tính năng đáp ứng, nhưng với CSS tùy chỉnh, việc triển khai trở nên phức tạp hơn với Bootstrap 4.  

một hướng
Bạn có thể đặt hướng của các mục flex trong hộp chứa flex với các tiện ích hướng

Sử dụng. flex-row để đặt hướng ngang và sử dụng hướng ngang từ phía đối diện. flex-hàng-đảo ngược

Phiên bản nào tốt nhất trong Bootstrap?

Sử dụng. flex-column để đặt hướng ngang và sử dụng hướng ngang từ phía đối diện. flex-cột-đảo ngược

Bị bỏ lỡ trong phiên bản 3 chỉ được thêm vào trong phiên bản 4.  

Phiên bản nào tốt nhất trong Bootstrap?

b) Chứng minh nội dung
Bạn có thể căn chỉnh mục của mình theo bất kỳ hướng nào như bắt đầu, kết thúc, ở giữa, giữa hoặc xung quanh bằng. biện minh cho nội dung

Phiên bản nào tốt nhất trong Bootstrap?

c) Căn chỉnh các mục
Căn chỉnh nội dung của bạn trong hộp chứa flexbox với. sắp xếp các mục. Chọn từ đầu, cuối, giữa, đường cơ sở hoặc kéo dài

Phiên bản nào tốt nhất trong Bootstrap?

d) Tự sắp xếp
Sử dụng. tự căn chỉnh các mục trong hộp linh hoạt để thay đổi cách căn chỉnh riêng lẻ của chúng trên trục chéo. Tùy chọn như align-items. bắt đầu, kết thúc, căn giữa, đường cơ sở hoặc kéo dài

Phiên bản nào tốt nhất trong Bootstrap?

e) Ký quỹ tự động
Flexbox cung cấp cho bạn một số tính năng tuyệt vời khi sử dụng căn chỉnh với lề tự động. tùy chọn ba lề tự động này có thể được sử dụng làm mặc định (không có lề tự động) đẩy hai mục sang phải (. mr-auto), và đẩy hai mục sang trái (. ml-tự động)

Phiên bản nào tốt nhất trong Bootstrap?

f) Với các mục sắp xếp
Di chuyển theo chiều dọc một mục linh hoạt lên trên cùng hoặc dưới cùng của vùng chứa bằng cách trộn các mục căn chỉnh, hướng linh hoạt. cột và lề trên cùng. tự động hoặc lề dưới. Tự động

Phiên bản nào tốt nhất trong Bootstrap?

g) Bọc
Sử dụng. flex-nowrap  để bọc các mục linh hoạt trong một thùng chứa linh hoạt. với. flex-nowrap, gói với. flex-wrap, hoặc gói ngược lại với. flex-quấn-đảo ngược

Phiên bản nào tốt nhất trong Bootstrap?

h)  Đặt hàng
Sử dụng thứ tự của các mục linh hoạt cụ thể với một số ít. gọi món

Phiên bản nào tốt nhất trong Bootstrap?

7. lớp bù đắp

Các lớp bù trừ khá đơn giản để sử dụng, bạn chỉ cần thực hiện hành động - như. bù đắp chẳng hạn, kích thước lưới nhỏ nhất mà bạn cần nó áp dụng từ biểu mẫu trở lên - như -md và giá trị cho hành động được thêm vào trong số cột như -3 chẳng hạn, toàn bộ nội dung tập hợp các kết quả từ. offset-md-3 sẽ bù phần tử cột mong muốn bằng 3 cột ở bên phải từ vị trí mặc định của nó trên kích thước màn hình trung bình trở lên,. các lớp bù luôn chuyển mục đích của nó sang phải

Phiên bản nào tốt nhất trong Bootstrap?

8. Chủ đề Bootstrap

Các chủ đề Bootstrap là một gói cuối cùng gồm mã HTML, CSS và JavaScript cung cấp kiểu dáng, thành phần giao diện người dùng và bố cục trang tuyệt vời.  

Ngoài ra, chúng là các mẫu trang web dựng sẵn để bạn điều chỉnh và xây dựng dựa trên

Phiên bản nào tốt nhất trong Bootstrap?
Phiên bản nào tốt nhất trong Bootstrap?

Bootstrap 4 có các tùy chọn tốt hơn và ngẫu hứng hơn để tạo trang web của bạn một cách dễ dàng và nhanh chóng. Với phiên bản 4, bạn có thể sử dụng rất nhiều chủ đề có sẵn cho trang web, cPanel, bảng điều khiển và phần mềm của mình

Mặc dù không có mẫu nào như vậy từ Bootstrap 3
 

Phiên bản nào tốt nhất trong Bootstrap?
Phiên bản nào tốt nhất trong Bootstrap?

9. bảng đáp ứng

Bootstrap 4 table hoàn toàn đáp ứng với lớp của nó (table-responsive ) để 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.  

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

Tầng 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

10. Công dụng của popover và tooltip

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ỳ loại 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

11. Đổi tên các lớp cho hình ảnh

img-responsive đã được đổi thành. img-chất lỏng
img-rounded đã được đổi thành. làm tròn
img-circle thành hình tròn - có thể được sử dụng cho các phần tử khác (hộp, biểu tượng, nút)

12. Hỗ trợ trình duyệt
Bootstrap 3 đã hỗ trợ phiên bản IE8 và iOs 6 và Bootstrap 4 hiện chỉ hỗ trợ IE9+ và iOS 7+, - trong khi loại bỏ các phiên bản trước.  

để kết luận

Đây chỉ là một số tính năng có thể được sử dụng để phân biệt giữa Bootstrap 3 và 4.  

Bootstrap 3 chủ yếu là khung “ưu tiên thiết bị di động” được thiết kế với ý tưởng không có gì ngoài thứ tốt nhất. Với sự thay đổi của thời gian và công nghệ, Bootstrap 4 đã thu hẹp góc nhìn đồng thời mang đến khả năng tùy chỉnh tốt nhất.  

Phiên bản Bootstrap nào là tốt nhất 4 hoặc 5?

Bootstrap 5 bao gồm các điều khiển biểu mẫu tùy chỉnh. Các điều khiển biểu mẫu của Bootstrap 4 đã sử dụng bất kỳ giá trị đặt trước nào có sẵn trong mỗi trình duyệt. Các điều khiển biểu mẫu trong Bootstrap 5 sẽ có giao diện và cảm giác nhất quán hơn đáng kể trên tất cả các trình duyệt do thiết kế tùy chỉnh của chúng.

Tôi nên học phiên bản Bootstrap nào vào năm 2022?

Công cụ và khung giao diện người dùng web giao diện người dùng. Bootstrap 4 .

Bootstrap 3 hay 4 cái nào tốt hơn?

Mặc dù Bootstrap 3 cung cấp Bỏ qua điều hướng, Tiêu đề lồng nhau và độ tương phản màu, Bootstrap 4 đã cải thiện khả năng truy cập với các thành phần của nó . Kiểu dáng và bố cục từ phiên bản 4 có thể được áp dụng cho nhiều cấu trúc đánh dấu.

Tôi nên học Bootstrap 3 hay 4 hay 5?

Bootstrap là phiên bản Bootstrap mới nhất và nên được sử dụng nhưng nó chủ yếu phụ thuộc vào mã bạn đang viết. Nếu bạn đang sử dụng JQuery thay vì JS, thì hãy sử dụng Bootstrap 4 nhưng nếu bạn đang sử dụng JS thì nên ưu tiên Bootstrap 5 vì Bootstrap 5 không hỗ trợ JQuery.