ระบบกริด

ใช้ตาราง flexbox สำหรับอุปกรณ์พกพาที่มีประสิทธิภาพของเราเพื่อสร้างเลย์เอาต์ของรูปร่างและขนาดทั้งหมด ด้วยระบบสิบสองคอลัมน์ ระดับการตอบสนองเริ่มต้นหกระดับ ตัวแปร Sass และมิกซ์อิน และคลาสที่กำหนดไว้ล่วงหน้าหลายสิบคลาส

ในหน้านี้

ตัวอย่าง

ระบบกริดของ Bootstrap ใช้ชุดคอนเทนเนอร์ แถว และคอลัมน์เพื่อจัดวางและจัดแนวเนื้อหา สร้างขึ้นด้วยflexboxและตอบสนองได้อย่างเต็มที่ ด้านล่างนี้คือตัวอย่างและคำอธิบายเชิงลึกว่าระบบกริดมารวมกันได้อย่างไร

ใหม่หรือไม่คุ้นเคยกับ flexbox? อ่านคู่มือ CSS Tricks flexboxสำหรับพื้นหลัง คำศัพท์ แนวทางปฏิบัติ และข้อมูลโค้ด

คอลัมน์

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

ตัวอย่างข้างต้นสร้างคอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์ในอุปกรณ์และวิวพอร์ตทั้งหมดโดยใช้คลาสกริดที่กำหนดไว้ล่วงหน้าของเรา คอลัมน์เหล่านั้นจะอยู่กึ่งกลางหน้ากับพา.containerเรนต์

มันทำงานอย่างไร

เมื่อแยกย่อย นี่คือวิธีที่ระบบกริดมารวมกัน:

กริดของเรารองรับ เบรกพอยต์ที่ตอบสนอง ได้หกจุด เบรกพอยต์อ้างอิงจากmin-widthการสืบค้นสื่อ ซึ่งหมายความว่าจะส่งผลต่อเบรกพอยต์นั้นและทั้งหมดที่อยู่เหนือเบรกพอยต์ (เช่น.col-sm-4ใช้กับsm, md, lg, xl, และxxl) ซึ่งหมายความว่าคุณสามารถควบคุมขนาดคอนเทนเนอร์และคอลัมน์และลักษณะการทำงานตามเบรกพอยต์แต่ละจุด
ตู้คอนเทนเนอร์อยู่ตรงกลางและจัดวางเนื้อหาของคุณในแนวนอน ใช้.containerสำหรับความกว้างของพิกเซลที่ตอบสนอง.container-fluidสำหรับwidth: 100%วิวพอร์ตและอุปกรณ์ทั้งหมด หรือคอนเทนเนอร์ที่ตอบสนอง (เช่น.container-md) สำหรับการผสมผสานระหว่างของเหลวและความกว้างของพิกเซล
แถวเป็นตัวตัดสำหรับคอลัมน์ แต่ละคอลัมน์มีแนวนอนpadding(เรียกว่ารางน้ำ) สำหรับควบคุมช่องว่างระหว่างกัน จาก นั้นpaddingจะแก้ไขในแถวที่มีระยะขอบติดลบเพื่อให้แน่ใจว่าเนื้อหาในคอลัมน์ของคุณอยู่ในแนวเดียวกันทางด้านซ้าย แถวยังรองรับคลาสตัวปรับแต่งเพื่อใช้การปรับขนาดคอลัมน์และคลาสรางน้ำ อย่างสม่ำเสมอ เพื่อเปลี่ยนระยะห่างของเนื้อหาของคุณ
คอลัมน์มีความยืดหยุ่นอย่างไม่น่าเชื่อ มีคอลัมน์เทมเพลตให้เลือก 12 คอลัมน์ต่อแถว ช่วยให้คุณสร้างองค์ประกอบต่างๆ ที่หลากหลายซึ่งครอบคลุมคอลัมน์จำนวนเท่าใดก็ได้ คลาสคอลัมน์ระบุจำนวนคอลัมน์เทมเพลตที่จะขยาย (เช่นcol-4ช่วงสี่) widths ถูกกำหนดเป็นเปอร์เซ็นต์ ดังนั้นคุณจึงมีขนาดสัมพันธ์เท่ากันเสมอ
รางน้ำยังตอบสนองและปรับแต่งได้ คลาสรางน้ำมีอยู่ในเบรกพอยต์ทั้งหมด โดยมีขนาดเท่ากันทั้งหมดกับระยะขอบและช่องว่างภายใน เปลี่ยนรางน้ำแนวนอนด้วย.gx-*คลาส, รางน้ำแนวตั้งด้วย.gy-*หรือรางน้ำทั้งหมดที่มี.g-*คลาส .g-0สามารถถอดรางน้ำได้ด้วย
ตัวแปร Sass แผนที่และมิกซ์อินช่วยเพิ่มพลังให้กับกริด หากคุณไม่ต้องการใช้คลาสกริดที่กำหนดไว้ล่วงหน้าใน Bootstrap คุณสามารถใช้Sass ต้นทางของกริดเพื่อสร้างของคุณเองด้วยมาร์กอัปที่มีความหมายมากขึ้น เรายังรวมคุณสมบัติที่กำหนดเองของ CSS ไว้ด้วยเพื่อใช้ตัวแปร Sass เหล่านี้เพื่อความยืดหยุ่นที่มากขึ้นสำหรับคุณ

ระวังข้อจำกัดและข้อบกพร่องของ flexboxเช่น การไม่สามารถใช้องค์ประกอบ HTML บางอย่างเป็นคอนเทนเนอร์แบบยืดหยุ่นได้

ตัวเลือกกริด

ระบบกริดของ Bootstrap สามารถปรับใช้กับเบรกพอยต์เริ่มต้นทั้งหกจุด และเบรกพอยต์ใดๆ ที่คุณกำหนดเองได้ ระดับกริดเริ่มต้นหกระดับมีดังนี้:

เล็กพิเศษ (xs)
เล็ก (ซม.)
ปานกลาง (md)
ขนาดใหญ่ (แอลจี)
ใหญ่พิเศษ (xl)
ใหญ่พิเศษ (xxl)

ดังที่กล่าวไว้ข้างต้น แต่ละเบรกพอยต์เหล่านี้มีคอนเทนเนอร์ คำนำหน้าคลาสเฉพาะ และตัวปรับแต่งของตัวเอง ต่อไปนี้คือการเปลี่ยนแปลงของกริดในเบรกพอยต์เหล่านี้:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
คอนเทนเนอร์`max-width`	ไม่มี (อัตโนมัติ)	540px	720px	960px	1140px	1320px
คำนำหน้าชั้นเรียน	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ของคอลัมน์	12
ความกว้างของรางน้ำ	1.5rem (.75rem ทางซ้ายและขวา)
รางน้ำแบบกำหนดเอง	ใช่
Nestable	ใช่
การเรียงลำดับคอลัมน์	ใช่

คอลัมน์เค้าโครงอัตโนมัติ

ใช้คลาสคอลัมน์เฉพาะจุดพักเพื่อให้ปรับขนาดคอลัมน์ได้ง่ายโดยไม่ต้องมีคลาสที่มีตัวเลขชัดเจน เช่น.col-sm-6.

เท่ากับความกว้าง

ตัวอย่างเช่น นี่คือเค้าโครงกริดสองแบบที่ใช้กับทุกอุปกรณ์และวิวพอร์ต จากxsเป็นxxl. เพิ่มคลาสที่ไม่มีหน่วยจำนวนเท่าใดก็ได้สำหรับแต่ละเบรกพอยต์ที่คุณต้องการ และทุกคอลัมน์จะมีความกว้างเท่ากัน

1 จาก 2

2 จาก 2

1 จาก 3

2 จาก 3

3 จาก 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>

การตั้งค่าความกว้างหนึ่งคอลัมน์

เค้าโครงอัตโนมัติสำหรับคอลัมน์กริด flexbox ยังหมายความว่าคุณสามารถกำหนดความกว้างของคอลัมน์หนึ่งและให้คอลัมน์พี่น้องปรับขนาดรอบคอลัมน์โดยอัตโนมัติได้ คุณสามารถใช้คลาสกริดที่กำหนดไว้ล่วงหน้า (ดังที่แสดงด้านล่าง) กริดมิกซ์อิน หรือความกว้างแบบอินไลน์ โปรดทราบว่าคอลัมน์อื่นๆ จะปรับขนาดไม่ว่าความกว้างของคอลัมน์กลางจะเป็นเท่าใด

1 จาก 3

2 จาก 3 (กว้างขึ้น)

3 จาก 3

1 จาก 3

2 จาก 3 (กว้างขึ้น)

3 จาก 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>

เนื้อหาความกว้างตัวแปร

ใช้col-{breakpoint}-autoคลาสเพื่อปรับขนาดคอลัมน์ตามความกว้างตามธรรมชาติของเนื้อหา

1 จาก 3

เนื้อหาความกว้างตัวแปร

3 จาก 3

1 จาก 3

เนื้อหาความกว้างตัวแปร

3 จาก 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>

ชั้นเรียนตอบสนอง

ตารางของ Bootstrap ประกอบด้วยคลาสที่กำหนดไว้ล่วงหน้าหกระดับสำหรับการสร้างเลย์เอาต์ที่ตอบสนองที่ซับซ้อน ปรับแต่งขนาดคอลัมน์ของคุณบนอุปกรณ์ขนาดเล็กพิเศษ เล็ก กลาง ใหญ่ หรือใหญ่พิเศษ ตามที่คุณต้องการ

เบรกพอยต์ทั้งหมด

สำหรับกริดที่เหมือนกันจากอุปกรณ์ที่เล็กที่สุดไปจนถึงใหญ่ที่สุด ให้ใช้คลาส.colและ .col-*ระบุคลาสที่มีตัวเลขเมื่อคุณต้องการคอลัมน์ที่มีขนาดเฉพาะ .colมิฉะนั้น อย่าลังเลที่จะติด

col

col-8

โคล-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>

ซ้อนกันเป็นแนวนอน

การใช้คลาสชุดเดียว.col-sm-*คุณสามารถสร้างระบบกริดพื้นฐานที่เริ่มต้นจากสแต็กและกลายเป็นแนวนอนที่เบรกพอยต์ขนาดเล็ก ( 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>

มิกซ์แอนด์แมทช์

ไม่ต้องการให้คอลัมน์ของคุณซ้อนกันในระดับกริดบางระดับใช่หรือไม่ ใช้คลาสต่างๆ รวมกันสำหรับแต่ละระดับตามต้องการ ดูตัวอย่างด้านล่างสำหรับแนวคิดที่ดีขึ้นเกี่ยวกับวิธีการทำงานทั้งหมด

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

คอลัมน์แถว

ใช้.row-cols-*คลาสแบบตอบสนองเพื่อกำหนดจำนวนคอลัมน์ที่แสดงผลเนื้อหาและเลย์เอาต์ของคุณได้ดีที่สุดอย่างรวดเร็ว ใน ขณะ.col-*ที่คลาสปกติใช้กับแต่ละคอลัมน์ (เช่น.col-md-4) คลาสของคอลัมน์แถวจะถูกตั้งค่าบนพา.rowเรนต์เป็นช็อตคัท ด้วย.row-cols-autoคุณสามารถกำหนดความกว้างตามธรรมชาติของคอลัมน์ได้

ใช้คลาสคอลัมน์แถวเหล่านี้เพื่อสร้างเลย์เอาต์กริดพื้นฐานอย่างรวดเร็วหรือเพื่อควบคุมเลย์เอาต์การ์ดของคุณ

คอลัมน์

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

คอลัมน์

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

คอลัมน์

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

คอลัมน์

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

คอลัมน์

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

คอลัมน์

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

คุณยังสามารถใช้มิกซ์อิน Sass ที่มาพร้อมกับ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);
  }
}

การทำรัง

หากต้องการซ้อนเนื้อหาของคุณด้วยกริดเริ่มต้น ให้เพิ่มคอลัมน์ใหม่.rowและชุดของ.col-sm-*คอลัมน์ภายในคอลัมน์ที่มี.col-sm-*อยู่ แถวที่ซ้อนกันควรมีชุดของคอลัมน์ที่รวมกันได้ไม่เกิน 12 คอลัมน์ (คุณไม่จำเป็นต้องใช้คอลัมน์ที่มีอยู่ทั้งหมด 12 คอลัมน์)

ระดับ 1: .col-sm-3

ระดับ 2: .col-8 .col-sm-6

ระดับ 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 ต้นทางของ Bootstrap คุณมีตัวเลือกในการใช้ตัวแปร Sass และมิกซ์อินเพื่อสร้างเค้าโครงหน้าแบบกำหนดเอง ความหมาย และแบบตอบสนอง คลาสกริดที่กำหนดไว้ล่วงหน้าของเราใช้ตัวแปรและมิกซ์อินเดียวกันเหล่านี้เพื่อจัดเตรียมคลาสที่พร้อมใช้งานทั้งชุดสำหรับเลย์เอาต์ที่ตอบสนองอย่างรวดเร็ว

ตัวแปร

ตัวแปรและแผนที่กำหนดจำนวนคอลัมน์ ความกว้างของรางน้ำ และจุดสอบถามสื่อที่จะเริ่มคอลัมน์แบบลอย เราใช้สิ่งเหล่านี้เพื่อสร้างคลาสกริดที่กำหนดไว้ล่วงหน้าที่บันทึกไว้ด้านบน เช่นเดียวกับมิกซ์อินแบบกำหนดเองที่แสดงด้านล่าง

$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
);

มิกซ์อิน

ใช้มิกซ์อินร่วมกับตัวแปรกริดเพื่อสร้าง CSS เชิงความหมายสำหรับคอลัมน์กริดแต่ละคอลัมน์

// 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);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

ตัวอย่างการใช้งาน

คุณสามารถแก้ไขตัวแปรให้เป็นค่าที่คุณกำหนดเอง หรือเพียงแค่ใช้มิกซ์อินกับค่าเริ่มต้นของพวกมัน ต่อไปนี้คือตัวอย่างการใช้การตั้งค่าเริ่มต้นเพื่อสร้างเค้าโครงแบบสองคอลัมน์โดยมีช่องว่างระหว่าง

.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);
  }
}

เนื้อหาหลัก

เนื้อหารอง

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

การปรับแต่งกริด

การใช้ตัวแปร Sass แบบกริดและแผนที่ในตัวของเรา ทำให้สามารถปรับแต่งคลาสกริดที่กำหนดไว้ล่วงหน้าได้อย่างสมบูรณ์ เปลี่ยนจำนวนชั้น มิติคิวรีสื่อ และความกว้างคอนเทนเนอร์—จากนั้นคอมไพล์ใหม่

คอลัมน์และรางน้ำ

จำนวนคอลัมน์กริดสามารถแก้ไขได้โดยใช้ตัวแปร Sass $grid-columnsใช้เพื่อสร้างความกว้าง (เป็นเปอร์เซ็นต์) ของแต่ละคอลัมน์ในขณะที่$grid-gutter-widthกำหนดความกว้างสำหรับรางน้ำของคอลัมน์

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

ระดับกริด

คุณยังสามารถปรับแต่งจำนวนชั้นกริดได้อีกด้วย หากคุณต้องการเพียงสี่ระดับกริด คุณจะต้องอัปเดต$grid-breakpointsและ$container-max-widthsเป็นดังนี้:

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

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

เมื่อทำการเปลี่ยนแปลงใดๆ กับตัวแปร Sass หรือแผนที่ คุณจะต้องบันทึกการเปลี่ยนแปลงและคอมไพล์ใหม่ การทำเช่นนั้นจะสร้างชุดคลาสกริดที่กำหนดไว้ล่วงหน้าชุดใหม่สำหรับความกว้างของคอลัมน์ ออฟเซ็ต และการจัดลำดับ ยูทิลิตี้การมองเห็นที่ตอบสนองจะได้รับการอัปเดตเพื่อใช้เบรกพอยต์ที่กำหนดเอง ตรวจสอบให้แน่ใจว่าได้ตั้งค่ากริดในpx(ไม่ใช่rem, em, หรือ%)