การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน
โพสต์แล้ว: 01/11/2017 11:20 am
- Grid system (กริต ซิสเต็มส์) เป็น layout (เรย์เอ้า) ที่คอยควบคุมวัตถุต่างๆ บนหน้าเว็บไซต์ให้แสดงผลได้อย่างถูกต้องและเป็นระเบียบ จะส่งผลดีต่อการพัฒนาเว็บไซต์ในอนาคต และ สามารถใช้ร่วมกับอุปกรณ์ได้ทุกขนาด Gird system (กริต ซิสเต็มส์) จะปรับเปลื่ยนวัตถุบนหน้าเว็บไปตามขนาดของอุปกรณ์ที่เปิดไว้ grid stsyem (กริต ซิสเต็มส์) ของ Bootstrap (บูธสแทร็ป) ได้แบ่งออกเป็น 12 คอลัมน์ ขนาดเท่าๆกัน ซึ่งแต่ละ row (โร) จะมีกี่คอลัมน์ก็ได้ แต่ต้องมีขนาดคอลัมน์รวมกันทั้งหมด 12 คอลัมน์และ row (โร) ที่ต่างกันก็ไม่จำเป็นต้องมีคอลัมน์ที่เท่ากัน สามารถจัดการออกแบบได้อิสระ แต่ต้องอยู่ภายใน row (โร)
ปกติGrid (กริด)ในBootstrap (บูธสแทร็ป) จะเริ่มเรียงกันเฉพาะในแนวตั้ง เพื่อรองรับกับอุปกรณ์ต่างๆ เช่น สมาร์โฟน แท็บเล็ต ที่มีขนาดแตกต่างกันไป
ภาพตัวอย่าง : Grid ใน Bootstrap ทั่วไป- Grid_System.png (11.35 KiB) Viewed 2615 times
สำหรับบทความในวันนี้จะมานำเสนอเกี่ยวกับเรื่อง การทำGrid (กริด) แบบเรียงซ้อนในแนวนอน
ตัวอย่างต่อไปนี้จะแสดงให้เห็นถึงสองคอลัมน์ในการเรียงซ้อนในแนวนอน ซึ่งหมายความว่า จะส่งผลแสดงออกมาเป็นแบบ 50% และ 50% บนหน้าจอ แต่ในกรณีที่หน้าจอมีขนาดเล็กมาก จะซ้อนทับกลายเป็น 100% ในอัตโนมัติ
ภาพตัวอย่าง : หน้าจอภาพตามขนาดปกติ สองคอลัมน์ในการเรียงซ้อนในแนวนอน
ภาพตัวอย่าง : เมื่อหน้าจอของภาพมีขนาดเล็กลง ส่วนของข้อความบนหน้าจอจะแสดงผลออกมาในแนวตั้งโดยอัตโนมัติ- grid2.PNG (24.84 KiB) Viewed 2615 times
ตัวอย่างโค้ดโค้ด: เลือกทั้งหมด
<!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>