El mayor beneficio de Bootstrap para los desarrolladores es su diseño receptivo y algunos estilos excelentes.
Ahora introduciré algunos pasos y algunas cosas de uso común para usar Bootstrap.
1. Escribe el encabezado
<HEAD> <meta charset = "utf-8"> <!-Para hacer que use el último modo de representación, agregue esta etiqueta-> <meta http-oquiv = "x-ua compatible" content = "ie = borde"> <!-para el diseño receptivo, primero obtenga el ancho físico del dispositivo, establece la página web de acuerdo con el dispositivo físico del dispositivo, y la escala de meta: 1: 1-MetA: 1--MetA: <-MetA: MetA: <-MetA: MetA: <-MetA: <-MetA: MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <-MetA: <Sciente: name = "Viewport" Content = "Width = Device-width, inicial-scale = 1"> <title> LearnBootstrap </title> <!-Consulte el archivo directamente-> <link Rel = "Stylesheet" type = "text/css" href = "css/bootstrap.min.css"> < href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-Para admitir IE9 o menos, agregue estos-> <!-[si LT IE 9]> <!-Deje que admite etiquetas H5-> <Script Script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <!-Deje que admita las consultas de los medios, es decir, receptive-> <script src = "https://oss.maxcdn.com/rponder/1.4.2/rponder.min.js" <!-[endif]-> </head>
2. Introducir JS
Esto se puede escribir en el cuerpo
<!- JQuery File. Asegúrese de introducir-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- El último archivo de javascript de bootstrap Core-> <script src =" // cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js "
3. Use la clase de contenedor
La clase de contenedores es una clase DIV comúnmente utilizada
Utilizar principalmente la función de centrado
<div> hola </div>
4. Use un sistema rasterizado
El sistema rasterizado es un sistema de diseño muy utilizado para bootstrap
Uso simple de la siguiente manera
<Viv> <!-XS significa en el teléfono, SM significa en la tableta y MD significa en el escritorio. Los siguientes números representan cuántas columnas están ocupadas. The full screen is 12 columns--> <!--The content exceeds the height of the grid, and the height will be increased, and the width will not be increased --> <!--offset means how many columns will be moved to the right--> <div>.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-4 </div> </div> <div> <!-Push se mueve hacia atrás, Pull se mueve hacia adelante-> <div> .Col-XS-12 .Col-SM-6 .Col-MD-8 </div> <div> .Col-XS-6 .Col-Md-4 </div> </iv> </iv>
Puede ver que el sistema rasterizado puede ajustar diferentes anchos de acuerdo con diferentes dispositivos.
5. Use el formulario
<div> <! Cuando el mouse pasa a través de la fila de Tbody, el color es más oscuro y la tabla se compacta-> <able> <thead> <tr> <th> Título de la tabla </th> <th> Título de la tabla </th> <th> Título de la tabla </th> <th> Título de la tabla </th> </tr> </thead> <tbody> < content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> </tr> * <th> contenido de tabla </th> <th> contenido de tabla </th> <th> contenido de tabla </th> <th> contenido de tabla </th> <th> contenido de tabla </th> <th> contenido de tabla </th> <th> contenido de tabla </th> <th> contenido de tabla </th> </tr> </tbody> </table> </div> </iv>
Si desea cambiar el color de una cuadrícula determinada, puede agregar clases como TR en la etiqueta TH
6. Use formularios
El uso más básico es el siguiente
<div> <form> <!-parte del elemento es un diseño principal del grupo de formulario, con etiqueta e entrada-> <div> <!-etiqueta para correspondiente a la identificación de entrada-> <etiqueta for = "ejemplo for = "EjemploInputPassword1"> Password </label> <input type = "Password" id = "EjemploInputPassword1" PlaceHolder = "Password"> </ Div> <Stiv> <Label for = "EjemploinputFile"> Input de archivo </etiqueta> <input type = "archivo" id = "Ejemplo de Ejemplo"> <!-Ayuda-> <P> Ejemplo de archivo Ayuda Ayuda Ayuda aquí. <P> </p> </p> iv bittin <tivin <tiving <labin <labin de Ejemplo " type = "CheckBox"> Compruébione </label> </div> <botón type = "enviar"> Enviar </botón> </form> </div>
Si establece la clase de formulario en forma en línea, todos los elementos se mostrarán en la misma línea
Si establece la clase de formulario en formulario-horizontal, cada grupo de formulario mostrará una línea, pero debe establecer el ancho usted mismo
como
<Viv> <!-Deje que cada grupo de formulario muestre una línea, pero cada niño de grupo de formulario debe especificar el ancho-> <form> <div> <etiqueta for = "emai"> correo electrónico </seleting> <!-Group de entrada deja que las indicaciones y los suplementos se muestren en la misma línea-> <div> <put type = "correo electrónico" standingholder = "Id" id = "emai"> </div> </iv> <div> <divs> <divir for = "passwor"> contraseña </label> <div> <input type = "Password" PlaceHolder = "Password" id = "Passwor"> </div> </div> <button type = "Envir"> Summit </boton> </form> </div>
Por lo general, cuando registramos una cuenta, si la información es incorrecta o correcta, lo indicará junto a ella, y el color del cuadro de entrada será diferente.
Bootstrap nos proporciona esta función muy práctica
<div> <form> <!-Agregar dos elementos deben agregarse a la clase del Div-Div-<!-Estado de éxito-> <div> <etiqueta for = "inputSuccess2"> Entrada con éxito </label> <input type = "text" id = "inputSuccess2" aria-descretedby = "inputsScess2Status"> <! < aria-hidden = "true"> </span> <span id = "inputWarning2Status"> (advertencia) </span> </div> <!-Error Estado-> <divs> <etiqueta for = "inputError2"> Enume con error </etiqueta> <input type = "text" id = "inputError2" ARIA-descrito por inputerrer2status "> <span aria-hiDDEDDENDDEDDEDEDDEDEDDEDEDDEDEDDEDEDDEDEDDEDEDDEDEDENDEDDEDEDENDEDDEDENDEDDEDENDEDDEDENDEDENDEDDEDENDEDDEDENDEDDEDEDENDEN" <span id = "inputError2status"> (error) </span> </div> </form> </div>
7. Botón
Los botones son esenciales
< ADVERTENCIA </boton> <!-Red Background-> <Button type = "Button"> (Danger) Danger </boton>
También puede agregar dimensiones a la clase
<botón type = "botón"> (botón grande) botón grande </botón> <botón type = "botón"> (tamaño predeterminado) botón predeterminado </botón> <botón type = "botón"> (botón pequeño) botón pequeño </botón> <button type = "botón"> (botón pequeño) extra pequeño botón </botón>
Los anteriores son los pasos y el uso común de bootstrap
Después de usar este marco, no solo ha aumentado la velocidad de desarrollo, sino que la calidad también ha mejorado.
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.