วันอาทิตย์ที่ 14 กันยายน พ.ศ. 2557



     ในบทเรียนก่อนหน้านี้เราได้เรียนรู้วิธีการจัดการ Grid System บน Bootstrap 3 ไปแล้วพอสมควร ได้วันนี้เราจะมาทำความรู้จักกับอีกหนึ่งฟังก์ชั่นพื้นฐานของ Grid System นั้นคือการจัดเรียงลำดับคอลัมน์ โดยการจัดเรียงคอลัมน์บน Grid System นั้นก็เหมือนการจัดเยื้องซ้าย หรือเยื้องขวาบน MS Word นั้นเอง ซึ่งจะช่วยให้การจัดวางเนื้อหาบนเว็บไซด์นั้นมีความสวยงามมากยิ่งขึ้น




     คลาสที่ใช้จัดเรียงลำดับคอลัมน์บน Grid System นั้นมี 2 คลาสให้เราเลือกใช้งานนั้นคือ "col-xs-pull-*" และ "col-xs-push" โดยที่ "col-xs-pull-*" นั้นหมายถึง การย้ายคอลัมน์จากด้านซ้ายมือไปทางขวามือ และ "col-xs-push"  นั้นก็ตรงข้ามกับ "col-xs-pull-*" นั้นคือการย้ายคอลัมน์จากด้านขวามือไปทางซ้ายมือ ดังตัวอย่างด้านล่าง

<div class="row">
  <div class="col-xs-9 col-xs-push-3">
 <h1>Push Column1</h1>
  </div>
  
  <div class="col-xs-3 col-xs-pull-9">
 <h1>Pull Column2</h1>
  </div>
</div>


     จากโค้ดด้านบน คอลลัมน์ที่ถูกกำหนดด้วยคลาส "col-xs-9" จะถูกผลักไปด้านขวามืออีก 3 คอลลัมน์ ซึ่งก่อนหน้านี้คอลลัมน์ของคลาส  "col-xs-9"  จะอยู่ในตำแหน่งคอลัมน์ที่ 1-9 แต่เมื่อถูกกำหนดด้วยคลาส "col-xs-push-3" เพิ่มเข้าไปทำให้คอลลัมน์ของคลาส  "col-xs-9"  จะอยู่ในตำแหน่งที่ 4-12 ในส่วนของคอลัมน์ที่ถูกกำหนด้วยคลาส "col-xs-3" นั้นจะถูกดึงมาทางด้านซ้ายมือ 3 คอลลัมน์ โดยผลลัพธ์ของโค้ดด้านบนแสดงในรูปที่ 1


รูปที่ 1.


     นอกจากนี้การจำลำดับคอลลัมน์บน 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

Reference
-  Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.

Categories:

0 ความคิดเห็น:

แสดงความคิดเห็น

Subscribe to RSS Feed Follow me on Twitter!