- Grid system (กริต ซิสเต็มส์) เป็น layout (เรย์เอ้า) ที่คอยควบคุมวัตถุต่างๆ บนหน้าเว็บไซต์ให้แสดงผลได้อย่างถูกต้องและเป็นระเบียบ จะส่งผลดีต่อการพัฒนาเว็บไซต์ในอนาคต และ สามารถใช้ร่วมกับอุปกรณ์ได้ทุกขนาด Gird system (กริต ซิสเต็มส์) จะปรับเปลื่ยนวัตถุบนหน้าเว็บไปตามขนาดของอุปกรณ์ที่เปิดไว้ grid stsyem (กริต ซิสเต็มส์) ของ Bootstrap (บูธสแทร็ป) ได้แบ่งออกเป็น 12 คอลัมน์ ขนาดเท่าๆกัน ซึ่งแต่ละ row (โร) จะมีกี่คอลัมน์ก็ได้ แต่ต้องมีขนาดคอลัมน์รวมกันทั้งหมด 12 คอลัมน์และ row (โร) ที่ต่างกันก็ไม่จำเป็นต้องมีคอลัมน์ที่เท่ากัน สามารถจัดการออกแบบได้อิสระ แต่ต้องอยู่ภายใน row (โร)
ปกติGrid (กริด)ในBootstrap (บูธสแทร็ป) จะเริ่มเรียงกันเฉพาะในแนวตั้ง เพื่อรองรับกับอุปกรณ์ต่างๆ เช่น สมาร์โฟน แท็บเล็ต ที่มีขนาดแตกต่างกันไป
ภาพตัวอย่าง : Grid ใน Bootstrap ทั่วไป
สำหรับบทความในวันนี้จะมานำเสนอเกี่ยวกับเรื่อง การทำGrid (กริด) แบบเรียงซ้อนในแนวนอน
ตัวอย่างต่อไปนี้จะแสดงให้เห็นถึงสองคอลัมน์ในการเรียงซ้อนในแนวนอน ซึ่งหมายความว่า จะส่งผลแสดงออกมาเป็นแบบ 50% และ 50% บนหน้าจอ แต่ในกรณีที่หน้าจอมีขนาดเล็กมาก จะซ้อนทับกลายเป็น 100% ในอัตโนมัติ
ภาพตัวอย่าง : หน้าจอภาพตามขนาดปกติ สองคอลัมน์ในการเรียงซ้อนในแนวนอน
ภาพตัวอย่าง : เมื่อหน้าจอของภาพมีขนาดเล็กลง ส่วนของข้อความบนหน้าจอจะแสดงผลออกมาในแนวตั้งโดยอัตโนมัติ
ตัวอย่างโค้ดโค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Grid</h1> <p>ตัวอย่างต่อไปนี้จะแสดงให้เห็นถึงสองคอลัมน์ในการเรียงซ้อนในแนวนอน ซึ่งหมายความว่า จะส่งผลแสดงออกมาเป็นแบบ 50% และ 50% บนหน้าจอ แต่ในกรณีที่หน้าจอมีขนาดเล็กมาก จะซ้อนทับกลายเป็น 100% ในอัตโนมัติ.</p> <div class="row"> <div class="col-sm-6" style="background-color:yellow;"> ข้อความส่วนที่ 1 ..................................................................................................................... ............................................................... ............................................................... </div> <div class="col-sm-6" style="background-color:pink;"> ข้อความส่วนที่ 2 ..................................................................................................................... ............................................................... ............................................................... </div> </div> </div> </body> </html>
การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน
Moderator: mindphp, ผู้ดูแลกระดาน
- Panchalee
- PHP Super Member
- โพสต์: 296
- ลงทะเบียนเมื่อ: 30/10/2017 10:10 am
การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การใช้ bootstrap Grid บูทแตร๊ป กริต เบื้องต้น - ทำ Respovsive
โดย sonram » 12/07/2016 5:20 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 1741 แสดง
-
โพสต์ล่าสุด โดย sonram
12/07/2016 5:20 pm
-
-
- 0 ตอบกลับ
- 3795 แสดง
-
โพสต์ล่าสุด โดย abdkode
05/04/2019 1:46 pm
-
-
โพสต์ใหม่ การใช้ Closing Alerts ใน Bootstrap
โดย Parichat » 11/01/2018 2:57 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 2875 แสดง
-
โพสต์ล่าสุด โดย Parichat
11/01/2018 2:57 pm
-
-
-
โพสต์ใหม่ การใช้ icon ไอคอน ใน bootstrap บูส แตร๊ป
โดย sonram » 12/07/2016 5:46 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 2571 แสดง
-
โพสต์ล่าสุด โดย sonram
12/07/2016 5:46 pm
-
-
-
โพสต์ใหม่ การใช้ Yii Booster ext กับการโหลด bootstrap มาใช้แบบแยก
โดย sarapmax » 09/06/2014 7:32 pm » ใน Programming - PHP - 0 ตอบกลับ
- 1283 แสดง
-
โพสต์ล่าสุด โดย sarapmax
09/06/2014 7:32 pm
-
-
- 0 ตอบกลับ
- 953 แสดง
-
โพสต์ล่าสุด โดย moomai
01/02/2017 5:11 pm
-
-
โพสต์ใหม่ การใช้งาน Python GUI (Tkinter) : Grid (กำหนดตำแหน่ง grid)
โดย Jom07 » 01/03/2018 2:15 pm » ใน Python Knowledge - 0 ตอบกลับ
- 2346 แสดง
-
โพสต์ล่าสุด โดย Jom07
01/03/2018 2:15 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 69