เค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
คลาสเค้าโครง W3.CSS
W3.CSS เวอร์ชัน 2.90 / 2.91 แนะนำคลาสต่อไปนี้สำหรับโครงร่าง "เหมือนคอลัมน์":
| ระดับ | คำอธิบาย |
|---|---|
| w3-เซลล์-แถว | คอนเทนเนอร์สำหรับเซลล์ (คอลัมน์) |
| w3-cell | เค้าโครงเซลล์ (คอลัมน์) |
| w3-cell-top | จัดแนวเนื้อหาที่ด้านบนสุดของเซลล์ (คอลัมน์) |
| w3-เซลล์กลาง | จัดเนื้อหาที่กึ่งกลางแนวตั้งของเซลล์ (คอลัมน์) |
| w3-เซลล์ล่าง | จัดแนวเนื้อหาที่ด้านล่างของเซลล์ (คอลัมน์) |
| w3-mobile | เพิ่มการตอบสนองเพื่อมือถือเป็นอันดับแรกไปยังเซลล์ (คอลัมน์) แสดงองค์ประกอบเป็นองค์ประกอบบล็อกบนอุปกรณ์มือถือ |
คลาสโครงร่างแทนที่คลาสโครงร่างที่เลิกใช้แล้ว
คลาสเลย์เอาต์ใหม่นี้ใช้งานได้หลากหลายและใช้งานง่ายขึ้น
คลาสเลย์เอาต์ที่เลิกใช้จะแสดงรายการที่ด้านล่างของหน้านี้
องค์ประกอบบล็อก HTML
เดิมที องค์ประกอบบล็อก HTML (เช่น <div> องค์ประกอบ) จะแสดงเป็นบล็อกแนวตั้ง:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
เค้าโครงเซลล์
คลาสw3-cellกำหนดองค์ประกอบบล็อกใหม่เพื่อแสดงในแนวนอน (เช่นเซลล์ตาราง):
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
เค้าโครงคอนเทนเนอร์
w3-cell-rowเป็นคอนเทนเนอร์สำหรับเซลล์ (คอลัมน์)
ความกว้างของคอนเทนเนอร์ w3-cell-row กำหนดความกว้างรวมของเซลล์ที่มีอยู่ทั้งหมด
ความกว้างเริ่มต้นคือ 100%:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
หากคุณเปลี่ยนความกว้างของคอนเทนเนอร์เซลล์ จะเป็นการลดความกว้างทั้งหมดของเซลล์ที่มีอยู่:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
เค้าโครงเซลล์กำลังปรับตัวเอง
คลาสw3-cellมีมาตรฐานการปรับตัวเองในตัวที่ดีมาก องค์ประกอบแบบเคียงข้างกันจะปรับตามความกว้างที่จำเป็นโดยอัตโนมัติ:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
เลย์เอาต์เซลล์ปรับความสูงเท่ากัน
องค์ประกอบ w3-cellแบบเคียงข้างกันจะปรับตัวเองโดยอัตโนมัติเพื่อให้มีความสูงเท่ากัน:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
เลย์เอาต์ที่ตอบสนอง
คลาสw3-mobileเพิ่มการตอบสนองก่อนมือถือให้กับองค์ประกอบ HTML ใดๆ
เมื่อใช้ร่วมกับเซลล์ w3 จะแสดงคอลัมน์เลย์เอาต์ในแนวตั้งบนหน้าจอขนาดเล็ก/โทรศัพท์มือถือ และแนวนอนบนหน้าจอขนาดกลาง/ขนาดใหญ่
บนหน้าจอขนาดกลางและขนาดใหญ่:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
บนหน้าจอขนาดเล็ก:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
จัดตำแหน่งง่าย
คลาสw3-cellช่วยให้จัดแนวข้อความได้ง่ายมาก
มี 3 คลาสการจัดตำแหน่งที่แตกต่างกัน:
- w3-cell-top (ค่าเริ่มต้น)
- w3-เซลล์กลาง
- w3-เซลล์ล่าง
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
คลาสw3-cell-rowขยายองค์ประกอบเพื่อให้พอดีกับความกว้างของหน้า:
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
สวัสดีเค้าโครง W3.CSS
ตัวอย่าง
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
เลิกใช้คลาสเค้าโครงตาราง W3.CSS
| w3-เค้าโครงคอนเทนเนอร์ | ใช้ w3-cell-row แทน |
| w3-layout-แถว | |
| w3-layout-เซลล์ | ใช้ w3-cell แทน |
| w3-layout-top | ใช้ w3-cell-top แทน |
| w3-layout-กลาง | ใช้ w3-cell-middle แทน |
| w3-layout-ด้านล่าง | ใช้ w3-cell-bottom แทน |
| w3-layout-col | ใช้ w3-mobile แทน |
คลาสที่เลิกใช้งานจะถูกลบออกจาก W3.CSS ในเวอร์ชัน 4.0