عندما نقوم بتصميم صفحة ، يكون التثبيت ضروريًا. لا يوجد موقع ويب في عمود واحد. ما لم تكن تقرأ رواية ، يجب أن يكون تصميم صفحتك مكثفًا. أي أنه يسمى نظام الشبكة في bootstrap بسبب مكونات اللوحة المتعددة. بعد تنفيذ تخطيط الماكرو لكل صف وعمود ، يتم إنشاء قطع صغيرة في كل كتلة كبيرة ، ويمكن تنفيذ قطع صغيرة باستخدام اللوحة. دعنا نلقي نظرة على مثال أدناه.
<viv> <viv> عنوان لوحة بدون عنوان </div> <viv> محتوى اللوحة </div> </viv>
هذا هو أبسط تنسيق ، التأثير بعد تشغيله
في الواقع ، عندما نقوم بتصميم نظامنا الخاص ، إذا تم تشغيل اللوحة بشكل صحيح ، فيمكننا أيضًا إنشاء صفحة بسرعة ، على النحو التالي
إنه في الواقع في شبكة واحدة (1 × 2) ومكونين لوحة ، رمز التخفيض كما يلي
<viv> <viv> <viv> التنقل السريع </div> <viv> <ul> <li style = 'padding-left: 5px ؛' class = 'level0'> <a href = ''> root </a> <ul style = 'margin: 0px ؛ padding: 0'> <li style = 'padding-left: 5px ؛' class = 'level1'> <a href = '' ' class = 'level2'> <a href = ''> rob </a> <ul style = 'margin: 0px ؛ padding: 0'> <li style = 'padding-left: 5px ؛' class = 'level3'> <a href = '/rol/create'> دور جديد </a> </li> <li style = 'padding-left: 5px ؛' class = 'level3'> <a href = '/rol/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 = '' ' class = 'level3'> <a href = '/department/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 = '/menu/index' class = 'level2'> <a href = '' ' 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 = '' ' class = 'level3'> <a href = '' ' 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> </ul> </viv> </viv> <viv> <viv> <viv>
قائمة المستخدم
</viv> <viv> <p> المستخدم: <type type = "text" name = "username" id = "username" /> القسم: <type type = "text" name = "deptname" id = "deptname" /> </p> time: <input type = "text" name = "idtime" = "startime type =" /> </p> <p> <pl input type = "button" id = "search" value = "query"/> <a href = "/webuser/create"> إنشاء مستخدم </a> </p> <div id = "list"> <table> <tr> <tr> الاسم </th> <th> البريد الإلكتروني </th> <th> القسم </th> <th> تحديث </th> <th> تحديث </th> <th> تحديث </th> <th> تحديث </a> </span> <tbody> <td> <viv> <span> <span> <a href = "/webuser/detaily/1" href = "/webuser/create"> جديد </a> </span> <span> <a href = "/webuser/edit/1"> edit </a> </span> <span> <a href = "/webuser/delete/1"> delete </a> </span> <a href = "/webuser/contrve/1"> Audit </a> </span> </viv> <td> 1 </td> <td> zzl </td> <td> <span> zzl </td> <td> <span> zzl </td> <td> <td> <span> </span> </td> <td> الشركة </td> <td> 2015/6/22 21:51 </td> <td> عادي </td> <td> 1 </td> </tbor> </tbody> <tfoot> <tr> <td colspan = "9" 0px ؛ text-align: center ؛ font-family: 0px ؛ font-family: arial ؛ font-size: 12px ؛}. page_standard a.cur {background: none Repert scroll 0 0 #036cb4 ؛ border: 1px solid #036cb4 ؛ color: #ffff ؛ 5px ؛}. page_standard a {border: #EEE 1PX Solid ؛ padding: 2px 5px ؛ margin: 2px ؛ color: #036cb4 ؛ text-decoration: none ؛}. page_standard a: hover {border: #999 1px sold ؛ color: #666 ؛}. #666 ؛}. page_standard span {border: #036cb4 1px solid ؛ padding: 2px 5px ؛ font-weight: bold ؛ margin: 2px ؛ color: #fff ؛ background: #036cb4 ؛}. #DDD ؛} </style> <div style = 'clear: كلا'> </div> <v> <b> 1/1 في المجموع </b> </viv> </td> </tfoot> </table> </div>دعونا نلقي نظرة على جدول الجدول. Bootstrap يضيف بشكل أساسي نمط CSS إليه ، ولا يوجد شيء مميز.
<border> ... </table>
هناك أيضًا طاولات محدودة أدناه
<border> ... </table>
في الوقت نفسه ، فإنه يدمج أيضًا تأثير تعليق JS
<border> ... </table>
ｏｋ ، سأقدم اللوحة والجدول في التصميم هنا. أخيرًا ، دع الجميع يلقيون نظرة على عرض تجريبي. إنه شعور بسيط ومريح حقًا!
ما سبق هو المعرفة ذات الصلة حول اللوحة والجدول في bootstrap المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!