ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap CSS อ้างอิงตาราง


<table> เรียน

ใช้การเรียนด้านล่างเพื่อรูปแบบตารางใด ๆ :

ชั้น ลักษณะ ตัวอย่าง
.table เพิ่มจัดแต่งทรงผมระดับล่าง (padding แสงและวงเวียนแนวนอนเท่านั้น) ใด ๆ <table> ลองมัน
.table-striped เพิ่มม้าลายแถบซึ่งแถวของตารางใด ๆ ภายใน <tbody> (ไม่สามารถใช้ได้ใน IE8) ลองมัน
.table-bordered เพิ่มชายแดนทุกด้านของตารางและเซลล์ ลองมัน
.table-hover ช่วยให้รัฐวางเมาส์เหนือแถวตารางภายใน <tbody> ลองมัน
.table-condensed ทำให้ตารางขนาดกะทัดรัดมากขึ้นโดยการตัดช่องว่างภายในเซลล์ในช่วงครึ่งปี ลองมัน
รวมทุกชั้นเรียนตาราง ลองมัน

<tr>, <th> และ <td> เรียน

ใช้การเรียนด้านล่างเพื่อแถวตารางสีหรือเซลล์:

ชั้น ลักษณะ ตัวอย่าง
.active การใช้สีที่โฉบไปแถวโดยเฉพาะอย่างยิ่งหรือเซลล์ ลองมัน
.success บ่งชี้ว่ามีการดำเนินการที่ประสบความสำเร็จหรือบวก ลองมัน
.info บ่งชี้ว่ามีการเปลี่ยนแปลงข้อมูลที่เป็นกลางหรือการกระทำ ลองมัน
.warning แสดงให้เห็นคำเตือนว่าอาจจำเป็นต้องให้ความสนใจ ลองมัน
.danger บ่งชี้ว่ามีการกระทำที่เป็นอันตรายหรือเชิงลบ ลองมัน

ตารางที่ตอบสนองต่อ

ชั้น .table ตอบสนองสร้างตารางการตอบสนอง ตารางแล้วจะเลื่อนตามแนวนอนบนอุปกรณ์ขนาดเล็ก (ภายใต้ 768px) เมื่อดูในสิ่งที่มีขนาดใหญ่กว่า 768px กว้างไม่มีความแตกต่าง:

ตัวอย่าง

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
ลองตัวเอง»