การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน

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

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

Panchalee
PHP Hero Member
PHP Hero Member
โพสต์: 116
ลงทะเบียนเมื่อ: 30/10/2017 10:10 am

การใช้ Grid ใน Bootstrap ให้เรียงซ้อนในแนวนอน

โพสต์โดย Panchalee » 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
    Grid_System.png (11.35 KiB) เปิดดู 19 ครั้ง



    สำหรับบทความในวันนี้จะมานำเสนอเกี่ยวกับเรื่อง การทำGrid (กริด) แบบเรียงซ้อนในแนวนอน
    ตัวอย่างต่อไปนี้จะแสดงให้เห็นถึงสองคอลัมน์ในการเรียงซ้อนในแนวนอน ซึ่งหมายความว่า จะส่งผลแสดงออกมาเป็นแบบ 50% และ 50% บนหน้าจอ แต่ในกรณีที่หน้าจอมีขนาดเล็กมาก จะซ้อนทับกลายเป็น 100% ในอัตโนมัติ

    ภาพตัวอย่าง : หน้าจอภาพตามขนาดปกติ สองคอลัมน์ในการเรียงซ้อนในแนวนอน
    grid1.png



    ภาพตัวอย่าง : เมื่อหน้าจอของภาพมีขนาดเล็กลง ส่วนของข้อความบนหน้าจอจะแสดงผลออกมาในแนวตั้งโดยอัตโนมัติ
    grid2.PNG
    grid2.PNG (24.84 KiB) เปิดดู 19 ครั้ง



    ตัวอย่างโค้ด

    โค้ด: เลือกทั้งหมด

    <!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>

อ้างอิง : W3School

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน