Hướng dẫn can you use css grid and bootstrap together? - bạn có thể sử dụng lưới css và bootstrap với nhau không?

Hệ thống lưới mặc định của Bootstrap, thể hiện đỉnh cao của hơn một thập kỷ kỹ thuật bố trí CSS, được thử và thử nghiệm bởi hàng triệu người. Nhưng, nó cũng được tạo ra mà không có nhiều tính năng và kỹ thuật CSS hiện đại mà chúng tôi thấy trong các trình duyệt như lưới CSS mới.

Head lên hệ thống lưới CSS của chúng tôi là thử nghiệm và chọn tham gia kể từ v5.1.0! Chúng tôi đã đưa nó vào tài liệu của chúng tôi CSS CSS để chứng minh nó cho bạn, nhưng nó bị vô hiệu hóa theo mặc định. Hãy đọc để tìm hiểu làm thế nào để kích hoạt nó trong các dự án của bạn. We included it in our documentation’s CSS to demonstrate it for you, but it’s disabled by default. Keep reading to learn how to enable it in your projects.

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 mà được xây dựng trên lưới CSS, nhưng với một vòng xoắn bootstrap. Bạn vẫn nhận được các lớp học bạn có thể áp dụng theo ý thích để xây dựng bố cục đáp ứng, nhưng với một cách tiếp cận khác dưới mui xe.

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

    
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
    
    5 và bật lưới CSS bằng cách đặt
    
      .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.
    Disable the default grid system by setting
    
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
    
    5 and enable the CSS Grid by setting
    
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
    
    6. Then, recompile your Sass.

  • Thay thế các trường hợp 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 đặt
    
      .g-col-6
      .g-col-6
    
    0 và tạo ra một
    
      .g-col-6
      .g-col-6
    
    1 mà bạn xây dựng với HTML của mình.
    The
    
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
    
    8 class sets
    
      .g-col-6
      .g-col-6
    
    0 and creates a
    
      .g-col-6
      .g-col-6
    
    1 that you build on with your HTML.

  • Thay thế các lớp

    
      .g-col-6
      .g-col-6
    
    2 bằng các 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.
    This is because our CSS Grid columns use the
    
      .g-col-6
      .g-col-6
    
    4 property instead of
    
      .g-col-6
      .g-col-6
    
    5.

  • Các cột và kích thước máng xối được đặt thông qua các biến CSS. Đặt chúng 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 bảng kiểu, với
    
      .g-col-6
      .g-col-6
    
    7 và
    
      .g-col-6
      .g-col-6
    
    8.
    Set these on the parent
    
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
      .g-col-6 .g-col-md-4
    
    8 and customize however you want, inline or in a stylesheet, with
    
      .g-col-6
      .g-col-6
    
    7 and
    
      .g-col-6
      .g-col-6
    
    8.

Trong tương lai, Bootstrap có thể sẽ chuyển sang giải pháp lai 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 don don ảnh hưởng đến các cột lưới CSS theo cùng một cách.

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

    
      .g-col-6
      .g-col-6
    
    9 thay thế ngang
    
      .g-col-6
      .g-col-6
    
      .g-col-6
      .g-col-6
    
    1 từ hệ thống lưới mặc định của chúng tôi và các chức nă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ề âm và các tiện ích ký quỹ 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 phần Tùy chỉnh để biết thêm chi tiết.

  • Các kiểu nội tuyến và tùy chỉnh nên được xem là thay thế cho các lớp sửa đổi [ví dụ:

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

  • Nesting hoạt động tương tự, nhưng có thể yêu cầu bạn đặt lại cột của mình trên mỗi trường hợp 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 phần làm tổ để biết chi tiết.

Ví dụ

Ba cột

Ba cột có chiều rộng bằng nhau trên tất cả các chế độ xem và thiết bị có thể được tạo 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 các lớp đáp ứng để thay đổi bố cục theo kích thước chế độ xem.

.g-col-4

.g-col-4

.g-col-4


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

Phản ứng nhanh nhẹn

Sử dụng các lớp đáp ứng để đ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 các khung nhìn hẹp nhất, và sau đó phát triển thành ba cột trên các khung nhìn trung bình trở lên.

.G-COL-6 .G-COL-MD-4

.G-COL-6 .G-COL-MD-4

.G-COL-6 .G-COL-MD-4


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

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ặt hàng lưới tự động quấn vào dòng tiếp theo khi không có phòng nào theo chiều ngang. Lưu ý rằng


  .g-col-6
  .g-col-6
9 áp dụng cho các 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


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

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

Bắt đầu

Các lớp bắt đầu nhằm thay thế các lớp bù 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 ra một mẫu lưới thông qua các kiểu nói với các 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 thuộc tính đó 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 học bắt đầu là tốc ký cho trước đây. Ghép chúng với các lớp cột với 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 tại

  .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


  .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 [trẻ em 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], mỗi mục lưới sẽ tự động được kích thước thành 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, CSS Grid của chúng tôi cho phép làm tổ dễ dàng


  .g-col-6 .g-col-md-4
  .g-col-6 .g-col-md-4
  .g-col-6 .g-col-md-4
8s. Tuy nhiên, không giống như mặc định, lưới này kế thừa các thay đổi trong các hàng, cột và khoảng cách. Xem xét ví dụ dưới đây:

  • Chúng tôi ghi đè số lượng các cột mặc định với 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ố cột được kế thừa và mỗi cột là 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 đến 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 các bố cục phức tạp và tùy chỉnh 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ố lượng cột, số lượng hàng và chiều rộng của các khoảng trống với các biến CSS cục bộ.

Biến đổiGiá trị dự phòngSự 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
2
Số 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
1
Số lượng cột trong mẫu lưới của bạn

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

  1
  1
  1
  1
  1
  1
  1
  1
  1
  1
  1
  1
3
Kí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; Thay vào đó, chúng áp dụng các giá trị dự phòng được sử dụng cho đến khi một trường hợp cục bộ được cung cấp. 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 chúng tôi, điều này bỏ qua

  .g-col-3 .g-start-2
  .g-col-4 .g-start-6
8 vì điều đó đã được đặt ở bất cứ đâu. Khi đó, trường hợp

  .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 là

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

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

Các yếu tố trẻ em 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ó kích thướ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.

Auto-column

Auto-column

Auto-column


  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 và thay đổi vị trí của các cột:

Auto-column

Auto-column

Auto-column


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

Khoảng trống

Chỉ thay đổi các khoảng cách 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
8s, 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


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

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ị duy nhất [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 một kiểu nội tuyến cho

  .g-col-6
  .g-col-6
9 hoặc với biến

  .g-col-6
  .g-col-6
8 CSS của chúng tôi.

.g-col-6

.g-col-6

.g-col-6

.g-col-6


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

Sass

Một hạn chế của lưới CSS là các lớp mặc định của chúng tôi 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 có hiệu quả xác định trước số lượng các 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 đó kích thước các cột của bạn, với sự kết hợp của các kiểu nội tuyến và các lớp cột lưới CSS được xác định trước [ví dụ:


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

  .g-col-6
  .g-col-6
8].


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

Bạn nên sử dụng CSS Grid hoặc Bootstrap?

Nếu bạn là bố cục đầu tiên, có nghĩa là bạn muốn tạo bố cục và sau đó đặt các mục vào đó, sau đó bạn sẽ tốt hơn với CSS Grid.Nhưng nếu bạn là nội dung đầu tiên, có nghĩa là bạn có các mục mà bạn muốn đặt vào một thùng chứa và không gian đều, hãy đi với bootstrap.. But if you're content-first, meaning you have items that you want to place into a container and space out evenly, go with Bootstrap.

Bạn có thể kết hợp CSS Grid và Flexbox không?

Bạn có thể sử dụng chúng cùng nhau nhưng không nhất thiết là một yếu tố giống nhau.Chẳng hạn, tôi có thể đặt một div trong thùng chứa cha mẹ CSS-lưới [có màn hình hiển thị: lưới] nhưng con div có thể hiển thị: flex để bố trí đó là trẻ em.. For instance I can place a div in a CSS-Grid parent container [which has display:grid ] but the child div could have display:flex to lay out it's children.

Là một phần lưới của bootstrap?

Hệ thống lưới: Hệ thống lưới Bootstrap cho phép tối đa 12 cột trên trang.Bạn có thể sử dụng từng trong số chúng hoặc hợp nhất chúng lại với nhau cho các cột rộng hơn.Bạn có thể sử dụng tất cả các kết hợp của các giá trị tổng lên đến 12. Bạn có thể sử dụng 12 cột mỗi chiều rộng 1 hoặc sử dụng 4 cột mỗi chiều rộng 3 hoặc bất kỳ kết hợp nào khác.Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. You can use all combinations of values summing up to 12. You can use 12 columns each of width 1, or use 4 columns each of width 3 or any other combination.

Chủ Đề