Hệ thống lưới điện

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

Trên trang này

Thí dụ

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à sắp xếp 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à giải thích chuyên sâu về cách hệ thống lưới kết hợp với nhau.

Bạn mới sử dụng hay chưa quen với flexbox? Đọc hướng dẫn flexbox CSS Tricks này để biết thông tin cơ bản, thuật ngữ, hướng dẫn và đoạn mã.

Cột

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Ví dụ trên tạo ba cột có chiều rộng bằng nhau trên tất cả các thiết bị và khung nhì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 với cột chính .container.

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

Chia nhỏ nó ra, đây là cách hệ thống lưới kết hợp với nhau:

Lưới của chúng tôi hỗ trợ sáu điểm ngắt đáp ứng . Điểm ngắt dựa trên min-widthcác truy vấn phương tiện, có nghĩa là chúng ảnh hưởng đến điểm ngắt đó và tất cả những người phía trên nó (ví dụ: .col-sm-4áp dụng cho sm, mdvà ) . Điều này có nghĩa là bạn có thể kiểm soát kích thước và hành vi của vùng chứa và cột theo từng điểm ngắt.lgxlxxl
Vùng chứa ở giữa và đệm nội dung của bạn theo chiều ngang. Sử dụng .containercho chiều rộng pixel đáp ứng, .container-fluidcho width: 100%tất cả các cửa sổ xem và thiết bị hoặc vùng chứa đáp ứng (ví dụ .container-md:) cho sự kết hợp của chiều rộng pixel và linh hoạt.
Hàng là trình bao bọc cho các cột. Mỗi cột có chiều ngang padding(được gọi là máng xối) để kiểm soát không gian giữa chúng. Sau đó, điều này paddingđược chống lại trên các hàng có lề âm để đảm bảo 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. Các hàng cũng hỗ trợ các lớp bổ trợ để áp dụng thống nhất các lớp định cỡ cột và lớp rãnh để thay đổi khoảng cách của nội dung của bạn.
Các cột rất linh hoạt. Có 12 cột mẫu có sẵn trên mỗi hàng, cho phép bạn tạo các tổ hợp phần tử khác nhau trải dài bất kỳ số lượng cột nào. Các lớp cột cho biết số lượng cột mẫu sẽ kéo dài (ví dụ: col-4kéo dài bốn). widths được đặt theo tỷ lệ phần trăm để bạn luôn có cùng một kích thước tương đối.
Máng xối cũng đáp ứng và có thể tùy chỉnh. Các lớp Gutter có sẵn trên tất cả các điểm ngắt, với tất cả các kích thước giống như khoảng cách lề và khoảng đệm của chúng tôi . Thay đổi máng xối ngang với .gx-*các lớp, máng xối dọc với .gy-*hoặc tất cả các máng xối có .g-*lớp. .g-0cũng có sẵn để loại bỏ máng xối.
Các biến Sass, bản đồ và mixin cung cấp năng lượng cho lưới điện. Nếu bạn không muốn sử dụng các lớp lưới được xác định trước trong Bootstrap, bạn có thể sử dụng Sass nguồn của lưới của chúng tôi để tạo lớp lưới của riêng bạn với nhiều đánh dấu ngữ nghĩa hơn. Chúng tôi cũng bao gồm một số thuộc tính tùy chỉnh CSS để sử dụng các biến Sass này nhằm mang lại sự linh hoạt hơn nữa cho bạn.

Hãy lưu ý những hạn chế và lỗi xung quanh flexbox , chẳng hạn như không thể sử dụng một số phần tử HTML làm vùng chứa flex .

Tùy chọn lưới

Hệ thống lưới của Bootstrap có thể điều chỉnh trên tất cả sáu điểm ngắt mặc định và bất kỳ điểm ngắt nào bạn tùy chỉnh. Sáu cấp lưới mặc định như sau:

Cực nhỏ (xs)
Nhỏ (sm)
Trung bình (md)
Lớn (lg)
Cực lớn (xl)
Cực lớn (xxl)

Như đã lưu ý ở trên, mỗi điểm ngắt này có vùng chứa riêng, tiền tố lớp duy nhất và bổ ngữ. Đây là cách lưới thay đổi qua các điểm ngắt này:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Thùng đựng hàng`max-width`	Không có (tự động)	540px	720px	960px	1140px	1320px
Tiền tố lớp	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# cột	12
Chiều rộng máng xối	1.5rem (.75rem ở bên trái và bên phải)
Máng xối tùy chỉnh	Đúng
Có thể lồng vào nhau	Đúng
Thứ tự cột	Đúng

Các cột bố cục tự động

Sử dụng các lớp cột dành riêng cho điểm ngắt để dễ dàng định kích thước cột mà không cần một lớp được đánh số rõ ràng như .col-sm-6.

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ừ xsđến xxl. Thêm bất kỳ số lượng lớp nào ít hơn đơn vị cho mỗi điểm ngắt bạn cần và mọi cột sẽ có cùng chiều rộng.

1 của 2

2 của 2

1 trong 3

2 của 3

3 của 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

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

Tự động bố trí 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 em tự động thay đổi kích thước xung quanh nó. 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), kết 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 trong 3

2 của 3 (rộng hơn)

3 của 3

1 trong 3

2 của 3 (rộng hơn)

3 của 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

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

Sử dụng col-{breakpoint}-autocác lớp để định kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng.

1 trong 3

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

3 của 3

1 trong 3

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

3 của 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Các lớp học phản hồi

Lưới của Bootstrap bao gồm sáu lớp các lớp được xác định trước để xây dựng các 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ỏ, vừa, 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 ngắt

Đố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 .colvà .col-*. 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; nếu không, hãy thoải mái gắn bó .col.

col

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

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

Sử dụng một tập hợp các .col-sm-*lớp, 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ở thành nằm ngang tại điểm ngắt nhỏ ( sm).

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Pha 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? Sử dụng kết hợp các lớp khác nhau cho mỗi cấp khi cần thiết. Xem ví dụ bên dưới để biết rõ hơn về cách hoạt động của tất cả.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Hàng cột

Sử dụng các .row-cols-*lớp đáp ứng để nhanh chóng đặt số lượng cột hiển thị tốt nhất nội dung và bố cục của bạn. Trong khi .col-*các lớp bình thường áp dụng cho các cột riêng lẻ (ví dụ .col-md-4:), thì các lớp cột hàng được đặt trên cha .rowlàm mặc định cho các cột được chứa. Với .row-cols-autobạn có thể cung cấp cho các cột chiều rộng tự nhiên của chúng.

Sử dụng các lớp cột hàng này để nhanh chóng tạo bố cục lưới cơ bản hoặc để kiểm soát bố cục thẻ của bạn và ghi đè khi cần thiết ở cấp cột.

Cột

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Cột

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Cột

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Cột

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Cột

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Cột

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Cột

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Bạn cũng có thể sử dụng mixin Sass đi kèm row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

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 .rowtập hợp các .col-sm-*cột mới trong một .col-sm-*cột 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ối đa 12 hoặc ít hơn (không bắt buộc bạn phải sử dụng tất cả 12 cột có sẵn).

Cấp độ 1: .col-sm-3

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

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ác biến và hỗn hợp tương tự 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 đáp ứng 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ột nổi. Chúng tôi sử dụng chúng để tạo các lớp lưới được xác định trước được nêu ở trên, cũng như cho các mixin tùy chỉnh được liệt kê bên dưới.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixin

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

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Ví dụ sử dụng

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Nội dung chính

Nội dung phụ

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

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, bạn hoàn toàn có thể tùy chỉnh các lớp lưới được xác định trước. Thay đổi số lượng lớp, 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. $grid-columnsđượ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 $grid-gutter-widthđặt chiều rộng cho máng xối của cột.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Các cấp lưới

Vượt ra 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 nên cập nhật $grid-breakpointsvà $container-max-widthsthành một cái gì đó như sau:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Khi thực hiện bất kỳ thay đổi nào đối với các biến hoặc bản đồ của 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 các lớp lưới được xác định trước hoàn toàn mới cho độ rộng cột, hiệu số 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 ngắt tùy chỉnh. Đảm bảo đặt các giá trị lưới trong px(not rem, emhoặc %).