แบบฟอร์มการบูต
เงินทุนยังมีเค้าโครงตารางสร้างชัดเจน ตารางต่อไปนี้แสดงองค์ประกอบบางอย่างตารางการสนับสนุนเงินทุน:
| ฉลาก | ลักษณะ |
|---|---|
| <table> | การเพิ่มรูปแบบพื้นฐานของรูปแบบ |
| <thead> | ภาชนะแถวของตารางส่วนหัวขององค์ประกอบ (<tr>) ใช้เพื่อระบุคอลัมน์ตาราง |
| <tbody> | องค์ประกอบภาชนะตารางในร่างกายของแถวตาราง (<tr>) |
| <tr> | กลุ่มปรากฏบนบรรทัดเดียวในองค์ประกอบที่เก็บของเซลล์ตาราง (<td> หรือ <TH>) |
| <td> | เซลล์ตารางเริ่มต้น |
| <Th> | ตารางเซลล์พิเศษที่ใช้ในการระบุคอลัมน์หรือแถว (ขึ้นอยู่กับขอบเขตและสถานที่) คุณต้องใช้ <thead> ภายใน |
| <คำบรรยายภาพ> | คำอธิบายเกี่ยวกับตารางจัดเก็บเนื้อหาหรือสรุป |
ชั้นในแบบฟอร์ม
ตารางสไตล์ตารางต่อไปนี้สามารถนำมาใช้:
| หมวดหมู่ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .table | พล <table> เพิ่มรูปแบบฐาน (เฉพาะคั่นแนวนอน) | ความพยายาม |
| .table ลาย | ในส่วน <tbody> ภายในรูปแบบเพื่อเพิ่มลายม้าลาย (IE8 ไม่สนับสนุน) | ความพยายาม |
| .table เป้ | เพิ่มเส้นขอบสำหรับเซลล์ตารางทั้งหมด | ความพยายาม |
| .table-hover | ในส่วน <tbody> ภายในแถวช่วยให้รัฐโฉบ | ความพยายาม |
| .table-ข้น | ทำให้รูปแบบกะทัดรัดมากขึ้น | ความพยายาม |
| การใช้งานร่วมกันของทุกชั้นเรียนรูปแบบ | ความพยายาม | |
<tr> <TH> และ <td> ระดับ
เรียนตารางต่อไปนี้สามารถนำมาใช้ในรูปแบบแถวหรือมือถือ:
| หมวดหมู่ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .active | การประยุกต์ใช้สีโฉบบนเส้นหรือเซลล์ | ความพยายาม |
| .success | มันแสดงให้เห็นการดำเนินงานที่ประสบความสำเร็จ | ความพยายาม |
| .info | ข้อมูลที่แตกต่างกันที่เป็นตัวแทนของการดำเนินงาน | ความพยายาม |
| .warning | เพราะมันหมายถึงการดำเนินการแจ้งเตือน | ความพยายาม |
| .danger | เพราะมันหมายถึงการดำเนินการที่เป็นอันตราย | ความพยายาม |
รูปแบบพื้นฐาน
หากคุณต้องการเท่านั้นที่มีช่องว่าง (ช่องว่าง)และพื้นฐานการแยกระดับตารางเพิ่มระดับ.table ดังแสดงในตัวอย่างต่อไปนี้:
ตัวอย่าง
ลอง»
ผลมีดังนี้
ชั้นในแบบฟอร์มตัวเลือก
นอกจากนี้ยังมีมาร์กอัปตารางขั้นพื้นฐานและระดับ .table และบางส่วนสามารถใช้เป็นเครื่องหมายในการกำหนดรูปแบบการเรียน ต่อไปนี้จะแนะนำคุณกับชั้นเรียนเหล่านี้
ตารางลาย
โดยการเพิ่มระดับ .table ลายคุณจะเห็นลายเส้นบนเส้น<tbody> ภายในเป็นตัวอย่างต่อไปนี้แสดง:
ตัวอย่าง
ลอง»
ผลมีดังนี้
เส้นขอบตาราง
โดยการเพิ่มระดับ .table เป้,คุณจะเห็นว่าแต่ละองค์ประกอบมีเส้นขอบรอบ ๆ และทั้งหมดจะถูกปัดเศษรูปแบบที่แสดงในตัวอย่างต่อไปนี้:
ตัวอย่าง
ลอง»
ผลมีดังนี้
ตารางเลื่อน
โดยการเพิ่มระดับ .table-hover เมื่อชี้ที่มีมากกว่าแถวเมื่อจะมีพื้นหลังเป็นสีเทาอ่อนดังแสดงในตัวอย่างต่อไปนี้:
ตัวอย่าง
ลอง»
ผลมีดังนี้
รูปแบบกะทัดรัด
โดยการเพิ่มระดับ .table-ย่อขยายแบบอินไลน์(ขยาย) จะถูกตัดออกในช่วงครึ่งปีดังนั้นตารางที่มีลักษณะกะทัดรัดมากขึ้นดังแสดงในตัวอย่างต่อไปนี้ ข้อมูลนี้จะเป็นประโยชน์เมื่อคุณต้องการที่จะดูกระชับมากขึ้น
ตัวอย่าง
ลอง»
ผลมีดังนี้
ระดับบริบท
ระดับบริบทที่ระบุไว้ในตารางต่อไปนี้ช่วยให้คุณสามารถเปลี่ยนสีพื้นหลังของแถวตารางหรือแต่ละเซลล์
| 类 | 描述 |
|---|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
ชั้นเรียนเหล่านี้สามารถนำไปใช้กับ <tr> <td> หรือ <TH>
ตัวอย่าง
ลอง»
ผลมีดังนี้
ตารางที่ตอบสนองต่อ
โดย.tableใด ๆห่อในระดับ .table ตอบสนองคุณสามารถมีตารางเพื่อเลื่อนในแนวนอนเพื่อรองรับอุปกรณ์ขนาดเล็ก(น้อยกว่า 768px) เมื่อดูบนอุปกรณ์ขนาดใหญ่มีขนาดใหญ่กว่า 768px กว้างคุณจะไม่เห็นความแตกต่างใด ๆ
ตัวอย่าง
ลอง»
ผลมีดังนี้
