Usar el marco Bootstrap para el diseño y el desarrollo es una tendencia relativamente popular en el mundo. Al optimizar nuevos productos, muchas compañías de software elegirán este marco de desarrollo debido a sus ventajas integrales en JS y controles.
El marco Bootstrap es un marco de diseño de UI front-end. Proporciona una interfaz UI unificada y simplifica el proceso de diseño de interfaz de interfaz de usuario (la desventaja es que la interfaz está personalizada, por lo que no hay mucho espacio para el ajuste). Especialmente el diseño del tiempo de respuesta actual (tengo entendido que la página adopta el diseño de diferentes elementos de página de acuerdo con diferentes resoluciones), que está bien compatible con Bootstrap. Mientras las propiedades simplemente estén configuradas, el diseño del tiempo de respuesta se puede implementar automáticamente, simplificando en gran medida el proceso de la interfaz de los programadores.
Por lo tanto, uso el marco Bootstrap para implementar la siguiente interfaz. Aunque es simple, es extraordinario (si realmente quieres implementarlo tú mismo, no sé si será el año del mes de mono y caballo)
Toda la página se divide en varias partes, que se implementan utilizando el código de muestra en el sitio web oficial de Bootstrap, y finalmente se forman en una página. Los esquemas de cada parte se muestran en la siguiente figura
A continuación, explique el código de cada parte a su vez
Primero, construya una página en blanco, el código es el siguiente:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width = width de dispositivo, escala inicial = 1.0"> <meta = "name =" cedle " name = "Autor" Content = ""> <title> bootstrap </title> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <Link rel = "Stylesheet" "" "" "" "" "" "" "" "" "" "" "" "" "" "les "" "" "" "" "" "" "" "" "" "" "" "" "" ""les" "" "" "" "" "" "" "" "" "" "" "" "" ""a En href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[if LT IE 9]> <script src = "../../ Docs-Assets/JS/IE8-Responsive-File-Warning.js"> </script> <! [Endif]-> <!-[If LT IE 9]> <Script src = "../../ DOCS-ASSETS/JS/IE8-RESPSIVE-FILE-WARNING.JS"> </SCRIPK> <! [Endifi]-------) 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/derpond.js/1.3.0/dert.min.js"> </script> <! [endif]-> <style> .bs-docs-home {background-color: #1b31b1; IMAGEN DE ACTUADO: URL (LINE.PNG); } </style> </head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Para usar el marco Bootstrap, debe consultar el archivo Bootstrap Framework en la página. Hay cuatro en total: bootstrap.min.css, bootstrap-theme.min.css, jQuery-1.10.2.min.js, bootstrap.min.js
Solo refiriéndose a estos archivos puede usar los diversos elementos de la interfaz de usuario proporcionados por el marco Bootstrap.
A continuación, como se muestra en la figura anterior, explique los códigos de cada parte en la secuencia
Descripción principal:
La idea de diseñar la página completa es colocar la página completa en un panel, y el texto en la parte superior es el encabezado del panel.
La página del marco Bootstrap es un diseño de cuadrícula de 12 columnas. Así que dividí la página completa en tres partes. Hay 3 columnas de ancho en blanco a la izquierda y a la derecha, y 6 columnas amplían un panel (panel).
El código es el siguiente: la parte restante del código está en <div> </div> en secuencia
<body> <div> <h1 style = "Line-Hight: 2em;"> </h1> <Br/> <Viv> <Viv> </div> <div> <div> <h3> <strong> consulta de puntaje de examen de habilidades vocacionales </strong> </h3> </div> </div> </div> </div> </div> </div> </div> <viv> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </scritch> </body>
Texto rápido
El texto de inmediato utiliza el componente de alerta en el marco Bootstrap, y el código es el siguiente:
<Div> <Button type = "Button" data-dismiss = "alert" aria-hidden = "true"> × </boton> <strong> nota! </strong> Los puntajes para este sitio son del sitio web oficial de 12333. Para obtener detalles, consulte el sitio web oficial </div>
Formulario de tarjeta de identidad y botón de consulta
El formulario de la tarjeta de identificación y el formulario de cuenta posterior deben estar en una forma. La forma de identidad y los botones de consulta son agrupaciones de elementos de formulario que utilizan el marco Bootstrap. Use el grupo de entrada para combinar el cuadro de texto y el botón. El marco Bootstrap proporciona efectos como marcas de agua y resaltados. Agregue mucho color a la forma
<form de rol = "form" name = "form1"> <div> <etiqueta for = "idcard"> Ingrese su número de identificación </label> <div> <input type = "text" id = "idcard" name = "Idcard" placeHolder = "Idcard Number"> <span> <botte type = "botón" en CLICK = "Form1.submit ();"; "" > Consulta </Button> </span> </div> </form>
Formulario
Los formularios de la cuenta también son grupos de elementos de formulario que utilizan el marco Bootstrap. Use el grupo de entrada para combinar el cuadro de texto (entrada), el botón (botón) y la lista desplegable (UL).
Puede ingresar el sujeto directamente en el cuadro de texto, o puede seleccionar el sujeto en el menú desplegable. La implementación específica es usar $ ('#sujeto'). Val ('Operador de computadora') y otros códigos para cambiar el contenido en el cuadro de texto en el evento de clic (clic) del hipervínculo (a). El formulario de cuenta se encuentra debajo del formulario de identificación, dentro del formulario (formulario)
El código es el siguiente:
<div> <etiqueta for = "sujeto"> Ingrese el tema que está buscando </label> <div> <input type = "text" id = "sujeto" name = "sujeto" placeholder = "cuenta, en blanco significa consultar todos los asignaturas"> <div> <button type = "botón" data-toggle = "desplegable"> cuenta <pan> </span> </botin> <li> <li> <a hreff = "#"#" onClick = "$ (''#sujeto '). Val (' Operador de computadora ');"> Operador de computadora </a> </li> <li> <a href = "#" onClick = "$ ('#temas '). Val (' Web Design ');"> Web Design </a> </li> <li> <a href = "#" onClick = "$ ('#sujeto'). Val ('Multimedia');"> Multimedia </a> </li> </ul> </div> </div> </div>Información de error de consulta
Cuando se hace clic en el botón de consulta y no se encuentra ningún registro, se muestra el mensaje de error de consulta. Al igual que el texto de solicitud anterior, utiliza el componente de alerta en el marco Bootstrap.
Si esta información se muestra también requiere la cooperación del código dinámico de fondo. El código dinámico decide si se debe mostrar la información en función de los resultados de la consulta (si no hay registro, se mostrará la información). El código dinámico no se discute en este artículo.
La ubicación está detrás del formulario, y el código es el siguiente:
<div> <botón type = "botón" data-dismiss = "alert" aria-hidden = "true"> × </boton> <strong> nota! </strong> no se encontraron resultados, verifique el número de identificación y los sujetos y verifique nuevamente </div>
Formulario
Cuando se hace clic en el botón de consulta, se muestra el formulario de puntuación cuando se encuentra el registro. Del mismo modo, si mostrarlo también requiere la cooperación del código dinámico en segundo plano.
Solo un mensaje de error y un formulario de puntuación pueden aparecer al mismo tiempo
El código es el siguiente:
<div> <table cellPacing = "0" cellPadding = "0"> <tr> <th scope = "col"> <span style = "color: blanco"> sujetos </span> </th> <th spope = "col"> <span style = "color: white"> standing </span> </th> </tr> <tr> <tr> <td> operador de la computadora </td> <td> sin calificar </td> <tr> <td> operador de computadora </td> <td> excelente </td> </tr> <tr> <td> operador multimedia </td> <td> bueno </td> </tr> <tr> <td> diseño web </td> <td> fallido </td> </tr> </table> </iv>
Esta página se implementa utilizando el marco Bootstrap. Gracias al poder del marco Bootstrap, diseñar la interfaz de usuario ya no es una tarea difícil. Pero Bootstrap es solo un marco de UI, y su excelencia depende de la cooperación del código dinámico en el fondo.
La siguiente URL es la función del autor utilizando la interfaz anterior más el código dinámico de backend (PHP) para realizar la consulta de los puntajes de las pruebas de habilidades vocacionales (solo Shanghai). Puede ir y echar un vistazo y dar comentarios valiosos (válido por 1 mes).
http://bertin.sturgeon.mopaas.com/
El código de interfaz de usuario completo es el siguiente:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width = width de dispositivo, escala inicial = 1.0"> <meta = "name =" cedle " name = "Autor" Content = ""> <title> bootstrap </title> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <Link rel = "Stylesheet" "" "" "" "" "" "" "" "" "" "" "" "" "" "les "" "" "" "" "" "" "" "" "" "" "" "" "" ""les" "" "" "" "" "" "" "" "" "" "" "" "" ""a En href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[if LT IE 9]> <script src = "../../ Docs-Assets/JS/IE8-Responsive-File-Warning.js"> </script> <! [Endif]-> <!-[If LT IE 9]> <Script src = "../../ DOCS-ASSETS/JS/IE8-RESPSIVE-FILE-WARNING.JS"> </SCRIPK> <! [Endifi]-------) 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/derpond.js/1.3.0/dert.min.js"> </script> <! [endif]-> <style> .bs-docs-home {background-color: #1b31b1; IMAGEN DE ACTUADO: URL (LINE.PNG); } </style> </head> <body> <div> <h1 style = "line-hight: 2em;"> </h1> <br /> <div> <div> </div> <div> <div> <h3> <strong> consulta de la puntuación de examen de habilidades vocacionales </strong> </h3> </div> <div> <div> <botin type = "botón de datos de datos =" alerta "alerta" alerta "" "alerta" alerta "" " aria-hidden = "true"> × </boton> <strong> nota! </strong> Los puntajes preguntados en este sitio son del sitio web oficial de 12333. Para más detalles, consulte el sitio web oficial </div> <formule rol = "form" name = "form1"> <div> <lelse For = "Idcard"> Ingrese su número ID </selabel> <Divi <Div> <put Type = "Text" Id = "Id =" Idcard "Idcard" "Idcard". PlaceHolder = "Número de id"> <span> <button type = "button" onClick = "form1.submit ();" > Consulta </botton> </span> </div> <div> <etiqueta for = "sujeto"> Ingrese el tema que desea consultar </label> <div> <input type = "text" id = "sujeto" name = "asunto" cuenta de posición = "Cuenta, sujeto en blanco significa consultar todos los asignaturas"> <Div> <button type = "button" toggle de datos = "descendá" href = "#" onClick = "$ ('#someth'). val ('operador de computadora');"> operador de computadora </a> </li> <li> <a href = "#" onClick = "$ ('#temas'). val ('diseño web');"> diseño web </a> </li> <li> <a href = "#"#"" onClick = "$ ('#sujeto'). Val ('multimedia');"> multimedia </a> </li> </ul> </div> </div> </form> <div> <button type = "botón" data-dismiss = "alerta" aria-hidden = "true"> × </boton> <strong> atención! </strong> no se encontraron resultados, por favor, verifique su identificación y comprobar su identificación y verificar el número de ID y verificar el número de ID. <div> <table cellPacing = "0" cellPadding = "0"> <tr> <th scope = "col"> <span style = "color: blanco"> sujetos </span> </th> <th scope = "col"> <span style = "color: white"> standing </span> </th> </tr> <td> operador de computador operator</td><td>excellent</td></tr><td>multimedia operator</td><td>good</td></tr><td>web design</td><td>failed</td></tr> </table></div> </div></div><div></div></div></div></div> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Lo anterior es el conocimiento relevante sobre el uso del marco Bootstrap para crear códigos de ejemplo de interfaz para las páginas de consulta que se le presentan. Espero que te sea útil. 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!