Màn hình Bootstrap 5.2

Lớp này áp dụng các phép biến đổi

  
  
  
  
  
  
  
  
  
 Nội dung chính Show
 
Làm thế nào nó hoạt động
Sự khác biệt chính
Phản ứng nhanh nhẹn
bắt đầu
cột tự động
tùy chỉnh
Không có lớp lưới
Cột và khoảng trống
Thêm hàng
Khoảng cách
ngổ ngáo
Kích thước màn hình nhỏ trong Bootstrap 5 là gì?
Kích thước màn hình trung bình Bootstrap là gì?
Làm cách nào để ẩn div trong chế độ xem trên thiết bị di động bằng Bootstrap 5?
Màn hình Bootstrap là gì?
 

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

  Mails +99 unread messages



  Marker 



  Alerts unread messages

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 động

Vớ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

• CSS Grid được chọn tham gia. Vô hiệu hóa hệ thống lưới mặc định bằng cách thiết lập

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  5 và kích hoạt CSS Grid bằng cách thiết lập

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  6. Sau đó, biên dịch lại Sass của bạn

• Thay thế các phiên bản của

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  7 bằng

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  8. Lớp

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  8 thiết lập

  
    
  .g-col-6
    
  .g-col-6
  

  0 và tạo một

  
    
  .g-col-6
    
  .g-col-6
  

  1 mà bạn xây dựng dựa trên HTML của mình

• Thay thế lớp

  
    
  .g-col-6
    
  .g-col-6
  

  2 bằng lớp

  
    
  .g-col-6
    
  .g-col-6
  

  3. Điều này là do các cột Lưới CSS của chúng tôi sử dụng thuộc tính

  
    
  .g-col-6
    
  .g-col-6
  

  4 thay vì

  
    
  .g-col-6
    
  .g-col-6
  

  5

• Kích thước cột và máng xối được đặt thông qua các biến CSS. Đặt những thứ này trên cha mẹ

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  8 và tùy chỉnh theo cách bạn muốn, nội tuyến hoặc trong biểu định kiểu, với

  
    
  .g-col-6
    
  .g-col-6
  

  7 và

  
    
  .g-col-6
    
  .g-col-6
  

  8

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

  
.g-col-6
  
.g-col-6

9 đã đạt được hỗ trợ trình duyệt gần như đầy đủ cho flexbox

Sự khác biệt chính

So với hệ thống lưới mặc định

• Các tiện ích Flex không ảnh hưởng đến các cột Lưới CSS theo cùng một cách

• Khoảng trống thay thế máng xối. Thuộc tính

  
    
  .g-col-6
    
  .g-col-6
  

  9 thay thế

  
    
  .g-col-6
    
  .g-col-6
  
    
  .g-col-6
    
  .g-col-6
  

  1 nằm ngang từ hệ thống lưới mặc định của chúng tôi và hoạt động giống như

  
    
  .g-col-6
    
  .g-col-6
  
    
  .g-col-6
    
  .g-col-6
  

  2

• Như vậy, không giống như

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  7,

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  
  
  
  
    
  .g-col-6 .g-col-md-4
  

  8 không có lợi nhuận âm và tiện ích lợi nhuận không thể được sử dụng để thay đổi máng xối lưới. Khoảng cách lưới được áp dụng theo chiều ngang và chiều dọc theo mặc định. Xem để biết thêm chi tiết

• Các kiểu nội tuyến và tùy chỉnh nên được xem như là sự thay thế cho các lớp sửa đổi (e. g. ,

  
    
  .g-col-6
    
  .g-col-6
  
    
  .g-col-6
    
  .g-col-6
  

  5 so với

  
    
  .g-col-6
    
  .g-col-6
  
    
  .g-col-6
    
  .g-col-6
  

  6)

• Việc lồng nhau hoạt động tương tự, nhưng có thể yêu cầu bạn đặt lại số lượng cột của mình trên mỗi phiên bản của một

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  8 lồng nhau. Xem chi tiết

ví dụ

ba cột

Có 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

  
.g-col-6
  
.g-col-6

  
.g-col-6
  
.g-col-6

8. Thêm để thay đổi bố cục theo kích thước khung nhìn

  
.g-col-4
  
.g-col-4
  
.g-col-4

Phản ứng nhanh nhẹn

Sử 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-col-6
  
.g-col-6

gói

Cá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

  
.g-col-6
  
.g-col-6

9 áp dụng cho khoảng cách ngang và dọc giữa các mục lưới

  
.g-col-6
  
.g-col-6

  
.g-col-6
  
.g-col-6

bắt đầu

Cá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à

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

0 và

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

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

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

2 vì

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

3 là một giá trị không hợp lệ cho các thuộc tính này

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

cột tự động

Khi không có lớp nào trên các mục lưới (con trực tiếp của

  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4

8), mỗi mục lưới sẽ tự động được định cỡ cho một cột

  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1

Hành vi này có thể được trộn lẫn với các lớp cột lưới

  
.g-col-6
  
1
  
1
  
1
  
1
  
1
  
1

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

  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4

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

• Chúng tôi ghi đè số lượng cột mặc định bằng một biến CSS cục bộ.

  
    
  .g-col-3 .g-start-2
    
  .g-col-4 .g-start-6
  

  6
• Trong cột tự động đầu tiên, số lượng cột được kế thừa và mỗi cột bằng một phần ba chiều rộng có sẵn
• Trong cột tự động thứ hai, chúng tôi đã đặt lại số lượng cột trên

  
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
    
  .g-col-6 .g-col-md-4
  

  8 lồng nhau thành 12 (mặc định của chúng tôi)
• Cột tự động thứ ba không có nội dung lồng nhau

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

  

    First auto-column
    

      
Auto-column
      
Auto-column
    

  

  

    Second auto-column
    

      
6 of 12
      
4 of 12
      
2 of 12
    

  

  
Third auto-column

tùy chỉnh

Tù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ả

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

8

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

2Số lượng hàng trong mẫu lưới của bạn

  
.g-col-6
  
.g-col-6

7

  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1

1Số lượng cột trong mẫu lưới của bạn_______13_______8

  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1

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

  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1

4 cho các hàng Lưới CSS của mình, bỏ qua

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

8 vì điều đó chưa được đặt ở bất kỳ đâu. Khi đúng như vậy, phiên bản

  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4

8 sẽ sử dụng giá trị đó thay vì giá trị dự phòng của

  
.g-col-3 .g-start-2
  
.g-col-4 .g-start-6

2

Không có lớp lưới

Các phần tử con ngay lập tức của

  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4

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

  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1
  
1

9 một cách rõ ràng

  
Auto-column
  
Auto-column
  
Auto-column

Cột và khoảng trống

Điều chỉnh số lượng cột và khoảng cách

  
.g-col-2
  
.g-col-2

  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4

0

Thêm hàng

Thêm nhiều hàng hơn và thay đổi vị trí của các cột

  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4

1

Khoảng cách

Chỉ thay đổi các khoảng trống dọc bằng cách sửa đổi

  
.g-col-6
  
1
  
1
  
1
  
1
  
1
  
1

0. Lưu ý rằng chúng tôi sử dụng

  
.g-col-6
  
.g-col-6

9 trên

  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4
  
.g-col-6 .g-col-md-4

8, nhưng

  
.g-col-6
  
1
  
1
  
1
  
1
  
1
  
1

0 và

  
.g-col-6
  
1
  
1
  
1
  
1
  
1
  
1

4 có thể được sửa đổi khi cần thiết

  
.g-col-6
  
.g-col-6

  
.g-col-6
  
.g-col-6

Do đó, bạn có thể có các

  
.g-col-6
  
.g-col-6

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

  
.g-col-6
  
.g-col-6

9 hoặc với biến CSS

  
.g-col-6
  
.g-col-6

8 của chúng tôi

  
.g-col-6
  
.g-col-6

  
.g-col-6
  
.g-col-6

ngổ ngáo

Mộ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,

  
.g-col-6
  
1
  
1
  
1
  
1
  
1
  
1

8 và

  
.g-col-6
  
1
  
1
  
1
  
1
  
1
  
1

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

• Sửa đổi các biến Sass mặc định đó và biên dịch lại CSS của bạn
• Sử dụng các kiểu nội tuyến hoặc tùy chỉnh để tăng cường các lớp được cung cấp

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. ,

  
.g-col-6
  
.g-col-6

  
.g-col-6
  
.g-col-6

8)

Kích thước màn hình nhỏ trong Bootstrap 5 là gì?

Kích thước màn hình trung bình Bootstrap là gì?

Làm cách nào để ẩn div trong chế độ xem trên thiết bị di động bằng Bootstrap 5?

Màn hình Bootstrap là gì?