ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

การใช้งาน Layout ในการกำหนด Grid  จะมีอยู่ 2 class ซึ่งมีชื่อคือ container และ container-fluid ส่วนความกว้างของ div มีทั้งหมด 1-12 ตัวอักษรแล้วมี div ทั้งหมด แบ่งออกเป็น 12 คอลัมน์ จะสังเกตเห็นว่าจำนวนของคอลัมน์รวมกันได้มากถึง 12 ซึ่งอาจน้อยกว่าสิบสองคอลัมน์ แต่ระวังถ้ามีมากกว่า 12 ซึ่งใน Bootstrap 4 นั้น จะมีการใช้งาน xs โดยไม่ต้องกำหนดค่าต่อท้าย ยกตัวอย่างเช่น col, col-sm, col-md, col-lg, col-xl ซึ่งจะใช้ col แทน col-xs

 

Responsive breakpoints

จุดการเปลี่ยนของการกำหนด responsive  หรือจุดที่กำหนดให้รูปแบบการแสดงผล

- xs ขนาดเล็กที่สุด  เช่น อุปกรณ์ขนาดเล็กมาก หรือจอเมือถือในแนวตั้งที่ขนาด  < 576px

- sm ขนาดเล็ก เช่น  อุปกรณ์ขนาดเล็ก หรือ จอมือถือในแนวนอนที่ขนาด >= 576px และ < 768px

- md ขนาดปานกลาง เช่น แท็บเล็ทขนาดหน้าจอ >= 768px และ < 992px

- lg ขนาดใหญ่ เช่น คอมพิวเตอร์ขนาดหน้าจอ >= 992px และ < 1200px

- xl ขนาดใหญ่ที่สุด เช่น คอมพิวเตอร์หน้าจอขนาดใหญ่ >= 1200px ขึ้นไป

ตัวอย่าง

 

<div class="container">

  <div class="row">

    <div class="col-sm">

      One of three columns

    </div>

    <div class="col-sm">

      One of three columns

    </div>

    <div class="col-sm">

      One of three columns

    </div>

  </div>

</div>
Grid เป็นเครื่องมือที่ช่วยให้เราสามารถออกแบบเลย์เอาท์เอกสารของ html
ผลลัพท์ที่ใช้ div ของคอลัมน์และแถว

 

เป็นการกำหนดแถวหนึ่งแถว สามคอลัมน์ โดยให้ class row เป็นแถว  และ class col เป็นคอลัมน์

Grid เป็นเครื่องมือที่ช่วยให้เราสามารถออกแบบเลย์เอาท์เอกสารของ html ได้เหมือนกับการใช้แท็ก ซึ่งในการใช้จะใช้ divในการช่วยทำเอกสารได้เร็วมากยิ่งขึ้น นอกจากนี้ยังชวยให้เราสามารถออกแบบเลย์เอาท์ต่าง ๆได้ ที่เรียกว่า responsive web design  ซึ่งจะช่วยลดเวลาการทำการพัฒนาได้มากยิ่งขึ้น

อ้างอิง

การใช้งาน Grid ใน Bootstrap.[ออนไลน์].เข้าถึงได้จาก https://angsila.cs.buu.ac.th/~58160436/887371/lab03/bootstrap.html

ความหมายของตัวเลขใน“ col-md-4”,“ col-xs-1”,“ col-lg-2” ใน Bootstrap.[ออนไลน์].เข้าถึงได้จากhttps://qastack.in.th/programming/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap

Grid System คืออะไร ? .[ออนไลน์].เข้าถึงได้จากhttps://angsila.cs.buu.ac.th/~58160640/887371/lab03/grid.html

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 31 กรกฎาคม 2564
โดย Pemika.D ส 31 ก.ค. 2021 8:44 am บอร์ด M142 - เปมิกา ดวงสว่าง
5
26
ส 31 ก.ค. 2021 6:16 pm โดย Pemika.D
VDO - สอนวิธีการสร้าง ร้านสวัสดิการ/ ร้านยา
โดย Pemika.D ส 31 ก.ค. 2021 6:03 pm บอร์ด M142 - เปมิกา ดวงสว่าง
0
2
ส 31 ก.ค. 2021 6:03 pm โดย Pemika.D
OBS คืออะไร
โดย Pemika.D ส 31 ก.ค. 2021 5:52 pm บอร์ด Graphic design
0
16
ส 31 ก.ค. 2021 5:52 pm โดย Pemika.D
Corel Videostudio คืออะไร
โดย Pemika.D ส 31 ก.ค. 2021 5:28 pm บอร์ด Graphic design
0
18
ส 31 ก.ค. 2021 5:28 pm โดย Pemika.D
ทำความรู้จักกับ Canva ทำอะไร
โดย Pemika.D ส 31 ก.ค. 2021 1:12 pm บอร์ด Graphic design
0
25
ส 31 ก.ค. 2021 1:12 pm โดย Pemika.D
จูมลา (Joomla) ความหมายคืออะไร
โดย Pemika.D ส 31 ก.ค. 2021 12:28 pm บอร์ด Joomla Developing Knowledge
1
23
ส 31 ก.ค. 2021 1:22 pm โดย mindphp
VDO - หลังบ้านไม่พบ Amount/ Price ไม่ตรงกับหน้าบ้าน
โดย Pemika.D ศ 30 ก.ค. 2021 5:23 pm บอร์ด M142 - เปมิกา ดวงสว่าง
2
18
ส 31 ก.ค. 2021 11:23 am โดย Pemika.D
Q - เทสระบบ selenium mzc เเล้วขึ้นเออเรอร์ไม่ทราบว่าต้องแก้ยังไงคะ
โดย norisa_dl ศ 30 ก.ค. 2021 4:47 pm บอร์ด Programming - C/C++ & java & Python
0
31
ศ 30 ก.ค. 2021 4:47 pm โดย norisa_dl