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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เอาต์พุต