รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

พื้นฐานของ Bootstrap Grid System มีอะไรบ้าง

    Bootstrap นั้นรองรับการแสดงผลทั้งบนคอมพิวเตอร์ มือถือและแท็บแล็ต โดยการแสดงผลดังกล่าว Bootstrap นั้นใช้ Grid System  เข้ามาจัดการการแสดงผลเนื้อหาให้มีความเหมาะสมกับขนาดหน้าจอของอุปกรณ์ต่างๆ เหล่านั้น

    Grid System คืออะไร ?
    ถ้าพูดกันแบบบ้านๆ ทั่วไปเราก็คงจะบอกว่าเป็น Layout ที่คอยควบคุมวัตถุต่างๆ บนหน้าเว็บไซต์ให้แสดงผลได้อย่างถูกต้องตามหลัก box layout ซึ่งจะส่งผลดีต่อการเขียนหนึ่งหน้าเว็บไซต์ แต่สามารถใช้ร่วมกับอุปกรณ์ทุกขนาดหน้าจอ Grid system ของ Bootstrap เอง แบ่งออกเป็น 12 คอลัมน์ ถ้าให้เห็นภาพง่ายขึ้นก็น่าจะต้องบอกว่า เหมือนกับตาราง 1 แถว มี 12 คอลัมน์ประมาณนั้น

    การสร้าง Grid system
    1. ในการสร้าง Grid system นั้น Bootstrap แนะนำให้เราสร้างแถวและคอลัมน์ไว้ใน container โดยคลาส container  ของ Bootstrap  แบ่งออกเป็น 2 ประเภท คือ container และ container-fluid สำหรับ container นั้นจะแสดงผลเนื้อหาตามที่เรากำหนดความกว้างของหน้าจอ ส่วน container-fluid  นั้นจะแสดงผลเนื้อหาเต็มความกว้างของหน้าจอของเรา โดยในที่นี้คือเราจะใช้คลาส container

    <div class="container">      </div>  

    2. สร้างแถวโดยใช้  class="row" ภายใต้ class="container" โดยเราสามารถที่จะสร้างแถวได้ไม่จำกัด แต่แถวเหล่านั้นต้องอยู่ภายใต้ class="container"

    <div class="container">
    <div class="row"></div>
    </div>

    3. แต่ละแถวของ Grid system นั้นมีคอลัมน์ในแต่ละแถวได้ 12 คอลัมน์ โดยคอลัมน์ของ Grid system แบ่งออกเป็น 4 ประเภทคือ
    class     ประเภทหน้าจอ     ขนาดหน้าจอ
    .col-xs-     Smart Phone     <768px
    .col-sm-     Tablet     ≥768px
    .col-md-     Desktop ขนาดกลาง     ≥992px
    .col-lg-     Desktop ขนาดใหญ่     ≥1200px

    โดยที่ "int" คือจำนวนคอลัมน์ที่เราต้องการแบ่งให้กับแต่ละเนื้อหา  ตัวอย่างเช่น เราต้องการแสดงผล 2 คอลัมน์บนขนาดหน้าจอที่ >= 768 px  เราสามารถทำได้โดยการเขียนโค้ดลงไปดังนี้

    <!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>My First Boostrap Application</title>
      <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
      <!--[if lt IE 9] >
       <script scr="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script scr="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif] -->  
     </head>
     <body>
    <div class="container">
      <div class="row">
       <div class="col-sm-6">
         <h4>Column1</h4>
       </div>
       <div class="col-sm-6">
         <h4>Column2</h4>
       </div>
      </div>
    </div>
      <script src="js/jquery-1.11.1.js"></script>
      <script src="js/bootstrap.js"></script>
    </body>
    </html>