No ensaio anterior, com base no resumo da experiência do Bootstrap Metronic da estrutura de desenvolvimento [i] da estrutura geral da estrutura e no processamento dos módulos de menu, ele introduz o processamento dos módulos de menu e apresenta principalmente como obter dinamicamente registros das listas do banco de dados e criar. O estilo de ícone das informações do menu também é obtido no banco de dados, por isso somos obrigados a obter dinamicamente as várias definições de ícone no bootstrap. Este artigo apresenta principalmente como extrair as informações do ícone da Bootstrap e armazená -las no banco de dados para meu uso.
1. Exibição do menu e vários ícones de bootstrap
Podemos ver na figura abaixo que, para a beleza do menu, cada item de menu (existem menus de três níveis aqui) tem um ícone. Embora os tamanhos sejam diferentes, usamos ícones de bootstrap, que são todos do conteúdo da biblioteca de ícones de bootstrap.
A biblioteca de ícones de bootstrap está dividida em três categorias:
Fonte Awesome: Fonte de ícone especial do Bootstrap. Todos os ícones incluídos na fonte impressionante são o vetor, para que possam ser escalados arbitrariamente, evitando o aborrecimento de ter um ícone para fazer vários tamanhos. Os estilos que o CSS pode definir para fontes também podem ser usados nesses ícones.
Por exemplo, a seguir estão alguns ícones incríveis da fonte:
Ícones simples: colete os logotipos de muitos sites e forneça tamanhos de alta qualidade e diferentes imagens de formato PNG para internautas. Todos os direitos autorais do ícone pertencem à sua empresa.
Como mostrado abaixo estão alguns ícones de ícones simples:
Glificons: inclui uma coleção de 200 gráficos de formato de fonte simbólica fornecidos pelos glificons. Os halflings dos glificons geralmente são cobrados, mas após a negociação entre os autores do Bootstrap e Glyphicons, os desenvolvedores podem usá -lo sem pagar uma taxa.
Aqui estão alguns dos conteúdos dos glifos:
Usando esses conteúdos de ícones, podemos apenas apresentar os seguintes estilos.
<link href = "/Content/medidor/font-awome/css/font-awesome.min.css" rel = "stylesheet"/> <link href = "/content/medidor/simples-line-icons/simples-line- icons.min.css" rel = "Stylesheet"/> <link href = "/Content/medidor/bootstrap/css/bootstrap.min.css" rel = "SHILEET"/>
Esses ícones suportam exibição temática de várias bootstraps, como mostrado nos seguintes efeitos.
Ou você também pode aumentar o ícone:
2. Extração de vários ícones de bootstrap
Através da introdução acima, provavelmente temos um certo entendimento desses ícones de bootstrap, mas se quisermos selecionar ícones na edição de menu, ainda precisamos extrair essas informações no banco de dados e exibi -las para escolher, caso contrário, a configuração dinâmica não será possível.
Por exemplo, na interface de edição acima, fornecemos seleção dinâmica dos ícones da web do menu. Se gravarmos uma coleção dos ícones acima no banco de dados, podemos exibi -lo na interface e selecionar o gráfico apropriado.
Com base nos arquivos de estilo acima, vamos analisá -los. Para o conteúdo do arquivo de font-awome.min.css, a parte da definição do ícone é a seguinte.
Para icons simples, sua definição de estilo é semelhante, como mostrado abaixo.
Para os glificons, sua definição de estilo também é muito semelhante, como mostrado abaixo.
Com base nessas informações, podemos extrair as informações de que precisamos através da correspondência regular de expressão e armazená -las no banco de dados para obter a primeira etapa da exibição dinâmica e a seleção de ícones.
Por exemplo, definimos variáveis parciais e expressões regulares para lidar com esses conteúdos de arquivo:
string regex = "^//. (? <name>.*?): antes // s*// {"; List <String> filepathlist = new List <String> () {"~/content/temes/meteronic/Assets/global/plugins/bootstrap/css/bootstrap.css", "~/content/temes/meteronic/Assets/Global/Plugins/simples-icons/Simple-line-ocons.cssssns"Em seguida, o conteúdo da coleção pode ser extraído lendo o conteúdo do arquivo e obtendo o registro correspondente.
String Content = FileUtil.FileToString (RealPath); List <String> MatchList = Cregex.getList (conteúdo, regex, 1);
Por fim, podemos salvar essas informações na tabela de banco de dados.
BootstrapiconInfo info = new bootstrapiconInfo () {displayName = item, className = prefixo + item, createTime = dateTime.now, sourceType = sourceType,}; BllFactory <Potstrapicon> .instance.insert (info);Finalmente, o registro é armazenado no banco de dados. O efeito é o seguinte. As informações do ícone que precisamos foram registradas. Dessa forma, ao usá-lo, você pode usar as informações de cada campo para exibir uma interface bonita.
3. Exibição e seleção do ícone de bootstrap
Depois de lermos o arquivo e extrair o conteúdo em expressões regulares e, em seguida, salvá -lo no banco de dados, essas informações sobre o ícone podem ser usadas para nós e podem ser exibidas de maneira classificada na página. Cada tipo de ícone é paginado para facilitar a consulta, como mostrado abaixo.
O código da página de exibição nesta parte é semelhante à exibição regular de dados, mas as informações do cabeçalho não são necessárias. Vamos dar uma olhada no código da página, como mostrado abaixo.
<div> <div> <div> <i></i> Icon Information</div> </div> <div> <div> <span>Show per page</span> <select id="rows" onchange="ChangeRows()"> <option>50</option> <option selected>100</option> <option>200</option> <option>1000</option> </select> <span>Record</span> <span>Total records: </span> <span id = 'totalcount'> 0 </span>, contagem total da página: <span id = 'totalpageCount'> 0 </span> páginas. </div> <hr/> <div style = "preenchimento-left: 20px"> <div id = "grid_body"> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div> </div> </div>
O conteúdo principal de exibição do ícone está no HTML na parte acima.
<div id = "grid_body"> </div>
O script de processamento que obtém e gera dinamicamente o código HTML a ser exibido na interface é o seguinte.
$ .getjson (iconurl + "&" + condição, function (dados) {$ ("#icon_body"). html (""); $ .each (data.rows, function (i, item) {var = "<a href =/" javaScript:;/"onClick =/" geticon "" " title =/"" + item.displayName + "/"> "; tr + =" <i class =/"" + item.className + "/" style =/"font-size: 2.2em/"> </i> "; // // tr + =" <div> + item.displayam + "</div>"; $ ("#icon_body"). Appender (tr);Depois que o usuário selecionar o ícone correspondente, podemos definir o estilo de extensão através do script para exibir o ícone que selecionamos, como mostrado abaixo.
$ ("#i_webicon"). att ("classe", classe);Obviamente, quando selecionamos um ícone, fornecemos uma caixa de diálogo pop-up para exibir ícones com categorias diferentes, para que o usuário possa retornar após selecioná-lo.
Dessa forma, terminamos, extraindo diferentes tipos de gráficos do arquivo de ícone, armazenando -os no banco de dados e exibindo -os na página, para que selecionemos e definimos dinamicamente.
O exposto acima é o resumo da experiência da estrutura de desenvolvimento metrônico de Bootstrap, introduzida pelo editor a você [quatro] o conhecimento relevante sobre a extração e a utilização de ícones de bootstrap. Espero que seja útil para todos. Se você quiser saber mais informações, preste atenção ao site wulin.com!