1: Introducción a Bootstrap
Boostrap es un marco de desarrollo front-end muy popular que mejora enormemente la eficiencia del desarrollo de los equipos front-end. Bootstrap completa los componentes de diseño CSS comunes y los complementos de JavaScript, lo que facilita el uso de los desarrolladores. Use Bootstrap para crear páginas muy bien receptivas y es compatible con los dispositivos móviles.
Dos: características de bootstrap
Proporcione un conjunto completo de complementos CSS, ricas hojas de estilo predefinidas, un conjunto de tablas de complemento JS basadas en JQuery. Sistema de eliminación de cuadrícula sensible flexible. Desarrollo de primera base móvil basado en menos y sass.
Tres: usa bootstrap
1. Paso 1:
Descargue el último bootstrap en http://www.bootcss.com/. Después de la descompresión, hay tres carpetas, que colocan CSS, JS y fuentes respectivamente. Hay una versión comprimida de los archivos CSS y JavaScript, y puede elegir una versión de acuerdo con sus necesidades. La versión sin comprimir se usa durante el desarrollo y la versión comprimida se usa durante el lanzamiento.
2. Visualización de código de plantilla fijo
<! DocType html> <html lang = "zh-cn"> <fead> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = borde, chrome = 1"> <!-iE = borde dice IE que usa el último motor para renderizar a render. name = "Viewport" Content = "Width = Device-width, inicial-escala = 1"> <!-Las tres metaetiquetas anteriores * deben * ser colocadas en el frente, y cualquier otro contenido * debe * seguirlas! -> <title> Bootstrap Template Style </title> <!-Introducting Bootstrap-> <Link href = "CSS/Bootstrap.min.css" rel = "Stylesheet"> <!-Introducir el marco HTML5 y responder para soportar IE8 e IE9. IE 8 requiere la cooperación de Responder.js para lograr el soporte para las consultas de los medios. Respuesta.js ya no se puede ejecutar en Archivo: // archivo de ruta: //-> <!-[si LT IE 9] significa que entra en vigencia en los navegadores a continuación IE9-> <!-[If LT IE 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script src = "// cdn.bootcss.com/dponding.js/1.4.2/ corresponspond.min.js"> </script> <! [Endif]-> </head> <body> <h1> ¡Hola, mundo! </h1> <!-cita el complemento jQuery en la parte inferior para lograr efectos dinámicos de bootstrap-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!--introducing bootsrp scripts-> <script src = "js/bootstrap.min.js"> </script> </body> </html>
3. Uso básico:
3.1 Sistema general de cuadrícula marco general-12
El núcleo de Bootstrap es un sistema de 12 carreras. El sistema de cuadrícula 12 divide el área de contenido de la página web en 12 copias de acuerdo con el ancho. Los desarrolladores web pueden combinarlo libremente en porciones, lo que facilita el diseño de la página web y hace que el diseño se vea ordenado y estandarizado.
Bootstarp proporciona un contenedor de estilo llamado contenedor. Container es un estilo automático y altamente adaptativo. El uso de .Container como el estilo DIV más externo del contenido de la página web puede implementar fácilmente el diseño de la página web de 12 cuadrículas. Además, este sistema de 12 cuadrículas se adapta al tamaño de la pantalla, y el .container ajustará automáticamente el ancho total y el ancho promedio de la cuadrícula de acuerdo con el tamaño de la pantalla.
COL-LG-N Máximo Ancho de columna 95px En el caso de> = 1200px píxeles, divide .Container12 igualmente con ancho 95px por porción. El ancho del resto es 100%
Col-MD-N Ancho máximo 78px; divide .container12 igualmente con> = 992px píxeles restantes 100%
COL-SM-N Máximo de la columna de la columna 60px en el caso de> = 768px píxeles, divide .Container12 igualmente con el resto de los casos 100%
El ancho de la columna COL-XS-N es igual al tamaño de la visión 12. Contenedor 12 igual a la pantalla de cualquier tamaño
3.2 Estilos básicos
(1) El estilo H1-H6 de Bootstrap ha sido cancelado en negrita, y los márgenes superiores e inferiores se redefinieron H1-H3 Margen-Top: 20px; margen-fondo-10px; H3-H6 Margen-Top: 10px; margen-fondo-10px;
(2) Definir cuatro estilos de alineación, a saber. Text-izquierda, .Text-Center, .Text-Right, .Text-Justify .Text-Justifique ambos extremos de las letras inglesas
(3) Bootstrap proporciona cinco estilos de color predeterminados, -Blue -Primario azul, éxito de éxito verde, INFORMACIÓN INFO ADVERTENCIA AGRADA DE ADVERTENCIA Naran
Componente de 3.3btn +btn-group
<botón tipo = "botón" class = "btn btn-primary"> botón de tecla </botón> componente de alerta <div class = "alert" class = "alerta de alerta"> ADVERTENCIA DE DISMERES </div>
Los componentes generales tienen cuatro tamaños: XS ultra pequeña, SM pequeño, LG ordinario y grande. Use el método es componente nombre de nombre <button type = "button" class = "btn btn-lg"> botón ultra-larga </boton> se pueden usar diferentes tipos de botones del mismo componente en combinación.
<botón type = "botón" class = "btn btn-primary btn-lg"> botón de tecla ultra-larga </botón> <!-btn-group-> <div> <boton> button> home </button> <botton> segunda página </botón> <botón> página 2 </botón> <botton> Última página </button> <div> <button type = "botón toggle =" desplegable ">" Button> Página 2 </botón> <botton> Last Page </Button> <div> <button type = "Button" Data-toggle = "desplegable"> "Button> Lista <Span> </span> </boton> <ul> <li> Lenovo </li> <li> asus </li> <li> Apple </li> </ul> </div>
3.4 Estilo de mesa table:
Agregue un elemento principal DIV al elemento de tabla, agregue class = "Tabla respondida" a este div. Cree una tabla correspondiente. Cuando el píxel de la ventana gráfica es inferior a 768px, aparecerá una barra de desplazamiento horizontal.
< adaptativo-> <div> <topla> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </table> </div>
3.5badge insignia
<
3.6 Barra de navegación
(1) barra de navegación cápsula
<ul> <li> <a href = "#"> Dynamic <span> 42 </span> </a> </li> <li> <a href = "#"> perfil </a> </li> <li> <a href = "#"> Mensaje privado <span> 3 </span> </a> </li> </ul>
(2) barra de navegación de etiqueta
< data-toggle = "tab"> avisos </a> </li> </ul> <div> <div id = "News1"> <ul> <li> Noticias de la empresa </li> </ul> </div> <divi = "News2"> <ul> <li> Noticias de la industria </li> <li> Industry News </li> </ul> </div> <iv Id = "News3" <ul> <l> <ul> <ul> AIMSE Anuncio </li> <li> Anuncio de aviso </li> <li> Anuncio de aviso </li> </ul> </div> </div>
3.7 Group de entrada
*
3.8 carrusel
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge, chrome = 1"> <meta name = "viewport" contenido = "width = dispositivo width, inicial-scale estilo </title> <link href = "../ css/bootstrap.min.css" rel = "Stylesheet"> <style> Body {Background: #EEE} .Item {posición: relativo; altura: 400px} .Item img {posición: relativo; Ancho: 100%; Altura: 400px} .Item P {posición: absoluto; Arriba: 40%; Ancho: 100%; Color: #fff; } .Item H1 {posición: absoluto; Arriba: 20%; Ancho: 100%; Color: #fff; text-align: Center} @Media (max-width: 768px) {.Slide {width: 100%}} </ystye> <!-[if Lt Ie 9]> <script src = "../ js/html5shiv.js"> </script> <script <script> <script src = "../ js/respond.min.js"> </script> <! [endif]-> <script src = "../ js/jquery.min.js"> </script> <script src = "../ js/bootstrap.min.js"> </script> </head> <body> <div> <ivi = "myCarousel" data "data" carousel " > <!-navegación de diapositivas-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-To = "1"> </ai> <li data-Target = "#mycarousel" data-slide-to = "1"> </li> <li> <li-Target#"#"#"myCarget#"#"" MyCarget "#" myCarget "#" myCarget " data-slide-to = "2"> </li> </ol> <div style = "altura: 400px"> <!-Primer diapositiva-> <div style = "altura: 400px"> <img data-holder-rendered = "true" src = "../ Isages/icon1.png"> <h1> Title Content </h1> <P> PARAGRAPH CONTITO </P> 1 </div> </div> <!-Segunda diapositiva-> <div> <img data-holder-rendered = "true" src = "../ images/icon2.png"> <div> title2 </div> </div> <!-tercera diapositiva-> <div> <img data-holder-rendered = "true" src = "../ imágenes/icon3.png"> <div> title3 </div> </div> <!-navegación live-right-> <a href = "#myCarousel" data-slide = "previo"> <span aria-hidden = "true"> </span> <span> anterior </ail> </a> <a href = "#myCarousel" dataSel "dataSelel" data-slide "Span aria-hidden = "true"> </span> <span> next </span> </a> </div> </div> <script> $ (function () {$ ('#myCarousel'). on ('slide.bs.carousel', function () {// alerta ("función de devolución de llamada");});}); </scrito> </body> </html>3.9 grupos de panel
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> bootstrap instancia de tabla (tab) plugin </title> <link rel = "stylesheet" href = "../ css/bootstrastrap.min.css"> <script src = "../ js/jQuery.min.js" src = "../ js/bootstrap.min.js"> </script> <body> <dividi = "panel-group"> <!-Panel Content Close-> <Div> <Viv> <hen id = "collapseone"> <div> Content de panel </div> </div> <!-Panel Content Open-> <div> <viv> <h4> <a data-toggle = "colapse" data-parent = "#panel-group" href = "#collapsetwo"> Título del panel </a> </h4> </div> <divid Contenido </div> </div> </div> </body>
3.10 Consulta de medios
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><title>Media query</title><style>div {width: 100%; altura: 200px; color de fondo: rojo;}/*cuando el ancho máximo sabroso es 980px, es decir, el estilo interno apalable <= 980px toma efecto*/@medios (max-width: 320px) {div {font-size: 10px; fondo: amarillo;}}} </syle> </head> <div> medios de medio Consulta </div> </body> <script> window.onresize = function () {var myDiv = document.getElementsByTagName ("div") [0]; mydiv.innerhtml = document.documentelement.clientwidth;} </script> </html>Cuatro: cosas a tener en cuenta
1. Container, col - - (trama), debe envolverse en un DIV separado y luego definir otros contenidos en él.
2. Si desea establecer la clase o ID que no se puede definir para la consulta de medios no se puede definir para el elemento y escribir la clase o ID de la definición col - (ráster) en un DIV,
Mediio es la forma de escribir errores de clase para definir consultas de medios <iv> aa </div>
La forma correcta de escribirlo es
<div> <div> aa </div> </div>
3. Si usa el contenedor para lograr la adaptación de altura, no puede agregar altura al elemento y debe establecer un desbordamiento oculto para su elemento principal.
4. Al configurar la posición de posición para el elemento, el ancho del elemento es 0. Si desea que el elemento se centre, debe agregar ancho: 100%; Text-Align: Center;
5. Cuando se usa la etiqueta de entrada, si se define el col - (ráster) para su clase principal, puede agregar control de forma a la entrada para establecer el tamaño de la entrada tan grande como la clase principal.