ตารางพื้นฐาน:
<table> <tr> <td> ชื่อผู้ใช้ </td> <td> รหัสผ่าน </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
การเพิ่มคลาส .table ลงในแท็ก <table> สามารถให้สไตล์พื้นฐาน, ช่องว่างภายในและตัวแบ่งแนวนอนเล็กน้อย
เอฟเฟกต์การแสดงผลมีดังนี้:
รูปแบบลาย:
การเพิ่ม: class = "ตารางตาราง" ไปยังแท็กตารางสามารถเพิ่มลายม้าลายลงในแต่ละแถวภายใน tbody
<table> <tr> <td> ชื่อผู้ใช้ </td> <td> รหัสผ่าน </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
เอฟเฟกต์การแสดงผลมีดังนี้:
ตารางที่มีพรมแดน:
เพิ่ม class = "ตารางตารางตาราง" ลงในแท็กตารางเพื่อเพิ่มเส้นขอบให้กับแต่ละเซลล์ของตาราง
<table> <tr> <td> ชื่อผู้ใช้ </td> <td> รหัสผ่าน </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
เอฟเฟกต์การแสดงผลมีดังนี้:
แบบฟอร์มการกระชับ:
การเพิ่มคลาส .table-condensed สามารถทำให้ตารางมีขนาดกะทัดรัดมากขึ้นและช่องว่างภายในเซลล์จะลดลงครึ่งหนึ่ง
<table> <tr> <td> ชื่อผู้ใช้ </td> <td> รหัสผ่าน </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table>
เอฟเฟกต์การแสดงผลมีดังนี้:
ตารางตอบสนอง:
ห่อองค์ประกอบ .table ใด ๆ ภายในองค์ประกอบ .table-responsive และสร้างตารางตอบสนองที่เลื่อนในแนวนอนบนอุปกรณ์หน้าจอขนาดเล็ก (น้อยกว่า 768px) เมื่อหน้าจอมีขนาดใหญ่กว่าความกว้าง 768px แถบเลื่อนแนวนอนจะหายไป
<div> <table> <tr> <td> ชื่อผู้ใช้ </td> <td> รหัสผ่าน </td> </tr> <tr> <td> ahhh </td> <td> 1111 </td> </tr> </table> </div>
ข้างต้นเป็นคำอธิบายเต็มรูปแบบของการแนะนำรูปแบบการบูตสแตรปที่หกแนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!