¿Cuánto sabes sobre el marco de bootstrap?
Bootstrap es un marco técnico front-end que puede ser adoptado por muchas plataformas. Java/Php/.NET se puede usar como interfaz front-end. La integración de jQuery puede lograr efectos de interfaz muy ricos. Actualmente, hay muchos complementos de arranque que se pueden proporcionar para que todos los usen. Sin embargo, muchas presentaciones nacionales basadas en bootstrap todavía se centran en la enseñanza, introduciendo varios conocimientos básicos y el uso simple de Bootstrap; Este artículo espera proporcionar una introducción completa de caso al marco de desarrollo de Bootstrap basado en el proyecto MVC real basado en C#, y explicarlo con capturas de pantalla del código y efecto reales del proyecto, esforzando por introducir la experiencia y la experiencia en esta área en detalle e intuitivamente.
1. Descripción general del marco de desarrollo de bootstrap basado en metronic
Metronic es un marco de desarrollo de arranque extranjero basado en HTML, JS y otras tecnologías, integrando muchas tecnologías y complementos front-end de Bootstrap. Es un muy buen marco técnico. Según este artículo, combinado con mi investigación sobre el marco web de MVC, este artículo integra el marco de desarrollo de arranque basado en MVC para permitirle satisfacer las necesidades estructurales de los proyectos reales.
Las siguientes son las representaciones generales de mi proyecto general.
El contenido del área del menú se obtiene dinámicamente de la base de datos, y se coloca cierta información en la columna superior del sistema, y proporciona a los usuarios un procesamiento rápido de datos personales, como ver información personal, cerrar la sesión, bloquear la pantalla, etc. El área de contenido se muestra principalmente datos visuales, que se pueden mostrar a través de controles de la lista de árboles y controles de mesa. En general, los datos también deben ser agregados, eliminados, modificados y paginados, por lo que se deben integrar varias funciones. Además de consultar y mostrar los datos del usuario, también requiere operaciones relacionadas con la importación y exportación, que son funciones de procesamiento de datos de rutina. Después de determinar estas reglas y efectos de interfaz, podemos generarlas a través de herramientas de generación de código para generar rápidamente los efectos de interfaz de estos proyectos web.
2. Pantalla del menú de marco de desarrollo de Bootstrap
Todo el marco implica un montón de contenido, incluido el uso de varias características de CSS de Bootstrap regular, así como barra de menú, administración de iconos de arranque, barra superior del sistema, control de árbol Jstree, contenedor de portlet, cuadro de diálogo modal, control de pestaña, lista desplegable Seleccionar2, casilla de verificación, controlador multi-texto de edición de edición de controles de control, archivos e imágenes de etiqueta de etiqueta, control de control de control de control de control de control Spin touchs, reproducción de videos de control de videos, etc. Estas características están diseñadas en la solución holística. La recopilación de estos excelentes complementos puede proporcionar nuestro marco con funciones más potentes y una rica experiencia de interfaz.
Esta sección continúa volviendo al comienzo del marco, el procesamiento y la presentación del menú. En general, para la conveniencia de la gestión, los menús se dividen en tres niveles. Los menús seleccionados son diferentes de otros estilos de menú. Los menús se pueden plegar y minimizar. El efecto es el siguiente.
En Bootstrap, la construcción de menús es una tarea relativamente fácil. Principalmente usa UL y Li. A través del procesamiento de estilo, se puede configurar el diseño del menú. El código es el siguiente.
<ul data-kekeing-expandy = "false" data-auto-scroll = "true" data-slide-speed = "200"> <li id = "1"> <a href = "/home/index"> <i> </i> <span> home </span> <span> </span> <span> </aa> </li> <li ID = "2"> <a href: ";"; " <i></i> <span>Industry Trends</span> <span></span> <span></span> </a> <ul> <li style="font-size:14px;color:yellow"> <i></i> Industry Trends</li> <li> <a href="#"> <i></i> <span>4</span> Policies and Regulations</a> </li> <li> <a href="#"> <i></i> <span>4</span> Notices</a> </li> <li> <a href="#"> <i></i> <span>4</span> Dynamic Information</a> </li> </li> </li> </li> </ul> </li> </ul> </ul> </ul> </ul> </ul>
Sin embargo, nuestros menús generales se cambian dinámicamente, es decir, necesitamos obtenerlos de la base de datos y establecerlos en la pantalla frontal. De esta manera, necesitamos producir el contenido del menú en el controlador MVC y luego unirlos a la interfaz front-end para realizar la dinámica de los datos del menú. Al mismo tiempo, este es también el procesamiento básico del control del permiso.
En la clase base, podemos obtener los datos del menú y ponerlos en el objeto Viewbag después de que el usuario inicia sesión.
El código específico es el siguiente. Primero, determine si el usuario ha iniciado sesión. Si inicia sesión, obtenga los datos del menú del usuario y está disponible en Viewbag para su uso.
/// <summary> /// Reescribe el procesamiento de la clase base antes de que se ejecute la acción /// </summary> /// <param name = "filtreContext"> Reescribir los parámetros del método </param> protegido anulada void onactionExecuting (ActionExecutingContext FilterContext) {Base.onactionExecuting (filtreContextExtExt); // Obtener la información sobre el usuario de inicio de sesión CurrentUser = Session ["UserInfo"] como UserInfo; if (currentUser == null) {Response.Redirect ("/login/index"); // Si el usuario está vacío, salte a la interfaz de inicio de sesión} else {// Establezca el atributo de autorización y luego asigne el valor para ver la bolsa para guardar convertauthorizedInfo (); Viewbag.authorizeKey = AuthorizeKey; // Información de inicio de sesión Establecer ViewBag.fullName = CurrentUser.fullName; Verbag.name = currentUser.name; Viewbag.menustring = getMenustring (); //Viewbag.menustring = getMenustringCache (); // use caché y actualízalo de vez en cuando}}Entre ellos, la función GetMenustring es el ensamblaje y el procesamiento de los menús. La información del menú en la base de datos es una estructura de árbol como se muestra a continuación.
Podemos crear algún código HTML utilizado en la interfaz en función de la información del menú de la base de datos.
#Plantilla de formato definida por región // JavaScript:; // {0}? Tid = {1} var firstTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = '' title '> {2} </span> <selection =' seleccionado '> </span class =' span Open '> </ail </a>"; var Secondtemplate = @"<li class = 'heading' style = 'font-size: 14px; color: amarillo'> <i class = '{0}'> </i> {1} </li>"; var ThirdTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>"; var firstTemplateEd = "</li>"; var SECTTEMPLATESTART = "<UL Class = 'Sub-Menu'>"; var SecondTemplateEd = "</ul>"; #EndregionPor ejemplo, el menú de tercer nivel se puede generar a través del código.
// icono de nivel 3 = subnodeinfo.webicon; // tid es la ID de clasificación de nivel superior, Sid es la ID de menú de tercer nivel tmpurl = string.format ("{0} {1} tid = {2} & sid = {3}", subnodeinfo.url, getUrlJoiner (subnodeinfo.url), info.id, subnodeinfo.id); url = (! String.isNullorEmpty (subnodeinfo.url) && subnodeinfo.url.trim ()! = "#")? tmpurl: "javascript :;"; sb = sb.appendformat (ThirdTemplate, Url, Icon, SubNodeinfo.Name, SubNodeInfo.id);Por supuesto, si desea aumentar la concurrencia, puede reducir la recuperación frecuente del menú y poner esta parte de los datos en MemeryCache, de la siguiente manera.
public String getMenustringCache () {String itemValue = MemoryCacheHelper.getCacheItem <String> ("getMenustringCache", delegate () {return getMenustring ();}, null, datetime.now.addminutes (5) // expiración en 5 minutos, restablecido); devolver itemValue; }3. Uso de páginas de diseño
Al mismo tiempo, para mejorar la reutilización de la página, generalmente extraemos el contenido de la misma parte de cada página y lo colocamos en la página de diseño general. De esta manera, las otras partes se heredan de la página de vista de diseño. Nuestra parte del menú dinámico también es parte del contenido en la vista de diseño.
El _Layout.cshtml en la figura anterior es la página de vista de diseño general de MVC basada en C#. De esta manera, establecemos el contenido de la pantalla del menú en esta página, así como la parte del contenido de la página principal y parte de la pantalla del script, y es suficiente.
El código de visualización del menú es el siguiente:
La sección de visualización de la página que queda en la página de diseño es la siguiente.
Dado que Bootstrap generalmente pone los archivos JS al final, además de retener algunos de los jQuery y otros scripts necesarios en la página de diseño, también necesitamos colocar parte del contenido de script en la parte inferior de la página para la carga, y la carga de nuestro script se puede comprimir e integrarse utilizando la tecnología Bundles MVC. Para esta tecnología, consulte mi artículo anterior para introducir "Resumen de la experiencia del marco de desarrollo web basado en MVC4+ EasyUI (11) - Uso de Bundles para procesar el código de página simplificado".
De esta manera, después de presentar la página de vista de diseño en las vistas de cada subpage, solo necesitamos escribir la parte del contenido de visualización personalizado, el código específico es el siguiente.
Luego, en la parte inferior de la página, solo incluya el código de script para la parte requerida. Después de generar la página, se mostrará razonablemente de acuerdo con los bloques de pedidos establecidos por la página de diseño, y todas las partes del contenido se integrarán.
4. Uso del texto sublime de la herramienta de edición de la página
Muchas de las capturas de pantalla en la anterior son del entorno VS, pero generalmente cuando editamos la página View, usamos texto sublime, una poderosa herramienta de edición, complementos ricos, indicaciones de sintaxis inteligentes, etc., lo que le hará que le encante después de usarlo. Es una herramienta muy rápida para editar páginas de vista y es muy recomendable.
VS se usa generalmente para hacer gestión de archivos, compilación y otro procesamiento.
El contenido anterior es el resumen de la experiencia del marco de desarrollo basado en Bootstrap Metronic introducido en usted [i] Descripción general del marco y procesamiento del módulo de menú. Espero que sea útil para todos. Si desea saber más información, ¡preste atención al sitio web de Wulin.com!