Bootstrap es como un marco frontal. Ya ha organizado muchos CSS, y puede llamarse directamente si se requiere para el desarrollo frontal. La dirección del sitio web es http://www.bootcss.com. El uso de bootstrap puede reducir el tiempo de diseño en CSS durante el desarrollo front-end
Debe usar Bootstrap para descargar los componentes en el sitio web oficial (haga clic para abrir el enlace). La versión Bootstrap utilizada en el entorno de producción (haga clic para abrir el enlace). Bootstrap3 no es compatible con 2. Se recomienda usar Bootstrap3 directamente de acuerdo con sus documentos de desarrollo.
Después de descomprimir bootstrap, copie las 3 carpetas obtenidas CSS, fuentes y JS al directorio del sitio. Si es el proyecto web JSP de Eclipse, colóquelos en la carpeta Webroot.
Después de eso, puede llamar a Bootstrap para modelar rápidamente la página frontal en el directorio de este sitio.
Sin embargo, vale la pena señalar que diferentes navegadores tienen diferentes explicaciones para Bootstrap. IE no puede leer algunos estilos, pero las funciones básicas no se ven afectadas y la página es un poco fea.
Aquí hay una comparación entre IE y Google Chrome en la misma página:
1. Objetivos básicos
Use Bootstrap para escribir una hermosa página de destino para PC, tableta y teléfono móvil.
Si se estira en la PC, varios elementos se adaptarán automáticamente a la pantalla.
Si abre tales páginas en su teléfono, se adaptará directamente a la pantalla del teléfono sin la necesidad de un ajuste automático del usuario.
2. Ideas básicas
El diseño de la página está diseñado de acuerdo con el estilo inherente de Bootstrap de la siguiente manera:
3. Proceso de producción
El código específico de toda la página es el siguiente, y el siguiente analizará las etiquetas una por una:
<! DocType html public "-// w3c // dtd html 4.01 Transitional // en"> <html> <fead> <title> Página de inicio de sesión </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1.0, user-scalable = no"> <link href = "css/cssss/boots". rel = "Stylesheet" Media = "Screen"> </head> <body> <div> <div> <table frame = "void"> <tr> <td> <img src = "images/img0.jpg"/> </td> <td> bienvenido. Inicie sesión primero. </td> </tr> </bable> </div> <div> <form de rol = "form" acción = "1.html" método = "post"> <iv> <belebel for = "username"> username: </label> <div> <input type = "text" name = "username" staceHOLDER = "userName" id = "usame"/> </biv> <biv> <iv> <iv> <iv> <slabut para la contraseña " Password: </label> <div> <input type = "contraseña" name = "contraseña" placeholder = "contraseña" id = "contraseña"/> </div> </div> <div> <div> <button type = "enviar"> iniciar sesión </boton> <sall> ¿no tiene una cuenta? <a href = "http://2.com"> Haga clic para registrarse </a> </small> </div> </div> </form> </div> </div> </div> </body> </html>
1. <vead> etiqueta
Primero, coloque las siguientes dos líneas de código en la etiqueta <cead>:
<Bead> <title> Página de inicio de sesión </title> <!-Requiere que la página se adapte automáticamente a la pantalla del navegador-> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1.0, user-scalable = no"> <!-declarar que quiero usar bootstrap-> <link href = "css/bootstrap.css" Rel "Rel" " Media = "pantalla"> </head>
2. <body> etiqueta
(1) Primero escriba <div> </div>, y luego coloque el código en él. La descripción básica es la siguiente:
(2) <div> etiqueta
<Viv> <!-Establezca la tabla para diseñar esta capa CSS. No es fácil agregar alineación = "izquierda" a la etiqueta IMG. La imagen se desbordará a la capa-> <!-Igual que <table>-> <table frame = "void"> <tr> <td> <img src = "imágenes/img0.jpg"/> </td> <td> bienvenido. Inicie sesión primero. </td> </tr> </table> </div>
(3) En la etiqueta <div>, primero coloque un elemento de formulario rol de formulario = "form" acción = "1.html" método = "post">. En comparación con los formularios HTML ordinarios, esta forma tiene más atributos de clase y atributos de roles. No hay necesidad de decir mucho sobre el atributo de clase. Si el valor es formado, incluso si el formulario tiene suficiente ubicación, la etiqueta externa y el cuadro de entrada no estarán en la misma línea. Si el valor es el formulario actual-horizontal, entonces es como se muestra en el efecto de la figura. El atributo de roles no muestra ningún efecto, y solo se agrega de acuerdo con el documento chino de Bootstrap.
A continuación, los elementos en cada formulario son los siguientes:
<div> <form role = "form" action = "1.html" método = "post"> <!-La etiqueta externa de cada propiedad forma una tupla de grupo de formulario con el cuadro de entrada-> <div> <!-El siguiente atributo de clase es para que se estire automáticamente de acuerdo con el tamaño de la pantalla-> <label de la etiqueta para = "UserName"> UserName: </etiqueta> <sciR> <!-la placación aquí, la placa para que sea la pantalla de la pantalla. Cualquier cosa, que por supuesto no puede explicarse en IE8. No puedo ver ninguna función de ID, se acaba de agregar de acuerdo con los requisitos de los documentos chinos de Bootstrap -> <input type = "text" name = "username" placeholder = "username" id = "username"/> </div> </div> <div> <lelebel for = "contraseña"> contraseña: </etiqueta> <div> <input type = "name de contraseña =" contraseña "Passionshole =" contraseña "contraseña" contraseña " </div> <div> <!-El botón aquí es diferente del botón de envío ordinario HTML, pero no afecta el envío del formulario-> <button type = "enviar"> Iniciar sesión </botón> <!-<Small> La etiqueta asegura que este texto sea la misma línea que el botón Subsit-> <Small> No cuenta? <a href = "http://2.com"> Haga clic para registrarse </a> </small> </div> </div> </form> </div> </div>
En este punto, se ha completado el desarrollo de esta página.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.