Cách vẽ đường thẳng giữa hai cột trong HTML

Question

Sử dụng lưới flexbox ưu tiên thiết bị di động mạnh mẽ của chúng tôi để tạo bố cục ở mọi hình dạng và kích cỡ nhờ hệ thống mười hai cột, năm tầng phản hồi mặc định, biến Sass và mixin cũng như hàng chục lớp được xác định trước

Làm thế nào nó hoạt động

Hệ thống lưới của Bootstrap sử dụng một loạt các vùng chứa, hàng và cột để bố trí và căn chỉnh nội dung. Nó được xây dựng với flexbox và hoàn toàn đáp ứng. Dưới đây là một ví dụ và một cái nhìn sâu sắc về cách lưới kết hợp với nhau

Mới hoặc chưa quen với flexbox?


  

    

      One of three columns
    
    
      One of three columns
    
    
      One of three columns

Ví dụ trên tạo ba cột có chiều rộng bằng nhau trên các thiết bị nhỏ, vừa, lớn và cực lớn bằng cách sử dụng các lớp lưới được xác định trước của chúng tôi. Các cột đó được căn giữa trong trang có cột gốc


  

    
Column
    Column
    
    Column
    Column

9

Phá vỡ nó, đây là cách nó hoạt động

Vùng chứa cung cấp phương tiện để căn giữa và đệm theo chiều ngang nội dung trang web của bạn. Sử dụng


  

    
Column
    Column
    
    Column
    Column

9 cho chiều rộng pixel đáp ứng hoặc


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

1 cho


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

2 trên tất cả các kích thước thiết bị và chế độ xem

Hàng là hàm bao cho cột. Mỗi cột có


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

3 nằm ngang (được gọi là máng xối) để kiểm soát khoảng cách giữa chúng.


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

3 này sau đó được phản đối trên các hàng có lề âm. Bằng cách này, tất cả nội dung trong các cột của bạn được căn chỉnh trực quan xuống phía bên trái

Trong bố cục dạng lưới, nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con trực tiếp của các hàng

Nhờ flexbox, các cột lưới không có


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

5 được chỉ định sẽ tự động bố cục dưới dạng các cột có chiều rộng bằng nhau. Ví dụ: bốn trường hợp của


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

6, mỗi trường hợp sẽ tự động rộng 25% từ điểm ngắt nhỏ trở lên. Xem phần để biết thêm ví dụ

Các lớp cột cho biết số lượng cột bạn muốn sử dụng trong số 12 cột có thể có trên mỗi hàng. Vì vậy, nếu bạn muốn ba cột có chiều rộng bằng nhau, bạn có thể sử dụng


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

7

Các cột


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

5 được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử gốc của chúng

Các cột có


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

3 nằm ngang để tạo rãnh giữa các cột riêng lẻ, tuy nhiên, bạn có thể xóa


  

    
Column
    Column
    
    Column
    Column

20 khỏi các hàng và


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

3 khỏi các cột có


  

    
Column
    Column
    
    Column
    Column

22 trên


  

    
Column
    Column
    
    Column
    Column

23

Để làm cho lưới phản hồi nhanh, có năm điểm ngắt lưới, mỗi điểm cho một điểm. tất cả các điểm dừng (cực nhỏ), nhỏ, trung bình, lớn và cực lớn
Các điểm ngắt lưới dựa trên các truy vấn phương tiện có độ rộng tối thiểu, nghĩa là chúng áp dụng cho một điểm ngắt đó và tất cả những điểm phía trên nó (e. g. ,
```
  

    
Column
    Column
    
    Column
    Column
  
```
24 áp dụng cho các thiết bị nhỏ, vừa, lớn và cực lớn, nhưng không phải là điểm ngắt
```
  

    
Column
    Column
    
    Column
    Column
  
```
25 đầu tiên)

Bạn có thể sử dụng các lớp lưới được xác định trước (như


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

7) hoặc để đánh dấu ngữ nghĩa hơn

Hãy nhận biết những hạn chế và lỗi xung quanh flexbox, như

tùy chọn lưới

Mặc dù Bootstrap sử dụng


  

    
Column
    Column
    
    Column
    Column

27 hoặc


  

    
Column
    Column
    
    Column
    Column

28 để xác định hầu hết các kích thước, nhưng


  

    
Column
    Column
    
    Column
    Column

29 được sử dụng cho các điểm ngắt lưới và chiều rộng vùng chứa. Điều này là do chiều rộng khung nhìn tính bằng pixel và không thay đổi theo

Xem các khía cạnh của hệ thống lưới Bootstrap hoạt động như thế nào trên nhiều thiết bị với một bảng tiện dụng

Cực nhỏ
<576pxNhỏ ≥576pxTrung bình ≥768pxLớn ≥992pxCực lớn
≥576pxTrung bình
≥768pxLớn
≥
≥1200pxMax container widthNone (auto)540px720px960px1140pxClass prefix


  

    
Column
    Column
    
    Column
    Column

20


  

    
Column
    Column
    
    Column
    Column

21


  

    
Column
    Column
    
    Column
    Column

22


  

    
Column
    Column
    
    Column
    Column

23


  

    
Column
    Column
    
    Column
    Column

24# of columns12Gutter width30px (15px on each side of a column)NestableYesColumn orderingYes

Tự động bố trí cột

Sử dụng các lớp cột dành riêng cho điểm dừng để định cỡ cột dễ dàng mà không cần lớp được đánh số rõ ràng như


  

    
Column
    Column
    
    Column
    Column

25

chiều rộng bằng nhau

Ví dụ: đây là hai bố cục lưới áp dụng cho mọi thiết bị và chế độ xem, từ


  

    
Column
    Column
    
    Column
    Column

25 đến


  

    
Column




    Column
    
    Column
    Column

27. Thêm bất kỳ số lượng lớp không có đơn vị nào cho mỗi điểm dừng bạn cần và mọi cột sẽ có cùng chiều rộng


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

0

Các cột có chiều rộng bằng nhau có thể được chia thành nhiều dòng, nhưng có một lỗi ngăn không cho điều này hoạt động nếu không có


  

    
Column
    Column
    
    Column
    Column

28 hoặc


  

    
Column
    Column
    
    Column
    Column

29 rõ ràng. Có các cách giải quyết cho các phiên bản trình duyệt cũ hơn, nhưng chúng không cần thiết nếu bạn đã cập nhật


  

    
Column
    Column
    
    Column
    Column

Đặt chiều rộng một cột

Bố cục tự động cho các cột lưới flexbox cũng có nghĩa là bạn có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh cột đó. Bạn có thể sử dụng các lớp lưới được xác định trước (như được hiển thị bên dưới), hỗn hợp lưới hoặc độ rộng nội tuyến. Lưu ý rằng các cột khác sẽ thay đổi kích thước bất kể chiều rộng của cột trung tâm


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

Nội dung chiều rộng thay đổi

Sử dụng các lớp


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

50 để định kích thước cột dựa trên chiều rộng tự nhiên của nội dung của chúng


  

    
Column
    Column
    
    Column
    Column

2

Nhiều hàng có chiều rộng bằng nhau

Tạo các cột có chiều rộng bằng nhau trải rộng trên nhiều hàng bằng cách chèn một


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

51 vào nơi bạn muốn các cột ngắt thành một dòng mới. Làm cho các khoảng nghỉ đáp ứng nhanh bằng cách trộn


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

51 với một số tiện ích hiển thị đáp ứng


  

    
Column
    Column
    
    Column
    Column

2

lớp đáp ứng

Lưới của Bootstrap bao gồm năm tầng lớp được xác định trước để xây dựng bố cục đáp ứng phức tạp. Tùy chỉnh kích thước cột của bạn trên các thiết bị cực nhỏ, nhỏ, trung bình, lớn hoặc cực lớn theo cách bạn thấy phù hợp

Tất cả các điểm dừng

Đối với các lưới giống nhau từ thiết bị nhỏ nhất đến lớn nhất, hãy sử dụng các lớp


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

53 và


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

54. Chỉ định một lớp được đánh số khi bạn cần một cột có kích thước đặc biệt;


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

5

Xếp chồng lên nhau theo chiều ngang

Sử dụng một tập hợp duy nhất các lớp


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

56, bạn có thể tạo một hệ thống lưới cơ bản bắt đầu xếp chồng lên nhau và trở nên nằm ngang tại điểm dừng nhỏ (


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

57)


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

6

Trộn và kết hợp

Bạn không muốn các cột của mình chỉ xếp chồng lên nhau trong một số tầng lưới? . Xem ví dụ bên dưới để biết rõ hơn về cách thức hoạt động của tất cả


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

7

căn chỉnh

Sử dụng các tiện ích căn chỉnh flexbox để căn chỉnh các cột theo chiều dọc và chiều ngang

Căn dọc


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

8


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

00

Căn ngang


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

01

không có máng xối

Các rãnh giữa các cột trong các lớp lưới được xác định trước của chúng tôi có thể được loại bỏ bằng


  

    
Column
    Column
    
    Column
    Column

22. Điều này loại bỏ các


  

    
Column
    Column
    
    Column
    Column

20 âm khỏi


  

    
Column
    Column
    
    Column
    Column

23 và


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

3 nằm ngang khỏi tất cả các cột con ngay lập tức

Đây là mã nguồn để tạo các kiểu này. Lưu ý rằng các phần ghi đè cột chỉ nằm trong phạm vi các cột con đầu tiên và được nhắm mục tiêu thông qua bộ chọn thuộc tính. Mặc dù điều này tạo ra một bộ chọn cụ thể hơn, nhưng phần đệm cột vẫn có thể được tùy chỉnh thêm bằng các tiện ích giãn cách

Cần một thiết kế edge-to-edge?


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

02

Trong thực tế, đây là giao diện của nó. Lưu ý rằng bạn có thể tiếp tục sử dụng điều này với tất cả các lớp lưới được xác định trước khác (bao gồm độ rộng cột, bậc đáp ứng, sắp xếp lại, v.v.)

col-12. col-sm-6. col-md-8


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

03

gói cột

Nếu có nhiều hơn 12 cột được đặt trong một hàng, thì mỗi nhóm cột bổ sung sẽ, như một đơn vị, bao bọc trên một dòng mới

.col-4
Vì 9 + 4 = 13 > 12, div rộng 4 cột này được bao bọc trên một dòng mới dưới dạng một đơn vị liền kề.

.col-6
Các cột tiếp theo tiếp tục dọc theo dòng mới.


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

04

ngắt cột

Phá vỡ các cột thành một dòng mới trong flexbox yêu cầu một hack nhỏ. thêm một phần tử với


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

2 vào bất cứ nơi nào bạn muốn ngắt cột của mình thành một dòng mới. Thông thường, điều này được thực hiện với nhiều


  

    
Column
    Column
    
    Column
    Column

23, nhưng không phải phương pháp triển khai nào cũng có thể giải quyết được điều này


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

05

Bạn cũng có thể áp dụng ngắt này tại các điểm ngắt cụ thể với các tiện ích hiển thị phản hồi của chúng tôi


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

06

sắp xếp lại

Thứ tự các lớp học

Sử dụng các lớp


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

66 để kiểm soát thứ tự trực quan của nội dung của bạn. Các lớp này phản hồi nhanh, vì vậy bạn có thể đặt


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

67 theo điểm dừng (e. g. ,


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

68). Bao gồm hỗ trợ cho


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

69 đến


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

70 trên tất cả năm tầng lưới


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

07

Ngoài ra còn có các lớp


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

71 và


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

72 đáp ứng thay đổi


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

67 của một phần tử bằng cách áp dụng


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

74 và


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

75 (


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

76), tương ứng. Các lớp này cũng có thể được trộn lẫn với các lớp


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

77 được đánh số khi cần thiết


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

08

Cột bù trừ

Bạn có thể bù cột lưới theo hai cách. các lớp lưới


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

78 đáp ứng của chúng tôi và các tiện ích ký quỹ của chúng tôi. Các lớp lưới có kích thước phù hợp với các cột trong khi lề hữu ích hơn cho các bố cục nhanh trong đó chiều rộng của phần bù có thể thay đổi

các lớp bù đắp

Di chuyển các cột sang bên phải bằng các lớp


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

79. Các lớp này tăng lề trái của một cột lên _______480 cột. Ví dụ:


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

81 di chuyển


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

82 qua bốn cột


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

09

Ngoài việc xóa cột tại các điểm ngắt đáp ứng, bạn có thể cần đặt lại giá trị bù. Xem điều này trong hành động trong ví dụ về lưới

col-sm-5. bù-sm-2. col-md-6. bù-md-0

col-sm-6. col-md-5. col-lg-6

col-sm-6. col-md-5. offset-md-2. col-lg-6. bù-lg-0


  

    
Column
    Column
    
    Column
    Column

0

Tiện ích ký quỹ

Với việc chuyển sang flexbox trong v4, bạn có thể sử dụng các tiện ích lề như


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

83 để buộc các cột anh chị em cách xa nhau


  

    
Column
    Column
    
    Column
    Column

1

làm tổ

Để lồng nội dung của bạn với lưới mặc định, hãy thêm một cột


  

    
Column
    Column
    
    Column
    Column

23 mới và tập hợp các cột


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

56 trong cột


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

56 hiện có. Các hàng lồng nhau phải bao gồm một tập hợp các cột có tổng số tối đa là 12 hoặc ít hơn (bạn không bắt buộc phải sử dụng tất cả 12 cột có sẵn)

Cấp độ 1. . col-sm-9

Cấp độ 2. . col-8. col-sm-6

Cấp độ 2. . col-4. col-sm-6


  

    
Column
    Column
    
    Column
    Column

2

Sass mixin

Khi sử dụng các tệp Sass nguồn của Bootstrap, bạn có tùy chọn sử dụng các biến Sass và mixin để tạo bố cục trang tùy chỉnh, ngữ nghĩa và đáp ứng. Các lớp lưới được xác định trước của chúng tôi sử dụng cùng các biến và mixin này để cung cấp toàn bộ các lớp sẵn sàng sử dụng cho các bố cục phản hồi nhanh

Biến

Các biến và bản đồ xác định số lượng cột, chiều rộng rãnh và điểm truy vấn phương tiện để bắt đầu các cột nổi. Chúng tôi sử dụng những thứ này để tạo các lớp lưới được xác định trước được ghi lại ở trên, cũng như cho các mixin tùy chỉnh được liệt kê bên dưới


  

    
Column
    Column
    
    Column
    Column

3

hỗn hợp

Mixin được sử dụng cùng với các biến lưới để tạo CSS ngữ nghĩa cho các cột lưới riêng lẻ


  

    
Column
    Column
    
    Column
    Column

4

Ví dụ sử dụng

Bạn có thể sửa đổi các biến thành giá trị tùy chỉnh của riêng mình hoặc chỉ sử dụng mixin với giá trị mặc định của chúng. Dưới đây là ví dụ về cách sử dụng cài đặt mặc định để tạo bố cục hai cột với khoảng cách giữa


  

    
Column
    Column
    
    Column
    Column

5


  

    
Column
    Column
    
    Column
    Column

6

Tùy chỉnh lưới

Sử dụng các biến và bản đồ Sass lưới tích hợp của chúng tôi, có thể tùy chỉnh hoàn toàn các lớp lưới được xác định trước. Thay đổi số tầng, kích thước truy vấn phương tiện và chiều rộng vùng chứa—sau đó biên dịch lại

Cột và máng xối

Số lượng cột lưới có thể được sửa đổi thông qua các biến Sass.


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

87 được sử dụng để tạo chiều rộng (tính bằng phần trăm) của từng cột riêng lẻ trong khi


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

88 đặt chiều rộng cho máng xối cột


  

    
Column
    Column
    
    Column
    Column

7

tầng lưới

Ngoài các cột, bạn cũng có thể tùy chỉnh số lượng các tầng lưới. Nếu bạn chỉ muốn bốn tầng lưới, bạn sẽ cập nhật


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

89 và


  

    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3
    
  
  
    

      1 of 3
    
    
      2 of 3 (wider)
    
    
      3 of 3

000 thành thứ như thế này


  

    
Column
    Column
    
    Column
    Column

8

Khi thực hiện bất kỳ thay đổi nào đối với các biến hoặc bản đồ Sass, bạn sẽ cần lưu các thay đổi của mình và biên dịch lại. Làm như vậy sẽ xuất ra một tập hợp hoàn toàn mới gồm các lớp lưới được xác định trước cho độ rộng cột, độ lệch và thứ tự. Các tiện ích hiển thị đáp ứng cũng sẽ được cập nhật để sử dụng các điểm dừng tùy chỉnh. Đảm bảo đặt các giá trị lưới trong


  

    
Column
    Column
    
    Column
    Column

29 (không phải


  

    
Column
    Column
    
    Column
    Column

28,


  

    
Column
    Column
    
    Column
    Column