Когда мы разрабатываем страницу, необходим Chunking. Ни один веб -сайт не работает в одном столбце. Если вы не читаете роман, дизайн вашей страницы должен быть отброшен. То есть она называется системой сетки в начальной загрузке из -за нескольких компонентов панели. После того, как макросхема каждого строки и столбца выполняется в каждом большом блоке, небольшие кусочки создаются, а небольшие кусочки могут быть реализованы с использованием панели. Давайте посмотрим на пример ниже.
<div> <div> Заголовок панели без заголовка </div> <div> Содержание панели </div> </div>
Это самый простой формат, эффект после его запуска
На самом деле, когда мы разрабатываем нашу собственную систему, если панель работает должным образом, мы также можем быстро создать страницу следующим образом
На самом деле он находится в одной сетке (1x2) и двух компонентах панели, код восстановления заключается в следующем
<div> <div> <div> Quick Navigation </div> <div> <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 = ''> Управление системой </a> <ul style = 'margin: 0px; падки: 0'> <li style = 'padding-left: 5px;' class = 'level2'> <a href = ''> Роль </a> <ul style = 'margin: 0px; накладка: 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; падки: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = ''> Управление отделом </a> <ul style = 'margin: 0px; падки: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/department/index'> отдел управления </a> </li> </ul> </li> <li style = 'padding-left: 5px;' class = 'level2'> <a href = ''> Управление меню </a> <ul style = 'margin: 0px; падки: 0'> <li style = 'padding-left: 5px;' class = 'level3'> <a href = '/menu/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 = '/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> </ul> </div> </div> <div> <div>
Список пользователей
</div><div><p>User: <input type="text" name="UserName" id="UserName" />Department: <input type="text" name="DeptName" id="DeptName" /></p><p>Time: <input type="text" name="StartTime" id="StartTime" />To <input type="text" name="EndTime" id="EndTime" /> </p> <p> <input type = "button" id = "search" value = "Query"/> <a href = "/webuser/create"> Создать пользователя </a> </p> <div id = "list"> <table> <tr> <th> </th> <Th> </th> <h. Имя </th> <Th> Электронная почта </th> <Th> Департамент </th> <Th> Обновление </th> <Th> обновление </th> <Th> обновление </th> <Th> обновление </a> </span> <tbody> <td> <div> <pran> <a href = "/webuser/1"> view </a> </span> <pan> <a href = "/webuser/create"> new </a> </span> <pran> <a href = "/webuser/edit/1"> edit </a> </span> <pan> <a href = "/webuser/delete/1"> delete </a> </span> <pan> <a href = "/webuser/uppure/1"> аудит </a> </span> </div> <td> 1 </td> <td> zzl </td> <td> <pan> zzl </td> <td> <pan> zzl </span> </td> <td> <pan> info </span> </td> <td> Компания </td> <td> 2015/6/22 21:51 </td> <td> Нормальный </td> <td> 1 </td> </tr> </tbody> <tfoot> <tr> <td colspan = "9"> <стиль типа = 'text/css'>. Page_stand {paddding: 5px; 0px; text-align: center; font-family: 0px; font-family: arial; font-size: 12px;}. Page_standard A.cur {фон: нет повторной прокрутки 0 0 #036cb4; граница: 1px Solid #036cb4; Color: #fffff; font-beight: bold; margin: 2px; 5px;}. Page_standard a {Border: #EEE 1PX SOLID; PADDING: 2PX 5PX; MARGIN: 2PX; COLOR: #036CB4; Текстовое декорация: нет;}. Page_standard A: Hover {Border: #999 1px Solid; Color: #666;}. Page_standard a: active as: #999. #666;}. Page_standard Span {Border: #036CB4 1PX SOLID; PADDING: 2PX 5PX; FONT-WEELT: жирный; #ddd;} </style> <div style = 'clear: оба'> </div> <div> <b> 1/1 в общей сложности </b> </div> </td> </tfoot> </table> </div>Давайте посмотрим на стол. Bootstrap в основном добавляет к нему стиль CSS, и нет ничего особенного.
<Таблица> ... </Таблица>
Есть также граничащие таблицы ниже
<Таблица> ... </Таблица>
В то же время он также объединяет эффект подвески JS
<Таблица> ... </Таблица>
Ｏｋ Я представлю панель и таблицу в макете здесь. Наконец, позвольте всем взглянуть на демонстрацию моего начальной загрузки. Это очень просто и удобно!
Выше приведено соответствующие знания о панели и таблице в начальной загрузке, представленных вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!