W3.CSS

W3.CSS หน้าแรก W3.CSS แนะนำ W3.CSS สี คอนเทนเนอร์ W3.CSS แผง W3.CSS เส้นขอบ W3.CSS การ์ด W3.CSS ค่าเริ่มต้นของ W3.CSS แบบอักษร W3.CSS W3.CSS Google W3.CSS Text W3.CSS รอบ W3.CSS แพ็ดดิ้ง W3.CSS Margins จอแสดงผล W3.CSS ปุ่ม W3.CSS W3.CSS หมายเหตุ คำคม W3.CSS การแจ้งเตือน W3.CSS ตาราง W3.CSS รายการ W3.CSS W3.CSS รูปภาพ อินพุต W3.CSS ป้าย W3.CSS แท็ก W3.CSS ไอคอน W3.CSS W3.CSS ตอบสนอง เค้าโครง W3.CSS ภาพเคลื่อนไหว W3.CSS เอฟเฟกต์ W3.CSS W3.CSS บาร์ ดรอปดาวน์ W3.CSS หีบเพลง W3.CSS W3.CSS การนำทาง แถบด้านข้าง W3.CSS แท็บ W3.CSS การแบ่งหน้า W3.CSS แถบความคืบหน้า W3.CSS สไลด์โชว์ W3.CSS W3.CSS โมดอล เคล็ดลับเครื่องมือ W3.CSS W3.CSS กริด รหัส W3.CSS ตัวกรอง W3.CSS W3.CSS Trends กรณี W3.CSS W3.CSS วัสดุ การตรวจสอบ W3.CSS เวอร์ชัน W3.CSS W3.CSS มือถือ

W3.CSS สี

คลาสสี W3.CSS W3.CSS วัสดุสี W3.CSS Color Flat UI W3.CSS Color Metro UI W3.CSS สี Win8 W3.CSS Color iOS W3.CSS แฟชั่นสี ไลบรารีสี W3.CSS W3.CSS แบบแผนสี ธีมสี W3.CSS W3.CSS เครื่องกำเนิดสี

การสร้างเว็บ

แนะนำเว็บ เว็บ HTML เว็บ CSS JavaScript ของเว็บ เค้าโครงเว็บ เว็บแบนด์ เว็บจัดเลี้ยง เว็บร้านอาหาร สถาปนิกเว็บ

ตัวอย่าง

ตัวอย่าง W3.CSS W3.CSS สาธิต เทมเพลต W3.CSS

อ้างอิง

การอ้างอิง W3.CSS ดาวน์โหลด W3.CSS

W3.CSS Responsive Fluid Grid


ตารางตอบสนอง

W3.CSS รองรับตารางของเหลวที่ตอบสนอง 12 คอลัมน์

ปรับขนาดหน้าเห็นผล!

1
2
3
4
5
6
7
8
9
10
11
12

ส่วนนี้จะครอบครอง 12 คอลัมน์บนหน้าจอขนาดเล็ก 4 บนหน้าจอขนาดกลางและ 3 บนหน้าจอขนาดใหญ่

ส่วนนี้จะครอบครอง 12 คอลัมน์บนหน้าจอขนาดเล็ก 8 บนหน้าจอขนาดกลางและ 9 บนหน้าจอขนาดใหญ่

1
2
3
4
5
6
7
8
9
10
11
12

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col m4 l3">
    <p>12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
  </div>
  <div class="w3-col m8 l9">
    <p>12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p>
  </div>
</div>

แถวตอบสนอง

ระบบกริดของ W3.CSS ตอบสนองได้ คอลัมน์จะจัดเรียงใหม่โดยอัตโนมัติตามขนาดหน้าจอ: บนหน้าจอขนาดใหญ่ เนื้อหาอาจดูดีกว่าเมื่อจัดเป็นสามคอลัมน์ แต่ในหน้าจอขนาดเล็ก อาจดีกว่าถ้าเนื้อหาวางซ้อนกัน

ระดับ คำอธิบาย
w3-แถว คอนเทนเนอร์สำหรับคลาสที่ตอบสนอง ไม่มีการเติม
w3-row-padding คอนเทนเนอร์สำหรับคลาสที่ตอบสนอง โดยมีช่องว่างภายใน 8px ด้านซ้ายและขวา
w3-col กำหนดหนึ่งคอลัมน์ในตารางตอบสนอง 12 คอลัมน์

w3-col มีคลาสย่อยดังต่อไปนี้:

คอลัมน์สำหรับหน้าจอขนาดเล็ก (สมาร์ทโฟนทั่วไป):

ระดับ คำอธิบาย
s1 กำหนด 1 จาก 12 คอลัมน์ (กว้าง:08.33%) สำหรับหน้าจอขนาดเล็ก
s2 กำหนด 2 จาก 12 คอลัมน์ (ความกว้าง:16.66%) สำหรับหน้าจอขนาดเล็ก
s3 กำหนด 3 จาก 12 คอลัมน์ (ความกว้าง:25.00%) สำหรับหน้าจอขนาดเล็ก
s4 กำหนด 4 จาก 12 คอลัมน์ (ความกว้าง:33.33%) สำหรับหน้าจอขนาดเล็ก
s5-s11  
s12 กำหนด 12 จาก 12 คอลัมน์ (ความกว้าง:100%) ค่าเริ่มต้นสำหรับหน้าจอขนาดเล็ก

คอลัมน์สำหรับหน้าจอขนาดกลาง (แท็บเล็ตทั่วไป):

ระดับ คำอธิบาย
m1 กำหนด 1 จาก 12 คอลัมน์ (ความกว้าง:08.33%) สำหรับหน้าจอขนาดกลาง
m2 กำหนด 2 จาก 12 คอลัมน์ (ความกว้าง:16.66%) สำหรับหน้าจอขนาดกลาง
m3 กำหนด 3 จาก 12 คอลัมน์ (ความกว้าง:25.00%) สำหรับหน้าจอขนาดกลาง
m4 กำหนด 4 จาก 12 คอลัมน์ (ความกว้าง:33.33%) สำหรับหน้าจอขนาดกลาง
m5-m11   
m12 กำหนด 12 จาก 12 คอลัมน์ (ความกว้าง:100%) ค่าเริ่มต้นสำหรับหน้าจอขนาดกลาง

คอลัมน์สำหรับหน้าจอขนาดใหญ่ (แล็ปท็อปและเดสก์ท็อปทั่วไป):

ระดับ คำอธิบาย
l1 กำหนด 1 จาก 12 คอลัมน์ (ความกว้าง:08.33%) สำหรับหน้าจอขนาดใหญ่
l2 กำหนด 2 จาก 12 คอลัมน์ (ความกว้าง:16.66%) สำหรับหน้าจอขนาดใหญ่
l3 กำหนด 3 จาก 12 คอลัมน์ (ความกว้าง:25.00%) สำหรับหน้าจอขนาดใหญ่
l4 กำหนด 4 จาก 12 คอลัมน์ (ความกว้าง:33.33%) สำหรับหน้าจอขนาดใหญ่
l5-l11  
l12 กำหนด 12 จาก 12 คอลัมน์ (ความกว้าง:100%) ค่าเริ่มต้นสำหรับหน้าจอขนาดใหญ่)

คลาสข้างต้นสามารถรวมกันเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นมากขึ้น

แต่ละคลาสจะขยายขนาดขึ้น ดังนั้นหากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับหน้าจอขนาดเล็ก กลาง และใหญ่ คุณจะต้องระบุคลาสขนาดเล็ก เท่านั้น และถ้าคุณต้องการความกว้างเท่ากันบนหน้าจอขนาดกลางและขนาดใหญ่ คุณจะต้องระบุระดับกลางเท่านั้น

อย่างไรก็ตาม หากคุณใช้เฉพาะคลาสขนาดกลางและ/หรือขนาดใหญ่ ความกว้างจะเปลี่ยนเป็น 100% บนหน้าจอขนาดเล็กเสมอ

หมายเหตุ:จำนวนคอลัมน์ควรรวมกันได้ไม่เกิน 12 สำหรับแต่ละแถว (6+6, 3+3+6, 9+3 ฯลฯ)!



สองคอลัมน์เท่ากัน

สองคอลัมน์ที่มีความกว้างเท่ากัน (50%/50%) ในทุกขนาดหน้าจอ:

s6

s6

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
  <div class="w3-col s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>

สองคอลัมน์ไม่เท่ากัน

สองคอลัมน์ที่มีความกว้างไม่เท่ากัน (25%/75%) ในทุกขนาดหน้าจอ:

s3

s9

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
  <div class="w3-col s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>

สามคอลัมน์เท่ากัน

สามคอลัมน์ที่มีความกว้างเท่ากัน (33.3%/33.3%/33.3%) ในทุกขนาดหน้าจอ:

s4

s4

s4

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-red w3-center"><p>s4</p></div>
</div>

สามคอลัมน์ไม่เท่ากัน

คอลัมน์ความกว้างต่างๆ สามคอลัมน์ (25%/50%/25%) บนแท็บเล็ต แล็ปท็อป และเดสก์ท็อป บนโทรศัพท์มือถือ คอลัมน์จะซ้อนกันโดยอัตโนมัติ (ความกว้าง 100%):

m3

m6

m3

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
  <div class="w3-col m6 w3-dark-grey w3-center"><p>m6</p></div>
  <div class="w3-col m3 w3-red w3-center"><p>m3</p></div>
</div>

หมายเหตุ:ตัวอย่างนี้เหมือนกับการใช้ w3-quarter (m3) w3-half (m6) w3-quarter (m3) ซึ่งคุณได้เรียนรู้ในบทที่ตอบสนองของ W3.CSS


หกคอลัมน์

หกคอลัมน์ที่มีความกว้างเท่ากัน (แต่ละ 16%) บนแท็บเล็ต แล็ปท็อป และเดสก์ท็อป บนโทรศัพท์มือถือ คอลัมน์จะซ้อนกันโดยอัตโนมัติ (ความกว้าง 100%):

m2

m2

m2

m2

m2

m2

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col m2 w3-green w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-red w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-blue w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-dark-grey w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-black w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-purple w3-center"><p>m2</p></div>
</div>

ผสม: มือถือและแล็ปท็อป

คุณสามารถรวมคลาสเพื่อสร้างเลย์เอาต์แบบไดนามิกและยืดหยุ่นได้ ตัวอย่างนี้จะสร้างเค้าโครงสองคอลัมน์โดยแบ่งเป็น 83.34%/16.66% (l10, l2) บนหน้าจอขนาดใหญ่ และแบ่ง 50%/50% (s6, s6) บนหน้าจอขนาดเล็ก:

l10 s6

l2 s6

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col l10 s6 w3-pink w3-center"><p>l10 s6</p></div>
  <div class="w3-col l2 s6 w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>

ผสม: มือถือ แท็บเล็ต และแล็ปท็อป

ตัวอย่างนี้จะสร้างเค้าโครงสามคอลัมน์โดยแบ่ง 25%/58.34%/16.66% (l3, l7, l2) บนหน้าจอขนาดใหญ่, 50%/25%/25% (m6, m3, m3) แยกบนหน้าจอขนาดกลางและ 33.3%/33.3%/33.3% (s4, s4, s4)แยกบนหน้าจอขนาดเล็ก:

l3 m6 s4

l7 m3 s4

l2 m3 s4

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
  <div class="w3-col l7 m3 s4 w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
  <div class="w3-col l2 m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>

ความแตกต่างระหว่าง w3-row และ w3-row-padding

คลาส w3-row กำหนดคอนเทนเนอร์แบบไม่มี padded ในขณะที่คลาส w3-row-padding จะเพิ่มการเติมด้านซ้ายและขวา 8px ให้กับแต่ละคอลัมน์:

w3-แถว:

w3-row-padding:

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

<div class="w3-row-padding">
  <div class="w3-col s4"><img src="img_lights.jpg"></div>
  <div class="w3-col s4"><img src="img_nature.jpg"></div>
  <div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

ใช้ w3-rest

คลาสw3-restเป็นคลาสที่ทรงพลังและยืดหยุ่นซึ่งจะใช้สิ่งที่เหลืออยู่ของคอลัมน์กริด

150px

พักผ่อน


75px

พักผ่อน


100px

100px

พักผ่อน


หนึ่งในสี่

80px

พักผ่อน

หนึ่งในสี่


หนึ่งในสี่

หนึ่งในสี่

35%

พักผ่อน

ตัวอย่างการใช้ rest

<div class="w3-row">
  <div class="w3-col" style="width:150px"><p>150px</p></div>
  <div class="w3-rest"><p>rest</p></div>
</div>

องค์ประกอบที่ใช้ class="w3-rest" ต้องเป็นองค์ประกอบสุดท้ายในซอร์สโค้ดเสมอ


ใช้เปอร์เซ็นต์

ใช้คุณสมบัติความกว้าง CSS เพื่อกำหนดความกว้างเฉพาะของคอลัมน์

20%

60%

20%


45%

55%


15%

35%

10%

30%

10%

ตัวอย่าง

<div class="w3-row">
  <div class="w3-col w3-container w3-green" style="width:20%"><p>20%</p></div>
  <div class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
  <div class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>