1. Prefacio
Recientemente necesito construir un sistema de gestión de backend, y planeo usar Bootstrap para crear una plantilla de backend guapo. Creo que el CSS y JS son un poco pesados.
Así que planeo confiar completamente en Bootstrap para construir mi propia plantilla.
Comience con el menú plegable a la izquierda. Mira la imagen.
2. Código CSS
El siguiente es el código CSS personalizado. Dado que el sistema se usa internamente, se prefiere Chrome y Firefox no se considera, es decir.
#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%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FAFAFA), color-stop(100%,#E9E9E9));background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);background: linear-gradient(top, #FAFAFA 0%,#E9E9 100%); Filtro: progid: dximagetransform.microsoft.gradient (startColorStr = '#fafafa', endcolorstr = '#e9e9e9');-ms-filter: "progid: dximagetransform.microsoft.gradient (startcolortr = '#fafafa',,, endcolortr = '' #e9e9e9 '); border: 1px sólido #d5d5d5; border-radio: 4px;} #main-nav.nav-tabs.nav-stacked> li> a> span {color: #4a515b;} #main-Nav.nav-tabs.nav-stacked> li.active A: Hover {Color: #fff; fondo: #3C4049; fondo: -Moz-lineal-gradiente (arriba, #4A515B 0%, #3C4049 100%); fondo: -webkit-gradiente (lineal, superior izquierda, fondo izquierdo, color-stop (0%, #4A515B), color-stop (100%, #3c4049)); -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);background: linear-gradient(top, #4A515B 0%,#3C4049 100%); Antecedentes: Lineal-Deportient (TOP,#4A515B 0%,#3C4049 100%); Filtro: Progid: dximagetransform.microsoft.gradient (startColortr = '#4A515B', endcolorStr = '#3c4049'); "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";border-color: #2B2E33;}#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {color: #fff;} #main-nav.nav-tabs.nav-stacked> li {margin-bottom: 4px;}/*Definir estilo de menú secundario*/. Secondmenu a {font-size: 10px; color: #4a515b; text-align: centro;}. Navbar-static-top {de fondo de fondo: #212121; 5px;}. Navbar-Brand {fondo: url ('') No-repeat 10px 8px; Display: Inline-Block; vertical-Align: Middle; Padding-izquierda: 50px; color: #fff;}3. Código HTML
El código HTML es relativamente simple. Data-toggle http://v3.bootcss.com/components/ Aquí hay una introducción.
<div role = "navegación"> <div> <div> <a href = "/admin/index.html" id = "logo"> Sistema de gestión de configuración (paquete mensual de viajes) </a> </div> </div> <div> <div> <ul id = "main-nav" style = ">"> <li> <a href = "#"> </i> </i> </a> </li> </li> </li> </li> </li> </li> href = "##Systemetting" data-toggle = "collapse"> <i> </i> gestión del sistema <span> </span> </a> <ul id = "systemyetting" style = "Height: 0px;"> <li> <a href = "#"> <i> </i> gestión de usuarios </a> </li> <li> Gestión </a> </li> <li> <a href = "#"> <i> </i> gestión de rol </a> </li> <li> <a href = "#"> <i> </i> Modifique la contraseña </a> </li> <li> <a href = "#"> <i> </i> View de log </a> </li> </li> <a li> <A href = "#"> <i> </i> href = "./ plans.html"> <i> </i> gestión de materiales </a> </li> <li> <a href = "./ grid.html"> <i> </i> Configuración de distribución <span> 5 </span> </a> </li> <li> <a href = ". Configuración <Span> 5 </span> </a> </li> <li> <a href = "./ Charts.html"> <i> </i> Estadísticas de caracteres </a> </li> <li> <a href = "#"> <i> </i> sobre el sistema </a> </li> </ul> </iv> <iv> Window </iv> Div> Div> Div>
4. Referenciados CSS y 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 <script src = "http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
Wulin.com recomienda temas relacionados con Bootstrap:
Habilidades de operación de componentes de arranque
Resumen del conocimiento relacionado con la bootstrap
Lo anterior es el conocimiento relevante sobre Bootstrap creando una plantilla del sistema para el menú plegable izquierdo (i). En el próximo artículo, solucionaremos algunos errores para usted. Puede consultar Bootstrap creando una plantilla del sistema para el menú plegable izquierdo (ii). Este capítulo presenta la introducción de Bootstrap creando una plantilla del sistema para el menú plegable izquierdo (ii). Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!