1. Préface
Récemment, j'ai besoin de construire un système de gestion backend, et je prévois d'utiliser Bootstrap pour créer un beau modèle backend. Je pense que le CSS et le JS sont un peu lourds.
Je prévois donc de compter entièrement sur Bootstrap pour construire mon propre modèle.
Commencez avec le menu pliant à gauche. Regardez l'image.
2. Code CSS
Ce qui suit est le code CSS personnalisé. Étant donné que le système est utilisé en interne, le chrome est préféré et que Firefox n'est pas considéré comme IE.
# main-nav {margin-left: 1px;} # main-nav.nav-tabs.nav-stacked> li> a {padding: 10px 8px; font-taille: 12px; font-weight: 600; couleur: # 4a515b; arrière-plan: # e9e9; arrière 100%); arrière-plan: -webkit-gradient (linéaire, haut gauche, fond gauche, couleurs-stop (0%, #fafafa), couleurs-stop (100%, # e9e9e9)); arrière 100%); arrière-plan: -ms-linear-gradient (top, #fafafa 0%, # e9e9e9 100%); arrière-plan: linéaire-gradient (haut, #fafafa 0%, # e9e9e9 100%); arrière-plan: linéaire-gradient (top, #fafa 0%, # e9e9e9 100%); arrière-plan: linéaire-gradient (top, #fafa 0%, # e9ee: linéaire-gradie 100%); filtre: PROGID: dxiagetransform.microsoft.gradient (startColorStr = '# fafafa', EndColorstr = '# e9e9e9'); - MS-Filter: "Progid: doxytransform.microsoft.gradient (startColorstr = '# fafa', endcolor 1px solide # d5d5d5; border-radius: 4px;} # main-nav.nav-tabs.nav-stacked> li> a> span {colore: # 4a515b;} # main-nav.nav-tabs.nav-stacked> li.active> a, # main-nav.nav-tabs. # 3C4049; Contexte: -moz-linear-gradient (top, # 4A515B 0%, # 3C4049 100%); arrière-plan: -webkit-gradient (linéaire, haut gauche, bas gauche, couleurs-stop (0%, # 4A515B), couleurs-stop (100%, # 3C4049); arrière # 4A515B 0%, # 3C4049 100%); arrière-plan: -o-linéaire-gradient (haut, # 4A515B 0%, # 3C4049 100%); arrière-plan: -ms-linear-gradient (top, # 4A515B 0%, # 3C4049 100%); arrière-plan: linéaire (Top, # 4A515B 0%, # 3C40 100%); arrière-plan: gradient linéaire (en haut, # 4A515B 0%, # 3C4049 100%); filtre: PROGID: dximageTransform.microsoft.gradient (startColorstr = '# 4A515B', EndColorstr = '# 3C4049'); - MS-Filter: "PROGID: dximageTransform.microsoft.gradient (startColorstr = '# 4A515B', ENDCOLORSTR = '# 3C4049')"; Border-Color: # 2B2E33;} # Main-Nav.Nav-Tabs.Nav-Stacked> li.Active> a, # Main-Nav.nav.nav-tabs.nav-staded> li> a: hover> a, # Main-Nav.Nav.nav-tabs.nav-staded> li> a: hover> a, # Main-Nav.Nav.Nav-Tabs.NAV-STAKED> LI " {Couleur: #fff;} # main-nav.nav-tabs.nav-stacked> li {margin-bottom: 4px;} / * définir le style de menu secondaire * /. SecondMenu A {font-size: 10px; couleur: # 4a515b; text-align: Center;}. Navar-static {Background-Color: # 212121; 5px;}. NAVBAR-Brand {Background: URL ('') No-Repeat 10px 8px; Affichage: Block en ligne; Vertical-Align: Middle; Padding-Left: 50px; Color: #fff;}3. Code html
Le code HTML est relativement simple. data-toggle http://v3.bootcss.com/components/ Voici une introduction.
<div role = "Navigation"> <div> <div> <a href = "/ admin / index.html" id = "logo"> Système de gestion de la configuration (package mensuel de voyage) </a> </v> </ div> <v> <v> <ul id = "main-nav" style = ""> <li> <a href = "#"> <i> </i> href = "# systemsetting" data-toggle = "effondrement"> <i> </i> Gestion du système <span> </span> </a> <ul id = "systemSetting" style = "height: 0px;"> <li> <a href = "#"> <i> </ i> Management d'utilisateur </a> </li> <li> <a href = "#"> <i> Gestion </a> </li> <li> <a href = "#"> <i> </i> Gestion des rôles </a> </li> <li> <a href = "#"> <i> </i> Modifier le mot de passe </a> </li> <li> <a href = "#"> <i> </i> href = "./ plans.html"> <i> </i> Gestion des matériaux </a> </li> <li> <a href = "./ grid.html"> <i> </i> Configuration de distribution <pan> 5 </ span> </a> </ li> <li> <a href = "./ plans.html"> <i> </ i> distribution Configuration <span> 5 </span> </a> </li> <li> <a href = "./ charts.html"> <i> </i> statistiques de caractères </a> </li> <li> <a href = "#"> <i> </i> sur la fenêtre du système </a> </li> </ul> </v> <v>
4. Référencé CSS et JS
<link href = "http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"> </ script> src = "http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script>
Wulin.com recommande des sujets liés à Bootstrap:
Compétences de fonctionnement des composants bootstrap
Résumé des connaissances liées à la bootstrap
Ce qui précède est la connaissance pertinente sur la création d'un modèle de système pour le menu de pliage gauche (I). Dans le prochain article, nous allons corriger certains bogues pour vous. Vous pouvez vous référer à Bootstrap Création d'un modèle système pour le menu de pliage gauche (II). Ce chapitre présente l'introduction de bootstrap Création d'un modèle système pour le menu de pliage gauche (II). 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!