1. Prefácio
Recentemente, preciso construir um sistema de gerenciamento de back-end e pretendo usar o Bootstrap para criar um modelo de back-end de bom aparência. Eu acho que o CSS e o JS são um pouco pesados.
Então, pretendo confiar inteiramente no Bootstrap para construir meu próprio modelo.
Comece com o menu dobrável à esquerda. Olhe para a foto.
2. Código CSS
A seguir, o código CSS personalizado. Como o sistema é usado internamente, o Chrome é o preferido e o Firefox não é considerado ou seja.
#main-nav {margin-left: 1px;} #main-nav.nav-tabs.nav empilhado> li> a {preenchimento: 10px 8px; font-size: 12px; font-weight: 600; cor: #4a515b; background: #e9e9; backig-weight: -Moz; 100%); Antecedentes: -Webkit Gradiente (linear, superior esquerdo, inferior esquerdo, parada de cor (0%, #fafafa), parada de cor (100%, #e9e9e9)); fundo: -webkit-linear-gradiente (top, #fafafa 0%, #e9e9e9 100%); 0%,#E9E9E9 100%); Antecedentes: -ms-linear-gradiente (topo, #fafafa 0%,#e9e9e9 100%); Antecedentes: gradiente linear (topo, #fafafa 0%,#e9e9e9 100); fundo: gradiente linear (topo, #FAFAFA 0%,#e9e9 e9); pano de fundo linear (topo, #FAFA: 0%,#e9e9 100%; #Fafafa 0%,#e9e9 100%); filtro: progid: dximageTransform.microsoft.gradiente (startColorstr = '#fafafa', endColorstr = '#e9e9e9');-ms-filter: "progid: dXeRagetransform.micSoft.Glosent.Glosftent (MS-Filter:" Progid: DXIMAGETRANS.MicSoftSoft.Glosftent (MS-Filter: "Progid: DXIMAGETRANS.MicSoftSoft.Glosftent (MS-Filter:" Progid: DXIMAGETRANS.MicSoft.Gert.Glosftent (MS-Filter: "Progid: DXIMAGETRANS.MicSoft.Glosoft. endColorstr='#E9E9E9');border: 1px solid #D5D5D5;border-radius: 4px;}#main-nav.nav-tabs.nav-stacked > li > a > span {color: #4A515B;}#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > A: Mur mais {color: #fff; fundo: #3C4049; Background: -moz-linear-gradiente (topo, #4A515b 0%, #3C4049 100%); Antecedentes: -webkit-gradiente (linear, parte superior esquerda, parte inferior da cor (0%, #4A515B), parte superior esquerda, parte inferior esquerda, cor de cor (0%, #4A515B), S-Stop esquerdo, 3%, #4A515B ( #4A515B) (linear, parte inferior esquerda, parte inferior da cor (0%, #4A515B), parte superior esquerda, parte inferior esquerda, 3%de cor (0%, #4A515B), parte superior esquerda, parte inferior esquerda, 3%de cor (0%, #4A515B), parte inferior esquerda, parte inferior esquerda, 3%310; -Webkit-gradiente linear (superior, #4A515B 0%, #3C4049 100%); Antecedentes: -O-gradiente linear (topo, #4A515B 0%, #3C4049 100%); Antecedentes: -m-linear-gradient (topo, #4A515%, #310, 310, 3C40%, 310, 3C40%, #310, 310, 3C40%, #310, 31010, 3C40%, #310, 310, 3C40%. #4A515B 0%,#3C4049 100%); Antecedentes: gradiente linear (topo,#4A515b 0%,#3C4049 100%); filtro: progid: dIMAGETRANSForm.microSt. "Progid: dximageTransform.microsoft.gradient (startColorstr = '#4a515b', endcolorstr = '#3c4049')"; cor de borda:#2b2e33;}#main-nav.nav-tabs.navlacked> li.active> a,#JANN-NANN-NAV.NAV.NAV-TABS.NAV-STACKED> {color: #fff;} #main-nav.nav-tabs.nav empilhado> li {margin-bottom: 4px;}/*define o estilo de menu secundário*/. SecondMenu a {font-size: 10px; cor: #4a515b; text-align: Center;}. NavnBar-static-Top: 5px;}. Navbar-Brand {Background: URL ('') No-repetir 10px 8px; Display: Block Inline; Alinhamento Vertical: Médio; Padding-Left: 50px; cor: #fff;}3. Código HTML
O código HTML é relativamente simples. Data-Toggle http://v3.bootcss.com/components/ Aqui está uma introdução.
<div role = "navegação"> <div> <div> <a href = "/admin/index.html" id = "logotipo"> Sistema de gerenciamento de configuração (pacote mensal de viagem) </a> </div> </div> <dib> <div> <l id = "main-nAv" style = "> <li> <a> <a>> <li> <li> <ul Id =" main-nAv "/"> <li> <a> <a> href = "#SystemSetting" data-toggle = "colapso"> <i> </i> gerenciamento de sistemas </span> </span> </a> <ul id = "systemSetting" style = "altura: 0px;"> <li> <a href = "#"> <i> </i> gestão </a> <li>>> Gerenciamento </a> </li> <li> <a href = "#"> <i> </i> Gerenciamento de função </a> </li> <li> <a href = "#"> <i> </i> Modificar senha </a> </li> <li> <a href = "#" <i> </i> Log </a> href = "./ planos.html"> <i> </i> gerenciamento de materiais </a> </li> <li> <a href = "./ grid.html"> <i> </i> Configuração de distribuição </i-iTBUSTBUSTILIGUNDO </Ali> </i> <a> <a>/spankt </span> </a> </li> <a> <a>/span-ht </span> </a> </li> <a> <a>/iMt/span-ht. Configuração <pan> 5 </span> </a> </li> <li> <a href = "./ Charts.html"> <i> </i> Estatísticas de caracteres </a> </li> <li> <a href = "#"> <i> </i> sobre o sistema </a> </li> </lint>
4. CSS e JS referenciados
<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 recomenda tópicos relacionados ao Bootstrap:
Habilidades de operação de componentes de bootstrap
Resumo do conhecimento relacionado ao bootstrap
O exposto acima é o conhecimento relevante sobre o Bootstrap, criando um modelo de sistema para o menu dobrável esquerdo (i). No próximo artigo, corrigiremos alguns bugs para você. Você pode consultar o Bootstrap, criando um modelo de sistema para o menu dobrável esquerdo (ii). Este capítulo apresenta a introdução do bootstrap, criando um modelo de sistema para o menu de dobragem esquerda (ii). 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!