1. Vorwort
Vor kurzem muss ich ein Backend-Management-System erstellen, und ich habe vor, Bootstrap zu verwenden, um eine gut aussehende Backend-Vorlage zu erstellen. Ich denke, das CSS und JS sind etwas schwer.
Daher habe ich vor, mich ganz auf Bootstrap zu verlassen, um meine eigene Vorlage zu erstellen.
Beginnen Sie mit dem Faltmenü links. Schau dir das Bild an.
2. CSS -Code
Das Folgende ist der benutzerdefinierte CSS -Code. Da das System intern verwendet wird, wird Chrome bevorzugt und Firefox wird nicht als IE angesehen.
#main-nav {margin-left: 1px;}#main-nav.nav-tabs.nav-stacked > li > a {padding: 10px 8px;font-size: 12px;font-weight: 600;color: #4A515B;background: #E9E9;background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%); Hintergrund: -Webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, #fafa), Color-Stop (100%, #e9e9e9); Hintergrund: -Webkit-linear-Gradient (Top, #fafa-Gradient (optim), #E9E9e9 100%); 0%,#e9e9e9 100%); Hintergrund: -ms-linear-Gradient (oben, #fafa 0%,#e9e9e9 100%); Hintergrund: linear-Gradient (Top, #fafafa 0%,#e9e9e9 100%); #Fafafa 0%,#e9e9 100%); Filter: progid: diximagetransform.microsoft.gradient (startcolorstr = '#fafafa', endcolorstr = '#e9e9e9'); EndColorStr = ' #e9e9e9'); Grenze: 1PX Solid #d5d5d5; Border-Radius: 4px;} #Main-Nav.nav-tabs.nav-gestapelt> li> a> span {color: #4a515b;} #Main-nav-tabs.nav-Stacked> a, #Main-nav-tabs.nav-stapeled> li.naved> a, #Main-nav-tabs.nav-stapeled> li.naved> a, #Main-nav-tabs.nav-stapeled> a, # #Main-Nav-tabs.nav-stapeled> li.. A: Hover {Farbe: #fff; Hintergrund: #3c4049; Hintergrund: -moz-linear-Gradient (oben, #4a515b 0%, #3c4049); Hintergrund: -Webkit-Gradient (linear, links oben, links unten, Color-Stop (0%, #4a515b), Farbe, 100%, #3C4049); -Webkit-linear-Gradient (oben, #4a515b 0%, #3c4049 100%); #4a515b 0%,#3c4049 100%); Hintergrund: Linear-Gradient (oben,#4a515b 0%,#3c4049 100%); Filter: progid: dimaMagetransform.microsoft.gradient (startcolorstr = '#4a515b', endcolorStr = '#3C4049). "Progid: DimaTransform.Microsoft.gradient (startColorStr = '#4a515b', EndColorStr = '#3c4049')" Border-Color:#2B2E33;}#Main-Nav-Tabs.nav-stapelte li.active> a,##Main-Nav.Nav.Nav-Tabs.Nav-Stapel> a,##Main-Nav.Nav.Nav-Tabs.nav-Stapel> a,##Main-nav.nav.nav-tabs {color: #fff;} #main-nav.nav-tabs.nav-stapelte> li {margin-bottom: 4px;}/*sekundäre Menüstil definieren 5px;}. Navbar-Brand {Hintergrund: URL ('') No-Repeat 10px 8px; Anzeige: Inline-Block; Vertical-Align: Middle; Padding-Links: 50px; Farbe: #fff;}3. HTML -Code
Der HTML -Code ist relativ einfach. Data-Toggle http://v3.bootcss.com/components/ Hier ist eine Einführung.
<div role="navigation"><div><div><a href="/Admin/index.html" id="logo">Configuration Management System (Travel Monthly Package)</a></div></div><div><div><ul id="main-nav" style=""><li><a href="#"><i></i>Home</a></li><li><a href = "#systemetting" data-toggle = "collapse"> <i> </i> Systemmanagement <span> </span> </a> <ul id = "systemetting" style = "height: 0px; Management </a> </li> <li> <a href = "#"> <i> </i> Rollenverwaltung </a> </li> <li> <a href = "#"> <i> </i> Passwort ändern </a> </li> <li> <a href = "#"> <i> </i> Log -Ansicht </li> </li> </li> <i> </i> log/a> </li> </li> <i> </i> Log -Ansicht. href = "./ plant.html"> <i> </i> Materialverwaltung </a> </li> <li> <a href = "./ Grid.html"> <i> </i> Verteilungskonfiguration <Pan> 5 </span> </li> <li> <a> <a href = ". Configuration<span>5</span></a></li><li><a href="./charts.html"><i></i>Character Statistics</a></li><li><a href="#"><i></i>About the system</a></li></ul></div><div>Main window</div></div>
V. Referenzierte CSS und JS
<link href = "http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel = "stylesheet"> <script src = "http://cdn.bootcs.com/jquery/2.1.1/jquery src = "http://cdn.bootcs.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
Wulin.com empfiehlt Bootstrap -bezogene Themen:
Bootstrap -Komponenten Betriebsfähigkeiten
Zusammenfassung des Kenntnisses im Zusammenhang mit Bootstrap
Das obige ist das relevante Wissen über Bootstrap erstellt eine Systemvorlage für das linke Menü (i). Im nächsten Artikel werden wir einige Fehler für Sie beheben. Sie können auf Bootstrap verweisen, eine Systemvorlage für das linke Menü zu erstellen (ii). In diesem Kapitel wird die Einführung von Bootstrap vorgestellt, die eine Systemvorlage für das linke Faltmenü (II) erstellen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!