Bootstrap 4 - ระบบกริด
คำอธิบาย
Bootstrap 4 ระบบกริดที่สร้างขึ้นด้วยเฟล็กบ็อกซ์ซึ่งตอบสนองได้เต็มที่และปรับขนาดได้ถึง 12 คอลัมน์ (ตามขนาดของอุปกรณ์) โดยการสร้างเลย์เอาต์ด้วยแถวและคอลัมน์ทั่วทั้งหน้า มีระบบกริดของเหลวแรกที่ตอบสนองและเคลื่อนที่ได้ซึ่งจะปรับขนาดคอลัมน์เมื่อขนาดอุปกรณ์หรือวิวพอร์ตเพิ่มขึ้น
การทำงานของระบบกริด
ต้องวางแถวภายในคลาส. คอนเทนเนอร์เพื่อการจัดตำแหน่งและช่องว่างที่เหมาะสม
สำหรับการใช้ความกว้างที่ตอบสนองคลาสคอนเทนเนอร์และสำหรับความกว้างคงที่ในวิวพอร์ตทั้งหมดให้ใช้คลาส. container-fluid
ใช้แถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน
ควรวางเนื้อหาไว้ในคอลัมน์และมีเพียงคอลัมน์เท่านั้นที่สามารถเป็นลูกของแถว
คอลัมน์มีช่องว่างภายในสำหรับควบคุมช่องว่างระหว่างคอลัมน์
หากคุณวางคอลัมน์มากกว่า 12 คอลัมน์ในแถวคอลัมน์นั้นจะถูกวางในบรรทัดใหม่
คอลัมน์สร้างช่องว่างระหว่างเนื้อหาคอลัมน์ผ่านช่องว่างภายใน ดังนั้นคุณสามารถลบระยะขอบออกจากแถวและช่องว่างภายในคอลัมน์ด้วยคลาส. no-guttersในแถว
คุณสามารถทำให้ระบบกริดตอบสนองได้โดยใช้จุดพักกริดห้าจุดเช่นเล็กพิเศษเล็กกลางใหญ่และใหญ่พิเศษ
คลาสกริดที่กำหนดไว้ล่วงหน้าเช่น. col-4 พร้อมใช้งานสำหรับการสร้างเค้าโครงตารางอย่างรวดเร็ว นอกจากนี้ยังสามารถใช้มิกซ์อินน้อยสำหรับเลย์เอาต์เชิงความหมายได้มากขึ้น
ตัวเลือกกริด
ตารางต่อไปนี้สรุปแง่มุมของการทำงานของระบบกริด Bootstrap 4 บนอุปกรณ์ต่างๆ -
| อุปกรณ์ขนาดเล็กพิเศษ (<576px) | อุปกรณ์ขนาดเล็ก (≥576px) | อุปกรณ์ขนาดกลาง (≥768px) | อุปกรณ์ขนาดใหญ่ (≥992px) | อุปกรณ์ขนาดใหญ่พิเศษ (≥1200px) | |
|---|---|---|---|---|---|
| พฤติกรรมกริด | แนวนอนตลอดเวลา | ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก | ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก | ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก | ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก |
| ความกว้างภาชนะสูงสุด | ไม่มี (อัตโนมัติ) | 540px | 720px | 960px | 1140px |
| ชั้นเรียน | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # คอลัมน์ | 12 | 12 | 12 | 12 | 12 |
| ความกว้างของรางน้ำ | 30px (15px ในแต่ละด้านของคอลัมน์) |
30px (15px ในแต่ละด้านของคอลัมน์) |
30px (15px ในแต่ละด้านของคอลัมน์) |
30px (15px ในแต่ละด้านของคอลัมน์) |
30px (15px ในแต่ละด้านของคอลัมน์) |
| Nestable | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
| ลำดับคอลัมน์ | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
โครงสร้างกริดพื้นฐาน
ต่อไปนี้เป็นโครงสร้างพื้นฐานของ Bootstrap 4 grid -
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>ตัวอย่างระบบกริด
ต่อไปนี้เป็นตัวอย่างของระบบกริด Bootstrap 4 -
ตัวอย่าง
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</style>
.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}
</style>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class =" col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-5">.col-sm-5</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-12">.col-sm-12</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
เอาต์พุต
การสร้างเลย์เอาต์สองคอลัมน์
ตัวอย่างต่อไปนี้อธิบายการสร้างเค้าโครงสองคอลัมน์สำหรับอุปกรณ์ขนาดเล็กกลางและใหญ่ ในอุปกรณ์ขนาดเล็กเช่นโทรศัพท์มือถือคอลัมน์จะกลายเป็นแนวนอนโดยอัตโนมัติตามค่าเริ่มต้น
ตัวอย่าง
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-7">.col-sm-7</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-8">.col-sm-8</div>
</div>
<div class = "row">
<div class = "col-sm-9">.col-sm-9</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
เอาต์พุต
การสร้างเลย์เอาต์สามคอลัมน์
ตัวอย่างต่อไปนี้อธิบายการสร้างเค้าโครงสามคอลัมน์สำหรับอุปกรณ์ขนาดกลางและขนาดใหญ่ หากความละเอียดหน้าจอมากกว่าหรือเท่ากับ 992 พิกเซลความละเอียดจะแสดงในโหมดแนวนอนในแท็บเล็ตและตามปกติจะแสดงในโหมดแนวตั้ง
ตัวอย่าง
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = " stylesheet" href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-8">.col-sm-8</div>
<div class = "col-sm-2">.col-sm-2</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -