Bootstrap es un conjunto de herramientas HTML 5 basado en HTML y HTML basado en HTML5 y HTML basado en HTML5 y CSS3. Tiene una curva de aprendizaje amigable, excelente compatibilidad, diseño receptivo, 12 cuadrículas de cuadrícula, documentación del asistente de estilo, complemento jQuery personalizado, biblioteca de clases completa, basada en menos y otras características. Bootstrap hace que el desarrollo web sea más rápido y más fácil.
1. Descarga de Bootstrap
Sitio web oficial: http://getbootstrap.com/; Comenzando con principiantes: http://getbootstrap.com/getting-started/
Podemos descargar el código fuente Bootstrap y Bootstrap desde el sitio web oficial. Si no desea descargar, también puede usar el CDN proporcionado por Bootstrap.
2. Estructura de archivo de Bootstrap
oreja/
├── CSS/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── Bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── JS/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└iqute Fonts/
├── Glyphons-Halflings-Regular.Eot
├── Glyphons-Halflings-Regular.svg
├── Glyphons-Halflings-Regular.ttf
├── Glyphons-Halflings-Regular.Woff
└── Glyphics-Halflings-Regular.Woff2
3. Plantilla estándar HTML de Bootstrap
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <!-- Run the latest rendering mode in IE --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Initialize mobile browsing display, width=device-width width is equal to the width of the mobile device, inicial a escala = 1 Establezca la escala de escala-> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1"> <title> La plantilla estándar HTML de Bootstrap </title> <!-Introduce el CSS central de Bootstrap-> <Link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-Sus propios archivos de estilo-> <link href = "css/su Style.css" rel = "Stylesheet"> <! debajo de los navegadores. If you don't need it, you can remove it --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src = "https://oss.maxcdn.com/libs/rponpond.js/1.4.2/ corresponspes Primero debe llamar a jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-Incluyendo todos los complementos JS para complementos Bootstrap o JS que se pueden usar según sea necesario-> <Script Script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>
4. Título de Bootstrap
Al igual que las páginas HTML ordinarias, Bootstrap define los títulos que usan las etiquetas H1 a H6, pero Bootstrap anula su estilo predeterminado para que el efecto que muestra en todos los navegadores sea el mismo. Las reglas específicas de la definición se muestran en la siguiente tabla:
< mismo estilo -> <div> Título 1 </div> <div> Título 2 </div> <div> Título 3 </div>
Nota: Las alturas de la línea del subtítulo son 1, Font-Weight no es audaz, el color es gris (#999); Los subtítulos de H1 ~ H3 son el 65% del título, y los subtítulos de H4 ~ H6 son el 75% del título; Consulte las líneas 407 ~ 443 en el archivo bootstrap.css para obtener más detalles.
5. Contenido de Bootstrap
1) enfatizar el contenido
En proyectos reales, para algunos textos importantes, las partes que se espera que se resalten se tratarán en otro estilo. Bootstrap también hizo un procesamiento ligero en esta parte.
Al agregar el nombre de la clase ". Lead" para resaltar un párrafo P, su función es aumentar el tamaño de fuente de texto, en negrita el texto, y también lidiar con la altura y el margen de la línea en consecuencia. El uso es el siguiente:
<p> Texto normal </p>
<p> Texto de la Emperatriz </p>
2) Expresar énfasis a través del color
Por ejemplo:
<!-El texto normal a continuación es Brown->
<p> Texto normal </p>
3) Bold y cursiva
Bold se usa para usar la etiqueta B-etiquetada o fuerte; La cursiva se usa para usar EM-Label o I-Label.
<!-Bold-> <p> Texto normal <b> Bold </b> Texto normal </p> <p> Texto normal <strong> Bold </strong> Texto normal </p> <!-Italic-> <p> Texto normal <em> italic </em> Texto normal </p> <p> Texto normal <i> italic </i> Texto normal </p> Normal Text </p>
4) Alineación de texto
Bootstrap controla el estilo de texto de alineación definiendo cuatro nombres de clase:
<p> Estoy a la izquierda </p> <p> Estoy en el centro </p> <p> Estoy a la derecha </p> <p> Estoy alineado en ambos extremos </p>
6. Lista de Bootstrap
Bootstrap proporciona seis formularios de listado de acuerdo con su uso habitual: lista ordinaria, lista ordenada, lista de descripción de puntos, lista en línea, lista de definiciones y lista de definición horizontal.
1) Lista normal
<!-Lista normal-> <ul> <li> Lista normal 1 </li> <li> Lista normal 2 </li> </ul>
2) Lista ordenada
<
3) Vaya a la lista
Agregue un nombre de clase ". List-Instyled" a la lista desordenada, para que se pueda eliminar el estilo de lista predeterminado.
<Ol> <li> Lista ordenada 1 </li> <li> Lista ordenada 2 </li> </ol>
4) Lista en línea (nacida para hacer navegación horizontal)
Al igual que la lista destinada, la lista en línea se implementa agregando el nombre de clase ".list-inline", intercambie la lista vertical con una lista horizontal y elimine las balas (números) para mantener la pantalla horizontal.
<ul> <li> Entrada de barra de navegación 1 </li> <li> Entrada de barra de navegación 2 </li> </ul>
5) Lista de definición
La lista de definición de Bootstrap simplemente ajusta el espacio de línea, los márgenes y los efectos de audacia de la fuente.
<dl> <dt> beijing </dt> <dd> La capital de China. </dd> <dt> shanghai </dt> <dd> National Central City, Megacity. </dd> </dl>
6) Lista de definición horizontal
La lista de definición horizontal es como una lista en línea. Bootstrap puede agregar el nombre de clase ".DL-Horizontal" a la etiqueta DL para lograr el efecto de visualización horizontal.
<dl> <dt> beijing </dt> <dd> La capital de China. </dd> <dt> shanghai </dt> <dd> National Central City, Megacity. </dd> </dl>
7. Table de mochila
Bootstrap proporciona tablas con 1 estilo básico y 4 estilos adicionales y una tabla receptiva. Los detalles son los siguientes:
<! Doctype html> <html> <Head> <Meta Charset = "Utf-8"> <title> Table básico </title> <Link rel = "Stylesheet" href = "http://netdna. Tabla </h3> <!-Código fuente principal para ver Bootstrap.css File Line 1402 ~ Línea 1441-> <able> <thead> <tr> <th> Título de la tabla </th> <th> Título de la tabla </th> <th> Título de la tabla </th> </tr> </thead> <tbody> <tr> <td> Table Cell </td> <TD> TITAR </th> TABLE Celda </td> </tr> <tr> <tr> <td> Table Cell </td> <td> Table Cell </td> <td> Table Cell </td> </tr> </tbody> </table> <h3> Zebra Crossing Table </h3> <!-Vista de código principal de código principal Título </th> <th> Título de la tabla </th> <th> Título de la tabla </th> </tr> </thead> <tbody> <tr> <td> Table Cell </td> <td> Table Cell </td> <td> Table Cell </td> </tr> </tbody> </tbody> <tbody> <tr> <tr> <td> TABE Celda </td> <td> table celda </td> <td> table celda </td> </tr> <tr> <td> table cell </td> <td> table cell </td> <td> table cell </td> </tr> </tbody> </table> <h3> tabla con border </h3> <!- código fuente principal para ver bootstrap.cs ~ ~ 550 ~ 55050505050505050505050505050505050505050505050505050505050505050505050 1464-> <able> <thead> <tr> <th> Título de la tabla </th> <th> Título de la tabla </th> <th> Título de la tabla </th> </tr> </thead> <tbody> <tr> <td> Table Cell </td> <td> Table Cell Cell </td> </tr> </tr> </bbody> </tbody> <tr> <tr> <TD> TABLE TABLE Celda </td> </tr> <tr> <tr> <td> Table Cell </td> <td> Table Cell </td> </tr> </tbody> </table> <h3> El mouse suspende la tabla resaltada </h3> <!-Código fuente principal para ver la línea de archivo bootstrap.css 1469 ~ línea 1472-> <table> <thad> <th> TABLE <t> Título </th> <th> Título de la tabla </th> <th> Título de la tabla </th> </tr> </tbody> <tbody> <tr> <tr> <td> Table Cell </td> <td> Table Cell </td> <td> Table Cell </td> </tr> <tr> <tr> <tr> <TD> Celular de la tabla </td> <td> TABLE CELLO </td> </tr> </th/tbody> <h3> Table compacta </h3> <!-El código fuente principal ve el archivo bootstrap.css línea 1442 ~ línea 1449-> <table> <thead> <tr> <th> table title </th> <th> table title </th> <th> table title </th> </tr> <thead> <tbody> <ttr> <ttr> <td> cells de la tabla </th> table </th> </tr> </thead> <tbody> <ttr> <ttr> <td> cells de la tabla </th> torte Celda </td> <td> Table Cell </td> </tr> <tr> <td> Table Cell </td> <td> Table Cell </td> <td> Table Cell </td> </tr> </tbody> </table> <h3> Tabla receptiva </h3> <!-Bootstrap proporciona un contenedor con el nombre de clase .Table-Respsonsive. La tabla colocada en este contenedor tiene un efecto receptivo-> <div> <topla> <thead> <tr> <th> Título de la tabla </th> <th> Título de la tabla </th> <th> Título de la tabla </th> </tr> </thead> <tbody> <ttr> <ttr> <td> Table Cell </td> <TD> TABLE CELL </TD> <TD> TABLE </ttr> </tr> <tr> Celda </td> <td> Table Cell </td> </tr> </tbody> </table> </div> </body> </html>
Esta parte del código contiene las tablas de uso común en Bootstrap, y las representaciones son las siguientes:
Bootstrap también proporciona cinco nombres de clase diferentes para el elemento de fila TR de la tabla (para el código fuente correspondiente, verifique la línea 1484 a la línea 1583 en el archivo bootstrap.css). Cada nombre de clase controla los diferentes colores de fondo de las filas. La descripción específica se muestra en la siguiente tabla:
Es muy simple de usar. Solo necesita agregar el nombre de clase correspondiente de la tabla anterior al elemento para lograr el efecto:
<tr> <td>… </td> </tr>
Aviso:
1. Para lograr un estado suspendido, debe agregar la clase de balance de tabla a la etiqueta <table>.
2. Además de ". Active", cuando se usa los otros cuatro nombres de clase y ". Tabla de tensión", Bootstrap también realiza la configuración de estilo correspondiente para estos estilos en el estado flotante. Por lo tanto, si necesita agregar otros estilos de color al elemento TR, también debe hacer los ajustes correspondientes en la tabla ".table-hover".
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Serie de artículos:
La primera vez que entré en contacto con el sistema mágico de cuadrícula Bootstrap //www.vevb.com/article/89333.htm
La primera vez que entré en contacto con la forma mágica de bootstrap //www.vevb.com/article/89330.htm
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.