W3.CSS บาร์
แถบแนวนอน
แถบแนวนอนเป็นองค์ประกอบการออกแบบเว็บทั่วไป:
คลาสw3-barใช้เพื่อจัดรูปแบบแถบแนวนอน:
ตัวอย่าง
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
วัตถุประสงค์ของ คลาส w3-bar-itemคือการจัดระยะห่าง การเติม และการวางตำแหน่งที่ถูกต้อง
บาร์แนวตั้ง
แถบแนวตั้ง (แถบด้านข้าง) เป็นเรื่องปกติในการออกแบบเว็บเช่นกัน:
คลาสw3-bar-blockใช้เพื่อจัดรูปแบบแถบแนวตั้ง:
ตัวอย่าง
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
บาร์สี
คุณสามารถใช้สีใดก็ได้เพื่อจัดรูปแบบแท่ง:
ตัวอย่าง
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
โฮเวอร์สี
คุณสามารถใช้สีโฮเวอร์ใดก็ได้เพื่อจัดรูปแบบแถบ:
วางเมาส์เหนือรายการแถบเพื่อดูเอฟเฟกต์:
ตัวอย่าง
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
บาร์ลิงค์
การให้การนำทางเป็นการใช้งานทั่วไปสำหรับแถบ:
ตัวอย่าง
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
ปุ่มบาร์
คลาสปุ่ม w3เหมาะอย่างยิ่งสำหรับการจัดสไตล์ลิงก์ในแถบ
วางเมาส์เหนือรายการแถบเพื่อดูเอฟเฟกต์:
ตัวอย่าง
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
แถบตอบสนอง
คลาสw3-mobileนั้นสมบูรณ์แบบสำหรับการทำให้รายการบาร์ตอบสนอง
ปรับขนาดหน้าต่างเพื่อดูเอฟเฟกต์:
ตัวอย่าง
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
รายการแถบชิดขวา
คลาสw3-rightนั้นสมบูรณ์แบบสำหรับการทำรายการแท่งให้ชิดขวา:
ตัวอย่าง
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>