En el ensayo anterior, basado en el resumen de la experiencia de Bootstrap Metronic de la descripción general del marco del marco de desarrollo [i] y el procesamiento de los módulos de menú, introduce el procesamiento de los módulos de menú, y presenta principalmente cómo obtener dinámicamente registros de la base de datos y construir listas de menú. El estilo de icono de la información del menú también se obtiene de la base de datos, por lo que debemos obtener dinámicamente las diversas definiciones de iconos en Bootstrap. Este artículo presenta principalmente cómo extraer la información del icono de Bootstrap y almacenarla en la base de datos para mi uso.
1. Pantalla de menú y varios iconos de arranque
Podemos ver en la figura a continuación para la belleza del menú, cada elemento del menú (hay menús de tres niveles aquí) tiene un icono. Aunque los tamaños son diferentes, usamos iconos de arranque, que son todos del contenido de la biblioteca de iconos de arranque.
La biblioteca de iconos de bootstrap se divide en tres categorías:
Font impresionante: fuente de icono especial de Bootstrap. Todos los iconos incluidos en Font Awesome son Vector, por lo que se pueden escalar arbitrariamente, evitando la molestia de tener un ícono para hacer múltiples tamaños. Los estilos que CSS puede establecer para fuentes también se pueden usar en estos iconos.
Por ejemplo, los siguientes son algunos iconos impresionantes de fuentes:
Iconos simples: recopile los logotipos de muchos sitios web y proporcione de alta calidad y diferentes tamaños de imágenes de formato PNG a los internautas. Todos los derechos de autor de ícono pertenecen a su empresa.
Como se muestra a continuación, hay algunos íconos de iconos simples:
Glyphicons: incluye una colección de 200 gráficos de formato de fuentes simbólicas proporcionadas por Glyphicons. Glyphicons Halflings generalmente se cobra, pero después de la negociación entre los autores de Bootstrap y Glyphicons, los desarrolladores pueden usarlo sin pagar una tarifa.
Aquí están algunos de los contenidos de los glifos:
Usando estos contenidos de iconos, solo podemos introducir los siguientes estilos.
<link href = "/content/meter/font-awesome/css/font-awesome.min.css" rel = "stylesheet"/> <link href = "/content/meter/simple-line-icons/simple-line-icons.min.css" rel = "stylesheet"/> <link link href = "/content/meter/bootstrap/css/bootstrap.min.css" rel = "Stylesheet"/>
Estos íconos admiten la visualización temática de varias botas, como se muestra en los siguientes efectos.
O también puedes hacer que el icono sea más grande:
2. Extracción de varios iconos de arranque
A través de la introducción anterior, probablemente tengamos una cierta comprensión de estos iconos de arranque, pero si queremos poder seleccionar iconos en la edición del menú, aún necesitamos extraer esta información en la base de datos y mostrarla para que yo elija, de lo contrario, la configuración dinámica no será posible.
Por ejemplo, en la interfaz de edición anterior, proporcionamos una selección dinámica de los iconos web del menú. Si grabamos una colección de los iconos anteriores en la base de datos, podemos mostrarla en la interfaz y seleccionar el gráfico apropiado de él.
Basado en los archivos de estilo anteriores, analicémoslo. Para el contenido del archivo de Font-Awesome.min.css, la parte de definición de iconos es la siguiente.
Para los íconos de línea simple, su definición de estilo es similar, como se muestra a continuación.
Para los glificones, su definición de estilo también es muy similar, como se muestra a continuación.
Según esta información, podemos extraer la información que necesitamos a través de la coincidencia de expresión regular y almacenarla en la base de datos para realizar el primer paso de la pantalla dinámica y la selección de iconos.
Por ejemplo, definimos variables parciales y expresiones regulares para manejar estos contenidos del archivo:
String Regex = "^//. (? <name>.*?): antes // s*// {"; LIST <String> filePathList = new List <String> () {"~/content/themes/meteronic/assets/global/plugins/bootstrap/css/bootstrap.css", "~/content/themes/meteronic/assets/global/simple-line-iCons/simple-icons.css";};Luego, el contenido de la colección se puede extraer leyendo el contenido del archivo y obteniendo el registro coincidente.
String content = fileUtil.FiletoString (RealPath); List <String> MatchList = Cregex.getList (Content, Regex, 1);
Finalmente, podemos guardar esta información en la tabla de la base de datos.
BootstraPiConInfo info = new BootstraPiconInfo () {displayName = item, className = prefix + item, createTime = DateTime.Now, SourCeType = SourceType,}; BllFactory <BootstraPiCon> .instance.insert (info);Finalmente, el registro se almacena en la base de datos. El efecto es el siguiente. Se ha registrado la información del icono que necesitamos. De esta manera, cuando lo usa, puede usar la información de cada campo para mostrar una interfaz de buen aspecto.
3. Visualización y selección del icono de bootstrap
Después de leer el archivo y extraer el contenido en expresiones regulares, y luego guardarlo en la base de datos, esta información de iconos puede usarse para nosotros y se puede mostrar de manera clasificada en la página. Cada tipo de icono se pagina para una consulta fácil, como se muestra a continuación.
El código de página de visualización en esta parte es similar a la pantalla de datos regular, pero la información del encabezado no es necesaria. Echemos un vistazo al código de página como se muestra a continuación.
<VIV> <VIV> <VIV> <i> </I> INFORMACIÓN DE ICONO </div> </div> <div> <div> <span> show por página </span> <select id = "ROWS" OnChange = "Changeerows ()"> <Option> 50 </opción> <Opción seleccionada> 100 </opción> <Opción> 200 </opción> <Opción> 1000 </spection> </section> <panse </span Span </span Span </span> <span id = 'totalCount'> 0 </span>, Total Page Count: <span id = 'totalPageCount'> 0 </span> páginas. </div> <hr/> <div style = "Padding-left: 20px"> <div id = "Grid_body"> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div> </div> </div>
El contenido de pantalla del icono principal está en el HTML en la parte anterior.
<div id = "grid_body"> </div>
El script de procesamiento que obtiene y genera dinámicamente el código HTML para mostrar en la interfaz es el siguiente.
$ .getjson (iconurl + "&" + condición, function (data) {$ ("#icon_body"). html (""); $ .each (data.rows, function (i, item) {var tr = "<a href =/" javaScript :;/"onclick =/" geton (" + item.classname +" ')/"class =" Class = "BoTn/" BoTn/" title =/"" + item.displayname + "/"> "; tr + =" <i class =/"" + item.classname + "/" style =/"font-size: 2.2em/"> </i> "; // // tr + =" <div> " + item.displayname +" </div> "; tr + =" </a> ";"; ";"; "; $ ("#icon_body"). append (tr);Después de que el usuario selecciona el icono correspondiente, podemos establecer el estilo SPAN a través del script para mostrar el icono que seleccionamos, como se muestra a continuación.
$ ("#i_webicon"). attr ("clase", classname);Por supuesto, cuando seleccionamos un icono, proporcionamos un cuadro de diálogo emergente para mostrar iconos con diferentes categorías, para que el usuario pueda devolver después de seleccionarlo.
De esta manera, terminamos, extrayendo diferentes tipos de gráficos del archivo de icono, luego los almacenan en la base de datos y los muestran en la página, para que seleccionemos dinámicamente y establezcamos.
Lo anterior es el resumen de la experiencia del marco de desarrollo metrónico de Bootstrap introducido por el editor para usted [cuatro] el conocimiento relevante sobre la extracción y la utilización de los iconos de arranque. Espero que sea útil para todos. Si desea saber más información, ¡preste atención al sitio web de Wulin.com!