ตารางในมุมมองคืออะไร?
หน้าเว็บมากจะขึ้นอยู่กับมุมมองของตารางซึ่งหมายความว่าหน้าจะแบ่งออกเป็นคอลัมน์:
การใช้ตารางมุมมองที่เป็นประโยชน์มากเมื่อมีการออกแบบหน้าเว็บ มันทำให้ง่ายที่จะวางองค์ประกอบบนหน้าเว็บ
ตอบสนองตารางมุมมองมักจะมี 12 คอลัมน์และมีความกว้างรวม 100% และจะหดตัวและขยายตัวตามที่คุณปรับขนาดหน้าต่างเบราว์เซอร์
อาคารที่ตอบสนองต่อตารางดู
ให้เริ่มต้นการสร้างการตอบสนองตารางมุมมอง
ครั้งแรกให้แน่ใจว่าองค์ประกอบ HTML ทั้งหมดมี box-sizing ชุดคุณสมบัติที่จะ border-box ซึ่งทำให้แน่ใจว่าช่องว่างภายในและชายแดนจะรวมอยู่ในความกว้างและความสูงรวมขององค์ประกอบ
เพิ่มรหัสต่อไปนี้ใน CSS ของคุณ:
* {
box-sizing: border-box;
}
อ่านเพิ่มเติมเกี่ยวกับ box-sizing คุณสมบัติในของเรา CSS3 กล่องขนาด บท
ตัวอย่างต่อไปนี้แสดงให้เห็นว่าหน้าเว็บที่ตอบสนองง่ายกับสองคอลัมน์:
ตัวอย่างข้างต้นเป็นดีถ้าหน้าเว็บที่มีเพียงสองคอลัมน์
แต่เราต้องการที่จะใช้ตอบสนองตารางมุมมองกับ 12 คอลัมน์ที่จะมีการควบคุมที่มากกว่าหน้าเว็บ
ครั้งแรกที่เราจะต้องคำนวณเปอร์เซ็นต์สำหรับหนึ่งคอลัมน์: 100% / 12 คอลัมน์ = 8.33%
จากนั้นเราก็ทำให้ชั้นหนึ่งสำหรับแต่ละ 12 คอลัมน์ class="col-" และในจำนวนที่กำหนดจำนวนคอลัมน์ส่วนควรครอบคลุม:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;} ลองตัวเอง» คอลัมน์ทั้งหมดเหล่านี้ควรจะลอยไปทางซ้ายและมีช่องว่างของ 15px A:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} แต่ละแถวควรจะห่อใน <div> จำนวนคอลัมน์ภายในแถวควรเพิ่มขึ้นถึง 12:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>คอลัมน์ภายในแถวทั้งหมดลอยไปทางซ้ายและถูกนำมาจึงออกมาจากการไหลของหน้าและองค์ประกอบอื่น ๆ จะถูกวางไว้เช่นถ้าคอลัมน์ที่ไม่ได้อยู่ เพื่อป้องกันการนี้เราจะเพิ่มรูปแบบที่ล้างไหลไปนี้:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}นอกจากนี้เรายังต้องการที่จะเพิ่มรูปแบบและสีที่จะทำให้มันดูดีขึ้น:
ตัวอย่าง
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
} ลองตัวเอง» ขอให้สังเกตว่าหน้าเว็บในตัวอย่างที่ไม่ได้ดูดีเมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์ที่จะมีความกว้างขนาดเล็กมาก ในบทต่อไปที่คุณจะได้เรียนรู้วิธีการที่จะแก้ไขปัญหาที่