Lorsque nous concevons une page, un morceau est nécessaire. Aucun site Web n'est en panne dans une colonne. À moins que vous ne lisiez un roman, la conception de votre page doit être ouverte. Autrement dit, il est appelé le système de grille dans Bootstrap en raison de plusieurs composants de panneau. Une fois la disposition macro de chaque ligne et colonne réalisée, de petits morceaux sont créés dans chaque grand bloc et les petits morceaux peuvent être implémentés à l'aide du panneau. Jetons un coup d'œil à un exemple ci-dessous.
<div> <div> En-tête du panneau sans titre </div> <div> Contenu du panneau </div> </div>
C'est le format le plus simple, l'effet après son exécution
En fait, lorsque nous concevons notre propre système, si le panneau s'exécute correctement, nous pouvons également créer rapidement une page, comme suit
Il se trouve en fait dans une grille (1x2) et deux composants de panneau, le code de réduction est le suivant
<div> <div> <div> Navigation rapide </div> <div> <ul> <li style = 'padding-left: 5px;' class = 'lave0'> <a href = ''> root </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'niveaux1'> <a href = ''> Gestion du système </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'lavel2'> <a href = ''> role </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = '/ role / create'> nouveau rôle </a> </li> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = '/ role / index'> Gérer le rôle </a> </li> </ul> </li> <li style = 'padding-left: 5px;' class = 'lavel2'> <a href = ''> Management de département </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = ''> Management de département </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' CLASS = 'NIVEAL3'> <A HREF = '/ Department / Index'> Department de gestion </a> </li> </ul> </li> <li style = 'Padding-left: 5px;' CLASS = 'NIVEAL2'> <A HREF = ''> GESTION DE MENU </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = '/ menu / index'> Management Menu Management </a> </li> </ul> </li> <li style = 'padding-left: 5px;' class = 'lave 2'> <a href = ''> Management des employés </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = '/ webuser / create'> nouvel employé </a> </li> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = '/ webuser / index'> gérer les employés </a> </li> </ul> </li> <li style = 'padding-left: 5px;' class = 'nive2'> <a href = ''> Management de la navigation </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = ''> Management de la navigation </a> <ul style = 'margin: 0px; padding: 0'> <li style = 'padding-left: 5px;' class = 'lavel3'> <a href = '/ bannière / create'> Nouvelle navigation </a> </li> <li style = 'padding-left: 5px;' Class = 'Level3'> <a href = '/ bannière / index'> Gérer la navigation </a> </li> </ul> </li> </ul> </li> </ul> </ul> </div> </div> <div> <div>
Liste d'utilisateurs
</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> <entrée type = "Button" id = "search" value = "Query" /> <a href = "/ webuser / create"> Créer un utilisateur </a> </p> <div id = "list"> <Table> <Tr> <th> </th> <th> Number </ Th> <Th> Nom d'utilisateur </th> <th> réel Nom </th> <th> e-mail </ th> <th> département </th> <th> update </th> <th> update </th> <th> update </th> <th> update </a> </span> <tbody> <td> <div> <span> <a href = "/ webuser / details / 1"> View </a> </span> <span> <a <A href = "/ webuser / create"> new </a> </span> <span> <a href = "/ webuser / edit / 1"> modifier </a> </span> <span> <a href = "/ webuser / delete / 1"> delete </a> </span> <span> <a unisser / 1 "> delete </a> </pan> <span> <a href = "/ webuser / approuver / 1"> Audit </a> </span> </div> <td> 1 </td> <td> zzl </pd> <td> <span> zzl </td> <pd> <span> zzl </span> </td> <td> <pan> non info </spane </td> <td> Company </td> <td> 2015/6/22 21:51 </td> <td> normal </td> <td> 1 </td> </tr> </dody> <tfoot> <tr> <td colpan = "9"> <style type = 'text / css'>. 0px; Text-Align: Center; Font-Family: 0px; font-Family: Arial; Font-Size: 12px;}. Page_Standard A.Cur {Background: Aucun Répéter Scroll 0 0 # 036CB4; Border: 1px Solid # 036CB4; Color: #ffff; Font-Weeight: Bold; margin: 2px; Padding: 2px; 5px;}. Page_standard a {border: #eee 1px solide; padding: 2px 5px; marge: 2px; couleur: # 036cb4; text-décoration: Aucun;}. Page_standard A: hover {border: # 999 1px solide; Color: # 666;}. # 666;}. Page_standard Span {Border: # 036CB4 1PX SOLID; Padding: 2px 5px; Font-Weight: Bold; marge: 2px; couleur: #fff; arrière-plan: # 036CB4;}.. #ddd;} </ style> <div style = 'Clear: les deux'> </div> <div> <b> 1/1 dans le total </b> </div> </td> </tfoot> </ table> </div>Jetons un coup d'œil à la table de table. Bootstrap y ajoute essentiellement le style CSS, et il n'y a rien de spécial.
<ballage> ... </ table>
Il y a aussi des tables bordées ci-dessous
<ballage> ... </ table>
Dans le même temps, il intègre également l'effet de suspension de JS
<ballage> ... </ table>
Ｏｋ, je vais présenter le panneau et la table dans la mise en page ici. Enfin, laissez tout le monde jeter un œil à la démo de mon bootstrap. C'est vraiment simple et pratique!
Ce qui précède est les connaissances pertinentes sur le panneau et le tableau de Bootstrap qui vous présentent par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!