รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทํา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> 

     

     

     

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

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com