Bootstrap การจัดการ grid เพื่อให้รองรับกับหน้าจอทุกขนาด xs sm md lg  สร้างคำถาม

 139 view  หมวดหมู่ : สำหรับโปรแกรมเมอร์  วันที่สร้าง : 04/12/2017

เรื่องของการจัดการ Content ให้เป็น Responsive ทุกวันนี้ถือได้ว่าเป็นเรื่องปรกติที่ทุก website จะต้องทำกัน
เพราะ client ของเราไม่ได้มีแค่ PC อีกต่อไป แต่มีทั้ง mobile , tablet , pc ซึ่งแต่ละ device ก็มีหน้าจอหลากหลายขนาด
วันนี้เราจะมาทบทวนการจัดการหน้าจอของ Bootstrap ในรูปแบบ grid
โดยการกำหนดความกว้างของ tag div
ตาม format col-ขนาดหน้าจอ-ความกว้างที่ต้องการ
โดยขนาดหน้าจอประกอบด้วย
- xs (for phones - ความกว้างหน้าจอน้อยกว่า 768px )
- sm (for tablets - ความกว้างหน้าจอมากกว่าหรือเท่ากับ 768px )
- md (for small laptops - ความกว้างหน้าจอมากกว่าหรือเท่ากับ 992px )
- lg (for laptops and desktops - ความกว้างหน้าจอมากกว่าหรือเท่ากับ 1200px )
วิธีการกำหนดค่าก็คือ
col-xs-6
col-sm-6
col-lg-6



ถ้าชอบบทความนี้ กด Like เลย :Bootstrap การจัดการ grid เพื่อให้รองรับกับหน้าจอทุกขนาด xs sm md lg
TAGS : Bootstrap   Javascript   Programming   เขียนโปรแกรม  
 139 view  หมวดหมู่ : สำหรับโปรแกรมเมอร์  วันที่สร้าง : 04/12/2017



SOA,Java,XSLT

 ร่วมแสดงความคิดเห็นได้ที่นี่




× แจ้งเตือน! เราสนับสนุนทุกความคิดเห็น ที่ ใช้ถ้อยคำสุภาพ ไม่ละเมิดผู้อื่น ไม่ก่อให้เกิดความขัดแย้ง

เนื้อหาที่เกี่ยวช้อง

  ORACLE alter table not null ยังไงครับ ถามเมื่อ (2017-11-10)   144 views  (ดูล่าสุดเมื่อ 59 วินาที!!)

  PHP Gen Words Doc file แบบใช้ Template ถามเมื่อ (2013-03-29)   1,694 views  (ดูล่าสุดเมื่อ 4 นาที)

  อยากแทรก iframe เข้าไปใน flex ของ script ด้วยครับ ถามเมื่อ (2013-04-24)   1,492 views  (ดูล่าสุดเมื่อ 5 นาที)

  JSON ย่อมาจาก JavaScript Object Notation ความหมายคือ ถามเมื่อ (2017-12-26)   136 views  (ดูล่าสุดเมื่อ 12 นาที)

  Oracle Field ประเภท Varchar2 เก็บได้กี่ตัวอักษร ถามเมื่อ (2017-03-03)   970 views  (ดูล่าสุดเมื่อ 16 นาที)

  Datatype ใน JSON ประกอบด้วยอะไรบ้าง ถามเมื่อ (2017-12-26)   81 views  (ดูล่าสุดเมื่อ 28 นาที)

  Hibernate Mapping Auto number ใน Oracle ด้วย SEQUENCE ถามเมื่อ (2013-07-04)   1,781 views  (ดูล่าสุดเมื่อ 30 นาที)

  Eclipse to uppercase วิธี switch ตัวอักษรจาก ใหญ่ไปเล็ก หรือ เล็กไปใหญ่ ด้วย key ลัดของ eclipse ถามเมื่อ (2015-08-28)   1,883 views  (ดูล่าสุดเมื่อ 33 นาที)

  jFreechart วิธีทำ Custom Label เพื่อแสดงผลบนกราฟดั่งใจเรา ถามเมื่อ (2017-03-03)   763 views  (ดูล่าสุดเมื่อ 44 นาที)

  ng model ใน AngularJS คือ อะไร ถามเมื่อ (2015-06-18)   620 views  (ดูล่าสุดเมื่อ 63 นาที)


 

บ้านเดียวกันดอทคอม เว็บถามตอบ รวมทุกเรื่องที่คุณอยากรู้ ให้ความรู้ ความบันเทิง มีสาระ
www.ban1gun.com