Grid System ใน Bootstrap 4

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

Grid System ใน Bootstrap 4

Post by abdkode » 05/04/2019 1:46 pm

Grid system
grid systemg เป็นอย่างไร เพื่อให้ง่ายต่อความเข้าใจ รูปแบบการแสดงของ grid จะคล้ายๆ กับการแสดงผลของตาราง แต่สำหรับ bootstrap นั้น grid จะเป็นลักษณะกล่องสี่เหลี่ยมวางเรียงซ้อนกันคล้ายแผ่นตะแกรง ซึ่งจะเรียกกล่องแต่ละอันว่า flexbox หรือกล่องที่มีความยืดหยุ่นปรับเปลี่ยนขนาดอัตโนมัติ โดยระบบ grid จะต้องประกอบไปด้วย 3 class หลักๆ คือ container, row และ col ตามโค้ดด้านล่างดังนี้

Code: Select all

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
grid system.jpg
grid system.jpg (8.98 KiB) Viewed 1047 times

เราสามารถกำหนดจำนวนคอลัมน์หรือจำนวนของ col ได้ไม่เกิน 12 คอลัมน์ใน 1 row การเรียกใช้นั้นด้วยวิธี ระบุตัวเลข 1 - 12 ต่อเข้าไปในclass "col" ตัวอย่างเช่น col-3, col-6, col-12 เป็นต้น แต่ถ้าไม่ได้มีการกำหนดตัวเลข คอลัมน์นั้นๆ จะปรับขนาดด้วยสัดส่วนความกว้างให้อัตโนมัติ อย่างโค้ดตัวอย่างที่เห็นด้านบนไม่มีการต่อตัวเลข
ซึงมีจำนวนclass col ทั้งหมด 3 คลาส ซึ่งหมาถึง 3 คอลัมน์ สัดส่วนความกว้างของแต่ละคอลัมน์ก็จะเป็น 12 หาร 3 หรือเท่า 4 ซึ่งก็คือสัดส่วน 4:12 เราสามารถกำหนดแบบระบุและไม่ระบุตัวเลขรวมกันได้ อย่าง เราต้องการ 3 คอลัมน์ โดยให้คอลัมน์ตรงกลาง มีสัดส่วนเป็น 6:12 ส่วนคอลัมน์ซ้ายขวาให้ปรับอัตโนมัติอย่งละ 3:12
เพื่อให้เห็นภาพ เราสามารถกำหนดได้ดังนี้โดยมีโค้ดดังนี้

Code: Select all

<div class="container">
  <div class="row">
    <div class="col">
      col
    </div>
    <div class="col-6">
      col-6
    </div>
    <div class="col">
      col
    </div>
  </div>
</div>
col-6.jpg
col-6.jpg (5.31 KiB) Viewed 1047 times
ในมีสิ่งหนึ่งที่น่าสนใจมาก คือสมารถกำหนดความกว้างคอลัมน์ให้เป็นReponsiveได้ ด้วย Responsive class ซึ่งมี col, col-sm, col-md, col-lg, col-x ซึ่งเป็นตัวกำหนด breakpoint เพื่อให้คอลัมน์นั้น ยืดหยุ่น ปรับขนาด หรือการแสดงให้เปลี่ยนไปตามขนาดของหน้าจอหรือ container ที่ครอบส่วนของระบบ grid นั้นอยู่ได้ ตัวอย่างเช่น หากหน้าจอขนาดเล็กที่สุดหรือ xs เราต้องการให้แสดงเป็น 2 คอลัมน์ขนาดเท่ากัน หรือสัดส่วน 6:12 และที่ขนาด sm ขึ้นไป ให้เแสดงในส่วนส่วน 4:12 และ 8:12 จะได้เป็นดังนี้

Code: Select all

<div class="container">
  <div class="row">
    <div class="col col-sm-4">
	col col-sm-4
    </div>
    <div class="col col-sm-8">
	col col-sm-8
    </div>
  </div>
</div>
ผลลัพธ์สำหรับหน้าจอขนาดเล็กที่สุดหรือ xs จะมีขนากความกว้างเท่ากัน
col-sm.jpg
col-sm.jpg (4.52 KiB) Viewed 1047 times
ผลลัพธ์สำหรับหน้าจอขนาด sm ขึ้นไป
col-sm2.jpg
col-sm2.jpg (5.33 KiB) Viewed 1047 times
จะเห็นว่าปัญหาในการจัดการความให้มีความยืดหยุ่น และปรับเปลี่ยนขนาดที่เราต้องการโดยไม่จำเป็นต้องมากำหนด property ในcssเองเลย เพียงแค่ใช้คลาสของbootstrap ที่เตรียมไว้ก็หมดปัญหาครับ
ทั้งหมดนี้เป็นส่วนหนึ่งของ ระบบ grid ใน bootstrap 4 สำหรับเนื้อหาเพิ่มเติมจะมาเขียนในกาสต่อไป สามารถสอบถามได้ในคอมเม้นได้เลยครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : bootstrap
-สอนการใช้งาน bootstrap
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests