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

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

การจัดเรียงลำดับคอลัมน์ Grid System

    การจัดเรียงลำดับคอลัมน์ Grid System บน Bootstrap

    เราสามารถทำได้ 2 แบบ คือ col-xs-pull และ col-xs-push โดยที่ col-xs-pull คือ เลื่อนคอลัมน์จากด้านขวาไปทางซ้าย และ col-xs-push คือการเลื่อนคอลัมน์จากด้านซ้ายไปทางขวา

     

    <div class="row">
      <div class="col-md-3 col-xs-push-9"> col-xs-3 col-xs-push-9 </div>
      
      <div class="col-md-9 col-xs-pull-3"> col-xs-9 col-xs-pull-3 </div>
    </div>

     

    จาก code ด้านบน div ที่มี class col-xs-3 เดิมอยู่ในต่ำแหน่ง 1-3 จะถูกเลื่อนจากด้านซ้ายไปทางขวา  9 คอลัมน์ คือ ไปอยู่ที่ต่ำแหน่งคอลัมน์ 10-12 แทน 

     

    การจัดเรียงลำดับคอลัมน์ Grid System บน Bootstrap แบบเว้นคอลัมน์

    วิธีการคือเราจะใช้ class ".col-md-offset-*" ซึ่งจะเป็นการเลื่อนเลื่อนคอลัมน์จากด้านซ้ายไปทางขวาตามค่าที่กำหนด ตัวอย่างเช่น

     

    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>

     

    จาก code ด้านบน div ที่มี col-md-offset-4 เดิมอยู่ในต่ำแหน่ง 5-8 จะถูกเลื่อนจากด้านซ้ายไปทางขวา  4 คอลัมน์ คือ ไปอยู่ที่ต่ำแหน่งคอลัมน์ 9-12 แทน ซึ่งจะทำให้ตำแหน่งคอลัมน์ 5-8 เกิดเป็นช่องว่าง

     

    สำหรับ md นั้นหมายถึงสำหรับหน้าจอที่มีขนาด < 768 px ถ้าเราต้องการเรียงลำดับคอลลัมน์บน Bootstrap ตามขนาดของ screen ของหน้าจออื่นๆ ต้องกำหนดค่าดังนี้
         - col-xs-pull-* และ col-xs-push-* สำหรับหน้าจอที่มีขนาด < 768 px
         - col-sm-pull-* และ col-sm-push-* สำหรับหน้าจอที่มีขนาด >= 768 px
         - col-md-pull-* และ col-md-push-* สำหรับหน้าจอที่มีขนาด >= 992 px
         - col-lg-pull-* และ col-lg-push-* สำหรับหน้าจอที่มีขนาด >= 1200 px

     

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

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

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