เมื่อเราออกแบบหน้าเว็บจำเป็นต้องใช้การหยัด ไม่มีเว็บไซต์ใดที่อยู่ในคอลัมน์เดียว หากคุณไม่ได้อ่านนวนิยายการออกแบบหน้าเว็บของคุณจะต้องได้รับการแก้ไข นั่นคือมันถูกเรียกว่าระบบกริดใน bootstrap เนื่องจากส่วนประกอบหลายแผง หลังจากการจัดวางแมโครของแต่ละแถวและคอลัมน์ถูกดำเนินการชิ้นเล็ก ๆ จะถูกสร้างขึ้นในแต่ละบล็อกขนาดใหญ่แต่ละชิ้นและสามารถใช้งานชิ้นเล็ก ๆ ได้โดยใช้แผง มาดูตัวอย่างด้านล่าง
<div> <div> หัวเรื่องแผงโดยไม่มีชื่อ </div> <div> เนื้อหาแผง </div> </div>
นี่คือรูปแบบที่ง่ายที่สุดเอฟเฟกต์หลังจากทำงาน
ในความเป็นจริงเมื่อเราออกแบบระบบของเราเองหากแผงทำงานอย่างถูกต้องเรายังสามารถสร้างหน้าได้อย่างรวดเร็วดังนี้
จริงๆแล้วมันอยู่ในตารางเดียว (1x2) และสองส่วนประกอบแผงรหัสการลดเป็นดังนี้
<div> <div> <div> การนำทางด่วน </div> <div> <ul> <li style = 'padding-left: 5px;' class = 'level0'> <a href = ''> รูท </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level1'> <a href = ''> การจัดการระบบ </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level2'> <a href = ''> บทบาท </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/role/create'> บทบาทใหม่ </a> </li> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/role/index'> จัดการบทบาท </a> </li></ul> </li> <li style = 'padding-left: 5px;' class = 'level2'> <a href = ''> การจัดการแผนก </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = ''> การจัดการแผนก </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/แผนก/ดัชนี'> แผนกการจัดการ </a> </li></ul> </li> <li style = 'padding-left: 5px;' class = 'level2'> <a href = ''> การจัดการเมนู </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/เมนู/ดัชนี'> การจัดการเมนูการจัดการ </a> </li> </ul> </li> <li style = 'padding-left: 5px;' class = 'level2'> <a href = ''> การจัดการพนักงาน </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/webuser/create'> พนักงานใหม่ </a> </li> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/webuser/index'> จัดการพนักงาน </a> </li> </ul> </li> <li style = 'padding-left: 5px;' class = 'level2'> <a href = ''> การจัดการการนำทาง </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = ''> การจัดการการนำทาง </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/banner/create'> การนำทางใหม่ </a> </li> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/banner/index'> จัดการการนำทาง </a> </li></ul> </li></ul> </li></ul>
รายชื่อผู้ใช้
</div> <div> <p> ผู้ใช้: <อินพุต type = "text" name = "username" id = "ชื่อผู้ใช้" /> แผนก: <อินพุตประเภท = "text" name = "deptName" id = "deptName" /> < /p> <p> type = "type =" type = "text =" end type = /> </p> <p> <input type = "ปุ่ม" id = "search" value = "query"/> <a href = "/webuser/create"> สร้างผู้ใช้ </a> </p> <div id = "รายการ"> <trol> <tr> ชื่อ </th> <th> อีเมล </th> <th> แผนก </th> <th> อัปเดต </th> <th> อัปเดต </th> <th> อัปเดต </th> <th> อัปเดต </a> </span> <tbody> <td> <div> <pan> href = "/webuser/create"> ใหม่ </a> </span> <pan> <a href = "/webuser/แก้ไข/1"> แก้ไข </a> </span> <span> <a href = "/webuser/delete/1"> ลบ </a> href = "/webuser/Approve/1"> การตรวจสอบ </a> </span> </div> <td> 1 </td> <td> zzl </td> <td> <pan> ZZL </td> <td> </td> <td> บริษัท </td> <td> 2015/6/22 21:51 </td> <td> ปกติ </td> <td> 1 </td> </tr> </tbody> <tfoot> 0px; Text-Align: Center; Font-Family: 0px; Font-Family: Arial; Font-Size: 12px;}. PAGE_STANDARD A.CUR {พื้นหลัง: ไม่มีการเลื่อนซ้ำ 0 0 #036CB4; border: 1px solid #036CB4; สี: #FFFF; 5PX;}. PAGE_STANDARD A {Border: #EEE 1PX SOLID; PADDING: 2PX 5PX; ระยะขอบ: 2PX; สี: #036CB4; การกำหนดข้อความ: ไม่มี;}. PAGE_STANDARD A: Hover {เส้นขอบ: #999 1PX ของแข็ง; สี: #6666;}. #666;}. PAGE_STANDARD Span {Border: #036CB4 1PX SOLID; PADDING: 2PX 5PX; FONT-WEIGHT: BOLD; MARGIN: 2PX; สี: #FFF; พื้นหลัง: #036CB4;}. PAGE_STANDARD. #ddd;} </style> <div style = 'Clear: ทั้งสอง'> </div> <div> <b> 1/1 รวม </b> </div> </td> </tfoot> </table> </div>ลองดูที่โต๊ะ Bootstrap โดยทั่วไปจะเพิ่มสไตล์ CSS ให้กับมันและไม่มีอะไรพิเศษ
<table> ... </bable>
นอกจากนี้ยังมีตารางล้อมรอบด้านล่าง
<table> ... </bable>
ในขณะเดียวกันก็รวมเอฟเฟกต์การระงับของ JS
<table> ... </bable>
ｏｋ ฉันจะแนะนำพาเนลและตารางในเค้าโครงที่นี่ ในที่สุดให้ทุกคนดูการสาธิตของ bootstrap ของฉัน รู้สึกง่ายและสะดวกสบายจริงๆ!
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับพาเนลและตารางใน bootstrap แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!