ในบทเรียนก่อนหน้านี้เราได้เรียนรู้วิธีการจัดการ 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.
0 ความคิดเห็น:
แสดงความคิดเห็น