Responsive Design
ถ้าใครอยากจะทำ Responsive Web แล้วล่ะก็
Bootstrap ได้เตรียม features รองรับไว้แล้วครับ ให้เรา enable responsive
features ด้วยการเพิ่มโค้ดด้านล่างนี้ไว้ที่ <head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
|
สไตล์
ชีท “bootstrap-responsive.min.css” จะเข้ามาช่วยเราจัดการในเรื่องของ
responsive แบบอัตโนมัติครับ ไม่ว่าจะเป็นขนาดของ margin และ padding
รวมไปถึงการเรียงกันของ grid ที่ viewport ขนาดต่างๆ หรือถ้าเราอยากให้
html elements ซ่อน/แสดง บน devices ไหน เราก็สามารถทำได้ง่ายๆ
ด้วยการเพิ่ม class ที่ Bootstrap เตรียมไว้ให้ตามตารางนี้ครับ
| Class | Phones
(767px and below) | Tablets
(979px to 768px) | Desktops
(Default) |
|---|
| .visible-phone | Visible | Hidden | Hidden |
|---|
| .visible-tablet | Hidden | Visible | Hidden |
|---|
| .visible-desktop | Hidden | Hidden | Visible |
|---|
| .hidden-phone | Hidden | Visible | Visible |
|---|
| .hidden-tablet | Visible | Hidden | Visible |
|---|
| .hidden-desktop | Visible | Visible | Hidden |
|---|
ตาราง
ด้านบนจะแสดง class ต่างๆ ที่เอาไว้ ซ่อน/แสดง content ต่างๆ ในแต่ละ
devices การใช้งานก็ง่ายๆ เพียงแค่เราเพิ่ม class เข้าไปที่ html element
ที่ต้องการจะ ซ่อน/แสดง แบบนี้ครับ
|
|
<div class="row">
<div class="span3">Secondary</div>
<div class="span6">Primary</div>
<div class="span3 visible-desktop">Sidebar</div>
</div>
|
จากตัวอย่างนี้จะได้ว่า คอลัมน์ “Sidebar” จะแสดงต่อเมื่อเป็นเคส Desktop เท่านั้น ในขณะที่คอลัมน์อื่นๆ จะแสดงในทุกๆ devices ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น