- Grid system (กริต ซิสเต็มส์) เป็น layout (เรย์เอ้า) ที่คอยควบคุมวัตถุต่างๆ บนหน้าเว็บไซต์ให้แสดงผลได้อย่างถูกต้องและเป็นระเบียบ จะส่งผลดีต่อการพัฒนาเว็บไซต์ในอนาคต และ สามารถใช้ร่วมกับอุปกรณ์ได้ทุกขนาด Gird system (กริต ซิสเต็มส์) จะปรับเปลื่ยนวัตถุบนหน้าเว็บไปตามขนาดของอุปกรณ์ที่เปิดไว้ grid stsyem (กริต ซิสเต็มส์) ของ Bootstrap (บูธสแทร็ป) ได้แบ่งออกเป็น 12 คอลัมน์ ขนาดเท่าๆกัน ซึ่งแต่ละ row (โร) จะมีกี่คอลัมน์ก็ได้ แต่ต้องมีขนาดคอลัมน์รวมกันทั้งหมด 12 คอลัมน์และ row (โร) ที่ต่างกันก็ไม่จำเป็นต้องมีคอลัมน์ที่เท่ากัน สามารถจัดการออกแบบได้อิสระ แต่ต้องอยู่ภายใน row (โร)
ปกติGrid (กริด)ในBootstrap (บูธสแทร็ป) จะเริ่มเรียงกันเฉพาะในแนวตั้ง เพื่อรองรับกับอุปกรณ์ต่างๆ เช่น สมาร์โฟน แท็บเล็ต ที่มีขนาดแตกต่างกันไป
ภาพตัวอย่าง : Grid ใน Bootstrap ทั่วไป
สำหรับบทความในวันนี้จะมานำเสนอเกี่ยวกับเรื่อง การทำGrid (กริด) แบบเรียงซ้อนในแนวนอน
ตัวอย่างต่อไปนี้จะแสดงให้เห็นถึงสองคอลัมน์ในการเรียงซ้อนในแนวนอน ซึ่งหมายความว่า จะส่งผลแสดงออกมาเป็นแบบ 50% และ 50% บนหน้าจอ แต่ในกรณีที่หน้าจอมีขนาดเล็กมาก จะซ้อนทับกลายเป็น 100% ในอัตโนมัติ
ภาพตัวอย่าง : หน้าจอภาพตามขนาดปกติ สองคอลัมน์ในการเรียงซ้อนในแนวนอน
ภาพตัวอย่าง : เมื่อหน้าจอของภาพมีขนาดเล็กลง ส่วนของข้อความบนหน้าจอจะแสดงผลออกมาในแนวตั้งโดยอัตโนมัติ
ตัวอย่างโค้ดCode: Select all
<!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 ให้เรียงซ้อนในแนวนอน
Moderators: mindphp, ผู้ดูแลกระดาน
- Panchalee
- PHP Super Member
- Posts: 296
- Joined: 30/10/2017 10:10 am
การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน
-
- Similar Topics
- Replies
- Views
- Last post
-
-
การใช้ bootstrap Grid บูทแตร๊ป กริต เบื้องต้น - ทำ Respovsive
by sonram » 12/07/2016 5:20 pm » in Booststap Knowledge - 0 Replies
- 1008 Views
-
Last post by sonram
12/07/2016 5:20 pm
-
-
- 0 Replies
- 1820 Views
-
Last post by abdkode
05/04/2019 1:46 pm
-
- 0 Replies
- 2069 Views
-
Last post by Parichat
11/01/2018 2:57 pm
-
- 1 Replies
- 2207 Views
-
Last post by boo_kyoshii
21/08/2013 11:08 am
-
- 0 Replies
- 1577 Views
-
Last post by sonram
12/07/2016 5:46 pm
-
-
การใช้ Yii Booster ext กับการโหลด bootstrap มาใช้แบบแยก
by sarapmax » 09/06/2014 7:32 pm » in Programming - PHP - 0 Replies
- 946 Views
-
Last post by sarapmax
09/06/2014 7:32 pm
-
-
-
การใช้งาน Python GUI (Tkinter) : Grid (กำหนดตำแหน่ง grid)
by Jom07 » 01/03/2018 2:15 pm » in Python Knowledge - 0 Replies
- 1138 Views
-
Last post by Jom07
01/03/2018 2:15 pm
-
-
- 0 Replies
- 437 Views
-
Last post by moomai
01/02/2017 5:11 pm
Who is online
Users browsing this forum: No registered users and 8 guests