Màn hình Bootstrap 5.2
Lớp này áp dụng các phép biến đổi 5 và 6 cho phần tử, kết hợp với các tiện ích định vị cạnh, cho phép bạn căn giữa một phần tử một cách tuyệt đối
Bằng cách thêm các lớp 7 hoặc 8, các phần tử chỉ có thể được định vị theo hướng ngang hoặc dọc
ví dụDưới đây là một số ví dụ thực tế về các lớp này Thư +99 tin nhắn chưa đọc Đánh dấu Cảnh báo tin nhắn chưa đọc
Bạn có thể sử dụng các lớp này với các thành phần hiện có để tạo các lớp mới. Hãy nhớ rằng bạn có thể mở rộng chức năng của nó bằng cách thêm các mục vào biến 3 Nhanh chóng quản lý bố cục, căn chỉnh và định cỡ của các cột lưới, điều hướng, thành phần, v.v. với bộ tiện ích flexbox đáp ứng đầy đủ. Đối với các triển khai phức tạp hơn, CSS tùy chỉnh có thể cần thiết Hệ thống lưới mặc định của Bootstrap đại diện cho đỉnh cao của hơn một thập kỷ kỹ thuật bố cục CSS, đã được thử và kiểm tra bởi hàng triệu người. Tuy nhiên, nó cũng được tạo mà không có nhiều tính năng và kỹ thuật CSS hiện đại mà chúng ta đang thấy trong các trình duyệt như CSS Grid mới Lưu ý—hệ thống Lưới CSS của chúng tôi đang thử nghiệm và chọn tham gia kể từ phiên bản 5. 1. 0. Chúng tôi đã đưa tính năng này vào CSS trong tài liệu của mình để minh họa cho bạn, nhưng tính năng này bị tắt theo mặc định. Tiếp tục đọc để tìm hiểu cách kích hoạt nó trong các dự án của bạn Làm thế nào nó hoạt độngVới Bootstrap 5, chúng tôi đã thêm tùy chọn để kích hoạt một hệ thống lưới riêng biệt được xây dựng trên CSS Grid, nhưng với một bước ngoặt Bootstrap. Bạn vẫn nhận được các lớp mà bạn có thể tùy ý áp dụng để xây dựng bố cục đáp ứng, nhưng với một cách tiếp cận hoàn toàn khác
Trong tương lai, Bootstrap có thể sẽ chuyển sang một giải pháp kết hợp vì thuộc tính 9 đã đạt được hỗ trợ trình duyệt gần như đầy đủ cho flexboxSự khác biệt chínhSo với hệ thống lưới mặc định
ví dụba cộtCó thể tạo ba cột có chiều rộng bằng nhau trên tất cả các chế độ xem và thiết bị bằng cách sử dụng các lớp 8. Thêm để thay đổi bố cục theo kích thước khung nhìn
Phản ứng nhanh nhẹnSử dụng các lớp phản hồi để điều chỉnh bố cục của bạn trên các chế độ xem. Ở đây, chúng tôi bắt đầu với hai cột trên khung nhìn hẹp nhất, sau đó phát triển thành ba cột trên khung nhìn trung bình trở lên ________số 8_______ So sánh điều đó với bố cục hai cột này ở tất cả các chế độ xem
góiCác mục lưới tự động chuyển sang dòng tiếp theo khi không còn chỗ trống theo chiều ngang. Lưu ý rằng 9 áp dụng cho khoảng cách ngang và dọc giữa các mục lưới
bắt đầuCác lớp bắt đầu nhằm mục đích thay thế các lớp bù của lưới mặc định của chúng tôi, nhưng chúng không hoàn toàn giống nhau. CSS Grid tạo một mẫu lưới thông qua các kiểu thông báo cho trình duyệt “bắt đầu tại cột này” và “kết thúc tại cột này. ” Những tài sản đó là 0 và 1. Các lớp bắt đầu là cách viết tắt của lớp trước. Ghép nối chúng với các lớp cột để định kích thước và căn chỉnh các cột của bạn theo cách bạn cần. Các lớp bắt đầu bắt đầu lúc 2 vì 3 là một giá trị không hợp lệ cho các thuộc tính này
cột tự độngKhi không có lớp nào trên các mục lưới (con trực tiếp của 8), mỗi mục lưới sẽ tự động được định cỡ cho một cột
Hành vi này có thể được trộn lẫn với các lớp cột lưới
làm tổTương tự như hệ thống lưới mặc định của chúng tôi, Lưới CSS của chúng tôi cho phép dễ dàng lồng các 8. Tuy nhiên, không giống như mặc định, lưới này kế thừa các thay đổi trong hàng, cột và khoảng cách. Hãy xem xét ví dụ dưới đây
Trong thực tế, điều này cho phép bố cục tùy chỉnh và phức tạp hơn khi so sánh với hệ thống lưới mặc định của chúng tôi
tùy chỉnhTùy chỉnh số cột, số hàng và độ rộng của các khoảng trống bằng các biến CSS cục bộ Biến Giá trị dự phòng Mô tả 8 2Số lượng hàng trong mẫu lưới của bạn 7 1Số lượng cột trong mẫu lưới của bạn_______13_______8 3Kích thước của khoảng cách giữa các cột (dọc và ngang)Các biến CSS này không có giá trị mặc định; . Ví dụ: chúng tôi sử dụng 4 cho các hàng Lưới CSS của mình, bỏ qua 8 vì điều đó chưa được đặt ở bất kỳ đâu. Khi đúng như vậy, phiên bản 8 sẽ sử dụng giá trị đó thay vì giá trị dự phòng của 2Không có lớp lướiCác phần tử con ngay lập tức của 8 là các mục lưới, vì vậy chúng sẽ được định cỡ mà không cần thêm một lớp 9 một cách rõ ràng
Cột và khoảng trốngĐiều chỉnh số lượng cột và khoảng cách
0Thêm hàngThêm nhiều hàng hơn và thay đổi vị trí của các cột 1Khoảng cáchChỉ thay đổi các khoảng trống dọc bằng cách sửa đổi 0. Lưu ý rằng chúng tôi sử dụng 9 trên 8, nhưng 0 và 4 có thể được sửa đổi khi cần thiết
Do đó, bạn có thể có các 9 dọc và ngang khác nhau, có thể lấy một giá trị (tất cả các cạnh) hoặc một cặp giá trị (dọc và ngang). Điều này có thể được áp dụng với kiểu nội tuyến cho 9 hoặc với biến CSS 8 của chúng tôi
ngổ ngáoMột hạn chế của CSS Grid là các lớp mặc định của chúng ta vẫn được tạo bởi hai biến Sass, 8 và 9. Điều này xác định trước một cách hiệu quả số lượng lớp được tạo trong CSS đã biên dịch của chúng tôi. Bạn có hai lựa chọn ở đây
Ví dụ: bạn có thể tăng số lượng cột và thay đổi kích thước khoảng cách, sau đó định kích thước “cột” của bạn bằng cách kết hợp các kiểu nội tuyến và các lớp cột CSS Grid được xác định trước (ví dụ:. g. , 8)
Kích thước màn hình nhỏ trong Bootstrap 5 là gì?Thiết bị nhỏ được định nghĩa là có chiều rộng màn hình từ 576 pixel đến 767 pixel .
Kích thước màn hình trung bình Bootstrap là gì?Thiết bị trung bình được xác định là có chiều rộng màn hình từ 768 pixel đến 991 pixel .
Làm cách nào để ẩn div trong chế độ xem trên thiết bị di động bằng Bootstrap 5?Để ẩn các phần tử, chỉ cần sử dụng. d-none lớp hoặc một trong những. d-{sm,md,lg,xl,xxl}-none class cho bất kỳ biến thể màn hình phản hồi nào.
Màn hình Bootstrap là gì?Giá trị hiển thị Bootstrap
. chặn Nội tuyến. Nó được sử dụng để hiển thị một phần tử dưới dạng bộ chứa khối cấp độ nội tuyến. lưới. Nó được sử dụng để hiển thị một phần tử dưới dạng bộ chứa lưới cấp khối. The element generates one or more inline element boxes without any line break before and after them. inline-block. It is used to display an element as an inline-level block container. grid. It is used to display an element as a block-level grid container. |