Quando projetamos uma página, é necessário chunking. Nenhum site está em uma coluna. A menos que você esteja lendo um romance, o design da sua página deve ser fundido. Ou seja, é chamado de sistema de grade no bootstrap devido a vários componentes do painel. Depois que o layout macro de cada linha e coluna é realizado, pequenos pedaços são criados em cada bloco grande e peças pequenas podem ser implementadas usando o painel. Vamos dar uma olhada em um exemplo abaixo.
<div> <div> cabeçalho do painel sem título </div> <div> conteúdo do painel </div> </div>
Este é o formato mais simples, o efeito após o funcionamento
De fato, quando projetamos nosso próprio sistema, se o painel executar corretamente, também podemos criar rapidamente uma página, como segue
Na verdade, está em uma grade (1x2) e em dois componentes do painel, o código de redução é o seguinte
<div> <div> <div> Navegação rápida </div> <div> class = 'nível0'> <a href = ''> root </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'nível1'> <a href = ''> Gerenciamento do sistema </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'nível2'> <a href = ''> função </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'Level3'> <a href = '/função/create'> nova função </a> </li> <estilo de estilo = 'preenchimento-left: 5px;' class = 'Level3'> <a href = '/função/index'> Gerencie função </a> </li> </ul> </li> <estilo 'style =' Padding-left: 5px; ' class = 'nível2'> <a href = ''> gestão do departamento </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'nível3'> <a href = ''> gestão do departamento </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'Level3'> <a href = '/departamento/index'> departamento de gerenciamento </a> </li> </ul> </li> <estilo 'style =' preenchimento-left: 5px; ' class = 'Level2'> <a href = ''> gerenciamento de menu </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'Level3'> <a href = '/menu/index'> Gerenciamento de menu Gerenciamento </a> </li> </ul> </li> <li style = 'Padding-left: 5px;' class = 'nível2'> <a href = ''> Gerenciamento de funcionários </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'nível3'> <a href = '/webuser/create'> novo funcionário </a> </li> <style = 'preenchimento-left: 5px;' class = 'Level3'> <a href = '/webuser/index'> Gerencie funcionários </a> </li> </ul> </li> <style style = 'Padding-left: 5px;' class = 'nível2'> <a href = ''> Gerenciamento de navegação </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'nível3'> <a href = ''> Gerenciamento de navegação </a> <ul style = 'margem: 0px; preenchimento: 0'> <li style = 'preenchimento-left: 5px;' class = 'Level3'> <a href = '/banner/create'> nova navegação </a> </li> <estilo estily = 'preenchimento-left: 5px;' class = 'Level3'> <a href = '/banner/index'> Gerenciar navegação </a> </li> </ul> </li> </ul> </li></ul></ul> </div> </div> <div> <div>
Lista de usuários
</div> <div> <p> Usuário: <input type = "text" name = "userName" id = "nome de usuário" /> departamento: <input type = "text" name = "deptName" id = "deptName" /> < /p> <p> tempo: <input type = "text =" ("starttime" /> "" "" " /p. /> </p> <p> <input type = "button" id = "search" value = "query"/> <a href = "/webuser/create"> crie um usuário </a> </p> <div id = "list"> <table> <tr> <hth> </th <th> número </th> <h> whh thy </m renty> <tr> <ht> Nome </th> <th> email </th> <th> departamento </th> <th> update </th> <the> update </th> <th> update </th> <the> update </a> </span> <tbody> <td> <div> </span> <a href = "/webUSer/detplas/1"> view </a> href = "/webuser/create"> novo </a> </span> <pan> <a href = "/webuser/edit/1"> edit </a> </span> <pan> <a href = "/webuser/delete/1"> Delete </a> </span> <pangus> <a href = "/webuser/aprovou/1"> audit </a> </span> </div> <td> 1 </td> <td> zzl </td> <td> <pura> zzl </td> <td> <span> zzl </span> </td> <tpan> </td> <td> Empresa </td> <td> 2015/6/22 21:51 </td> <td> Normal </td> <td> 1 </td> </tr> </tbody> <tfoot> <tr> <td colspan = "9"> <estilo typet = 'text/css'. 0px; text-align: Centro; Font-Family: 0px; Font-Family: Arial; Size da fonte: 12px;}. 5PX;}. #666;}. #ddd;} </style> <div style = 'claro: ambos'> </div> <div> <b> 1/1 no total </b> </div> </td> </tfoot> </ table> </div>Vamos dar uma olhada na mesa da tabela. O Bootstrap adiciona basicamente o estilo CSS, e não há nada de especial.
<table> ... </ tabela>
Também há mesas de fronteira abaixo
<table> ... </ tabela>
Ao mesmo tempo, também integra o efeito de suspensão do JS
<table> ... </ tabela>
Ｏｋ, apresentarei o painel e a tabela no layout aqui. Finalmente, deixe todos dar uma olhada na demonstração do meu bootstrap. Parece realmente simples e conveniente!
O exposto acima é o conhecimento relevante sobre o painel e a tabela no bootstrap apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!