อาคารเรียน
ส่วนใหญ่ W3.CSS ถูกสร้างขึ้นรอบอาคารเรียนให้ขยายขอบขนาดและตำแหน่ง
เรียน padding
ชั้นเรียนขนาด W3-padding- เพิ่มขยายไปยังองค์ประกอบ HTML ใด ๆ
ชั้น W3-padding-จัมโบ้เพิ่ม 32px บนและด้านล่างและ 64px ซ้ายและขวา
ชั้น W3-padding-xxlarge เพิ่ม 24px บนและด้านล่างและ 48px ซ้ายและขวา
ชั้น W3-padding-XLarge เพิ่ม 16px บนและด้านล่างและ 32px ซ้ายและขวา
ชั้น W3-padding-ขนาดใหญ่เพิ่ม 12px บนและด้านล่างและ 24px ซ้ายและขวา
ชั้น W3-padding กลางเพิ่ม 8px บนและด้านล่างและ 16px ซ้ายและขวา
ชั้น W3-padding-ขนาดเล็กเพิ่ม 4px บนและด้านล่างและ 8px ซ้ายและขวา
ชั้น W3-padding-เล็กเพิ่ม 2px บนและด้านล่างและ 4px ซ้ายและขวา
ตัวอย่าง
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
ลองตัวเอง» W3-padding-hor- เรียนจำนวนเพิ่มแนวนอน (ด้านบนและด้านล่าง) เพื่อขยายองค์ประกอบ HTML ใด ๆ
W3-padding-Hor-4 ชั้นเพิ่ม 4px padding บนและด้านล่าง
W3-padding-Hor-8 ชั้นเพิ่ม 8px padding บนและด้านล่าง
W3-padding-Hor-16 ชั้นเพิ่ม 16px ด้านบนและด้านล่าง padding
W3-padding-Hor-32 ชั้นเพิ่ม 32px ด้านบนและด้านล่าง padding
W3-padding-Hor-64 ชั้นเพิ่ม 64px ด้านบนและด้านล่าง padding
ตัวอย่าง
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
ลองตัวเอง» W3-padding-ver- เรียนจำนวนเพิ่มแนวตั้ง (ซ้ายและขวา) เพื่อขยายองค์ประกอบ HTML ใด ๆ
W3-padding-Ver-4 ชั้นเพิ่ม 4px padding ซ้ายและขวา
W3-padding-Ver-8 ชั้นเพิ่ม 8px padding ซ้ายและขวา
W3-padding-Ver-16 ระดับ 16x เพิ่มช่องว่างด้านซ้ายและขวา
W3-padding-Ver-32 ชั้นเพิ่ม 32px padding ซ้ายและขวา
W3-padding-Hor-48 ชั้นเพิ่ม 64px padding ซ้ายและขวา
ตัวอย่าง
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
ลองตัวเอง» เรียน Margin
เรียนW3 มีอัตรากำไรเพิ่มอัตรากำไรขั้นต้นที่จะองค์ประกอบ:
ชั้น W3 มีอัตรากำไรเพิ่ม 16px ขอบทุกด้านขององค์ประกอบ
ชั้น W3-margin ล่างเพิ่มขอบด้านล่างเพื่อ 16px องค์ประกอบ
ชั้น W3 มีอัตรากำไรซ้ายเพิ่มอัตรากำไร 16px ซ้ายให้องค์ประกอบ
ชั้น W3 มีอัตรากำไรขวาเพิ่มขอบขวา 16px เพื่อองค์ประกอบ
ชั้น W3-ขอบด้านบนเพิ่มขอบด้านบนเพื่อ 16px องค์ประกอบ
การคำนวณขนาดของชั้นเรียน
ชั้นขนาด w3- เปลี่ยนขนาดตัวอักษรขององค์ประกอบ:
ฉันเล็ก ๆ (โดยใช้ W3 เล็ก ๆ )
ฉันเล็ก ๆ (โดยใช้ W3 ขนาดเล็ก)
ฉันกลาง เริ่มต้น
ผมขนาดใหญ่ (ใช้ W3 ขนาดใหญ่)
ฉัน XLarge (ใช้ W3-XLarge)
ตัวอย่าง
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> ลองตัวเอง» คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการเรียนการปรับขนาดในบท Typography W3.CSS
ปัดเศษเรียน
ชั้นขนาด W3-round- เพิ่มเส้นขอบให้โค้งมนธาตุ:
ตัวอย่าง
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
ลองตัวเอง» ชั้นวงกลม
ระดับศูนย์
ชั้น W3 ศูนย์ศูนย์องค์ประกอบ:
ตัวอย่าง
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> ลองตัวเอง» ลอยชั้นเรียน
ชั้น W3 ซ้ายลอยองค์ประกอบไปทางซ้ายชั้น W3 ขวาลอยไปทางขวาองค์ประกอบนี้:
ตัวอย่าง
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> ลองตัวเอง» แสดง / ซ่อนเรียน
W3 ซ่อนขนาดเล็ก | กลาง | ระดับขนาดใหญ่ซ่อนองค์ประกอบในขนาดหน้าจอที่เฉพาะเจาะจง
หมายเหตุ: ปรับขนาดหน้าต่างเบราว์เซอร์ที่จะเข้าใจวิธีการทำงาน:
ตัวอย่าง
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> ลองตัวเอง»