1. Home
  2. แบบฟอร์มการบูต

บทช่วยสอน แบบฟอร์มการบูต ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ รูปแบบพื้นฐาน,ตัวอย่าง,ชั้นในแบบฟอร์มตัวเลือก,ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,ระดับบริบท,ตัวอย่าง,ตารางที่ตอบสนองต่อ,ตัวอย่าง,

แบบฟอร์มการบูต

เงินทุนยังมีเค้าโครงตารางสร้างชัดเจน ตารางต่อไปนี้แสดงองค์ประกอบบางอย่างตารางการสนับสนุนเงินทุน:

ฉลาก ลักษณะ
<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 class = "ตาราง"> <คำบรรยายภาพ> รูปแบบตารางพื้นฐาน </ คำบรรยายใต้ภาพ> <thead> <tr> <Th> ชื่อ </ TH> <Th> เมือง </ TH> </ tr> </ thead> <tbody> <tr> <td> Tanmay </ td> <td> บังกาลอร์ </ td> </ tr> <tr> <td> ชิน </ td> <td> มุมไบ </ td> </ tr> </ tbody> </ table>

ลอง»

ผลมีดังนี้

รูปแบบพื้นฐาน

ชั้นในแบบฟอร์มตัวเลือก

นอกจากนี้ยังมีมาร์กอัปตารางขั้นพื้นฐานและระดับ .table และบางส่วนสามารถใช้เป็นเครื่องหมายในการกำหนดรูปแบบการเรียน ต่อไปนี้จะแนะนำคุณกับชั้นเรียนเหล่านี้

ตารางลาย

โดยการเพิ่มระดับ .table ลายคุณจะเห็นลายเส้นบนเส้น<tbody> ภายในเป็นตัวอย่างต่อไปนี้แสดง:

ตัวอย่าง

<table class = "โต๊ะลาย" > <คำบรรยายภาพ> รูปแบบตารางลาย </ คำบรรยายใต้ภาพ> <thead> <tr> <Th> ชื่อ </ TH> <Th> เมือง </ TH> <Th> รหัสผ่าน </ TH> </ tr> </ thead> <tbody> <tr> <td> Tanmay </ td> <td> บังกาลอร์ </ td> <td> 560001 </ td> </ tr> <tr> <td> ชิน </ td> <td> มุมไบ </ td> <td> 400,003 </ td> </ tr> <tr> <td> Uma </ td> <td> Pune </ td> <td> 411,027 </ td> </ tr> </ tbody> </ table>

ลอง»

ผลมีดังนี้

ตารางลาย

เส้นขอบตาราง

โดยการเพิ่มระดับ .table เป้,คุณจะเห็นว่าแต่ละองค์ประกอบมีเส้นขอบรอบ ๆ และทั้งหมดจะถูกปัดเศษรูปแบบที่แสดงในตัวอย่างต่อไปนี้:

ตัวอย่าง

<table class = "โต๊ะเป้" > <คำบรรยายภาพ> กรอบรูปแบบตาราง </ คำบรรยายใต้ภาพ> <thead> <tr> <Th> ชื่อ </ TH> <Th> เมือง </ TH> TH> รหัสผ่าน </ TH> </ tr> </ thead> tbody> <TR > <td> Tanmay </ td> <td> บังกาลอร์ </ td> <td> 560001 </ td> </ tr> <tr> <td> ชิน </ td> <td> มุมไบ </ td> <td> 400,003 </ td> </ tr> <tr> <td> Uma </ td> <td> Pune </ td> <td> 411,027 </ td> </ tr> </ tbody> </ table>

ลอง»

ผลมีดังนี้

เส้นขอบตาราง

ตารางเลื่อน

โดยการเพิ่มระดับ .table-hover เมื่อชี้ที่มีมากกว่าแถวเมื่อจะมีพื้นหลังเป็นสีเทาอ่อนดังแสดงในตัวอย่างต่อไปนี้:

ตัวอย่าง

<table class = "โต๊ะ-hover" > <คำบรรยายภาพ> รูปแบบตารางโฉบ </ คำบรรยายใต้ภาพ> <thead> <tr> <Th> ชื่อ </ TH> <Th> เมือง </ TH> <Th> รหัสผ่าน </ TH> </ tr> </ thead> <tbody> <tr> <td> Tanmay </ td> <td> บังกาลอร์ </ td> <td> 560001 </ td> </ tr> <tr> <td> ชิน </ td> <td> มุมไบ </ td> <td> 400,003 </ td> </ tr> <tr> <td> Uma </ td> <td> Pune </ td> <td> 411,027 </ td> </ tr> </ tbody> </ table>

ลอง»

ผลมีดังนี้

ตารางเลื่อน

รูปแบบกะทัดรัด

โดยการเพิ่มระดับ .table-ย่อขยายแบบอินไลน์(ขยาย) จะถูกตัดออกในช่วงครึ่งปีดังนั้นตารางที่มีลักษณะกะทัดรัดมากขึ้นดังแสดงในตัวอย่างต่อไปนี้ ข้อมูลนี้จะเป็นประโยชน์เมื่อคุณต้องการที่จะดูกระชับมากขึ้น

ตัวอย่าง

<table class = "โต๊ะ-ข้น" > <คำบรรยายภาพ> รูปแบบรูปแบบคล่องตัว </ คำบรรยายใต้ภาพ> <thead> <tr> <Th> ชื่อ </ TH> <Th> เมือง </ TH> <Th> รหัสผ่าน </ TH> </ tr> </ thead> <tbody> <tr> <td> Tanmay </ td> <td> บังกาลอร์ </ td> <td> 560001 </ td> </ tr> <tr> <td> ชิน </ td> <td> มุมไบ </ td> <td> 400,003 </ td> </ tr> <tr> <td> Uma </ td> <td> Pune </ td> <td> 411,027 </ td> </ tr> </ tbody> </ table>

ลอง»

ผลมีดังนี้

รูปแบบกะทัดรัด

ระดับบริบท

ระดับบริบทที่ระบุไว้ในตารางต่อไปนี้ช่วยให้คุณสามารถเปลี่ยนสีพื้นหลังของแถวตารางหรือแต่ละเซลล์

类描述
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作

ชั้นเรียนเหล่านี้สามารถนำไปใช้กับ <tr> <td> หรือ <TH>

ตัวอย่าง

<table class = "ตาราง"> <คำบรรยายภาพ> รูปแบบตารางบริบท </ คำบรรยายใต้ภาพ> <thead> <tr> <Th> ผลิตภัณฑ์ </ TH> <Th> วันที่ชำระเงิน </ TH> <Th> สถานะ </ TH> </ tr> </ thead> <tbody> <Tr class = "ใช้งาน"> <td> ผลิตภัณฑ์ 1 </ td> <td> 23/11/2013 </ td> <td> จะส่ง </ td> </ tr> <Tr class = "ความสำเร็จ"> <td> ผลิตภัณฑ์ 2 </ td> <td> 2013/10/11 </ td> <td> ส่ง </ td> </ tr> <Tr class = "คำเตือน"> <td> ผลิตภัณฑ์ 3 </ td> <td> 20/10/2013 </ td> <td> ได้รับการยืนยัน </ td> </ tr> <Tr class = "อันตราย"> <td> ผลิตภัณฑ์ 4 </ td> <td> 20/10/2013 </ td> <td> ได้กลับ </ td> </ tr> </ tbody> </ table>

ลอง»

ผลมีดังนี้

ระดับบริบท

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

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

ตัวอย่าง

<div class = "ตารางการตอบสนอง"> <table class = "ตาราง"> <คำบรรยายภาพ> ตอบสนองรูปแบบตาราง </ คำบรรยายใต้ภาพ> <thead> <tr> <Th> ผลิตภัณฑ์ </ TH> <Th> วันที่ชำระเงิน </ TH> <Th> สถานะ </ TH> </ tr> </ thead> <tbody> <tr> <td> ผลิตภัณฑ์ 1 </ td> <td> 23/11/2013 </ td> <td> จะส่ง </ td> </ tr> <tr> <td> ผลิตภัณฑ์ 2 </ td> <td> 2013/10/11 </ td> <td> ส่ง </ td> </ tr> <tr> <td> ผลิตภัณฑ์ 3 </ td> <td> 20/10/2013 </ td> <td> ได้รับการยืนยัน </ td> </ tr> <tr> <td> ผลิตภัณฑ์ 4 </ td> <td> 20/10/2013 </ td> <td> ได้กลับ </ td> </ tr> </ tbody> </ table> </ div>

ลอง»

ผลมีดังนี้

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

บทแนะนำยอดนิยม

Contact US

แบบฟอร์มการบูต
10/30