Lưới bootstrap 5.1

Một trang web có khả năng đáp ứng cao đang là một yêu cầu bắt buộc đối với những nhà phát triển dịch vụ dựa trên web nền tảng. Nếu bạn đang tìm công nghệ hỗ trợ, Tino Group sẽ giới thiệu với bạn công nghệ Bootstrap – một trong những framework HTML, CSS và JavaScript mạnh nhất ở thời điểm hiện tại. Cùng nhau tìm hiểu về Bootstrap 5, phiên bản mới nhất của Bootstrap các bạn nhé

Tìm hiểu về Bootstrap

Bootstrap là gì?

Bootstrap là một khung mã nguồn mở hoàn toàn miễn phí được phát triển dựa trên các ngôn ngữ. HTML, CSS và Javascript. Với Bootstrap, bạn hoàn toàn có thể phát triển một trang web có độ phản hồi cao trên nhiều thiết bị khác nhau

Qua 1 thập kỷ phát triển, phiên bản mới nhất của Bootstrap vào ngày 12/6/2021 là Bootstrap 5. 1. 3. Từ logo, bộ tài liệu hướng dẫn đến những nâng cấp khác khiến Bootstrap 5 trở thành một trong những dấu hiệu đặc biệt trong lịch sử phát triển của Bootstrap

Lịch sử phát triển của Bootstrap

Dù công nghệ của Bootstrap mới phát triển trong vòng 1 thập kỷ vừa qua. Nhưng Bootstrap đã nhanh chóng trở thành một trong những framework được sử dụng nhiều nhất trên thế giới với mục đích tạo ra những Website có tính Responsive cao

Sau đây, chúng ta sẽ tìm hiểu về sự phát triển của Bootstrap nhé

version

Ngày phát hành

Changes and main content

1. 0

19/08/2011

Bootstrap time play and not support Mobile

2. 0

31/01/2012

Bổ sung hệ thống Grid-Layout 12 cột. Thêm một số thành phần (thành phần) mới, cũng như thay đổi một vài thành phần sẵn có. Mobile not support

3. 0

19/08/2013

Các thành phần được thiết kế lại theo phong cách thiết kế phẳng (thiết kế phẳng). Các cột quan trọng khi Bootstrap hỗ trợ các thiết bị di động

4. 0

19/01/2018

Bootstrap 4 gần như viết lại hoàn toàn từ Bootstrap 3. Phiên bản này được đánh giá là dễ sử dụng hơn rất nhiều so với phiên bản trước

5. 0

05/05/2021

Có thêm menu canvas menu thành phần và loại bỏ sự phụ thuộc vào jQuery. Thay vào đó, họ chuyển sang JavaScript Vanilla

Nếu bạn đang cần tìm các bản vá cho từng phiên bản Bootstrap từ phiên bản 1 đến phiên bản 5, bạn có thể xem tại đây

Tìm hiểu về Bootstrap 5

Bootstrap 5 có gì mới?

Logo mới

Có thể bạn chưa biết, logo mới của Bootstrap – Bootstrap 5 có sự thay đổi từ hình vuông thành cặp dấu ngoặc đặc trưng của CSS đấy. Đây chỉ là một thay đổi nhỏ nhưng vẫn không thay đổi giá trị ban đầu Bootstrap đặt ra là miễn phí, mã nguồn mở

Tài liệu hướng dẫn được làm lại

Nếu trước đây đã từng có thời gian dài theo dõi bộ tài liệu hướng dẫn của Bootstrap, bạn sẽ khá bất ngờ với sự sắp xếp lại toàn bộ tài liệu với nội dung được cập nhật mới và cấu trúc rõ ràng hơn

Nói không với jQuery

Bạn biết đấy, với Bootstrap 5, nhóm Bootstrap đã quyết định loại bỏ hoàn toàn jQuery ra khỏi mã của mình. Với sự thay đổi lớn này, dung lượng mã sẽ giảm xuống mức tối ưu hơn, trang web tốc độ cũng sẽ được cải thiện nhiều hơn

Với JavaScript Vanilla (JavaScript thuần) làm chủ đạo, chất lượng code của Bootstrap 5 được cải thiện đáng kể so với người tiền nhiệm Bootstrap 4

QUẢNG CAO

Điều này cũng dẫn đến công việc. Nút chuyển đổi sẽ được thay thế bằng Hộp kiểm và Nút radio

API đã được cập nhật toàn diện

Một trong những điểm rất đáng lưu ý khác của Bootstrap 5 chính là toàn bộ những API tiện ích đã được cải thiện đáng kể như

• Hệ thống lưới đã được nâng cấp và cải thiện khả năng nhìn thấy
• Tăng thêm một tầng xxl mới cho lưới
• Toàn bộ tùy chọn Bố cục đã được thay thế bằng hệ thống lưới mới
• Bổ sung thêm những lớp mới cho khoảng cách theo chiều dọc
• Thêm giá trị vị trí và giá trị tương đối không còn mặc định ở cột nữa

Ngoài ra, chúng ta có thêm một số tiện ích mới như

• Change name font-weight to. fw
• Move. làm tròn 1,. round-2 và. round-3 for size. small, medium and large of border-radius
• Họ. tràn có thể nhìn thấy và. cuộn tràn

Cải thiện CSS biến tùy chọn

Một bước đi “ấn tượng” khác của Bootstrap 5 chính là đội ngũ phát triển đã mạnh dạng “nghỉ chơi” với Internet Explorer. Một ví dụ cụ thể chính là thành phần. bảng với các biến cục bộ để bạn có thể thiết kế một cách dễ dàng hơn

.table {
--bs-table-bg: #{$table-bg};
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg};
--bs-table-active-color: #{$table-active-color};
--bs-table-active-bg: #{$table-active-bg};
--bs-table-hover-color: #{$table-hover-color};
--bs-table-hover-bg: #{$table-hover-bg};
// Styles here...
}

Ngoài ra, bản màu đã được mở rộng thêm với rất nhiều mới với độ tương phản màu được cải thiện rất nhiều và tích hợp sẵn trong Bootstrap 5 đấy. Với khả năng tùy chỉnh cao, Bootstrap 5 sẽ trở nên dễ dàng tiếp cận hơn đối với những người bạn lần đầu sử dụng

Cách tải Bootstrap 5

Có rất nhiều cách để tải Bootstrap 5 về và sử dụng cho dự án của bạn. Sau đây, Tino Group sẽ giới thiệu những cách phổ biến nhất nhé

Nếu bạn cần tải các phiên bản khác nhau, bạn chỉ cần thay số phiên bản, ví dụ như 5. 1. 3 đến 5. 0. 2 nếu bạn sử dụng phiên bản cũ hơn trong các lệnh bên dưới

Tải Bootstrap 5 theo cách truyền thống

Tại đây, Tino Group sẽ liệt kê ra danh sách liên kết các mã gói biên dịch sẵn có cho phiên bản Bootstrap v5. 0. 2 newest for you

• Các gói đã biên dịch, có thêm các plugin CSS được rút gọn và JavaScript được rút gọn. Nhưng không có tài liệu, nguồn hoặc các phụ thuộc JavaScript khác trong gói. Bấm để tải xuống
• Gói mã nguồn
• Một số ví dụ mẫu có sẵn, bạn có thể tải xuống tại đây

Tải Bootstrap 5 bằng npm

Nếu bạn đang sử dụng Node. js, tải Bootstrap 5 bằng npm ngay trong Node. ứng dụng hỗ trợ js bằng mã

npm install Bootstrap

Tải Bootstrap 5 bằng sợi

Mã để bạn chạy trong sợi trên Nút. js

yarn add Bootstrap

Tải Bootstrap 5 trên RubyGems

Nếu bạn đang sử dụng Ruby, bạn có thể tải Bootstrap bằng cách chạy mã trong Gemfile của bạn như sau (chỉ sử dụng 1 trong 2 lệnh)

gem 'Bootstrap', '~> 5.1.3'
gem install Bootstrap -v 5.1.3

Tải Bootstrap 5 bằng Composer

Nếu muốn sử dụng tải Bootstrap 5 bằng Composer, bạn chỉ cần chạy một dòng mã đơn giản như sau

composer require twbs/Bootstrap:5.1.3

Vì vậy, chúng ta đã tìm hiểu về Bootstrap 5 là gì cũng như tìm hiểu về các tính năng của Bootstrap 5 và cách tải Bootstrap 5 cho dự án của bạn rồi đó. Tino Group chúc bạn sẽ có thể sử dụng Bootstrap 5 một cách tốt nhất cho dự án của mình

Những câu hỏi thường gặp về Bootstrap 5