Introducción a Bootstrap
Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
Componente de miniatura
Las miniaturas más utilizadas en los sitios web es la página de la lista de productos, que muestra varias imágenes en una línea, y algunas tienen títulos, descripción de contenido, botones y otra información debajo de las imágenes.
El marco Bootstrap separa esta parte en un componente del módulo, y se implementa a través del nombre de clase. Thumbnail y el sistema de cuadrícula Bootstrap. A continuación se muestran los archivos del código fuente de diferentes versiones del componente de miniatura Bootstrap:
Menos: tbumbnails.less
Sass: _tbumbnails.scss
Principio de implementación:
La implementación del diseño se basa principalmente en el sistema de cuadrícula del marco Bootstrap. El siguiente es el estilo correspondiente a la miniatura
.Thumbnail {display: block; relleno: 4px; margen-bottom: 20px; línea-height: 1.42857143; color de fondo: #fff; border: 1px sólido #ddd; border-radius: 4px; -webkit-transition: todas las .2s-enut; transición: todo .2S enut;}. img {margin-derecho: auto; margin-left: auto;} A.Thumbnail: Hover, A.Thumbnail: Focus, A.Thumbnail.Active {Border-Color: #428BCA;}. Miniatura .Caption {Padding: 9px; color: #333;}Echemos un vistazo a un ejemplo:
<Div> <Viv> <A HERF = "#"> <img src = "img/1.jpg" style = "Height: 180px; width: 100%; Display: block"> </a> </div> <div> <a herf = "#"> <img src = "img/2.jpg" style = "altura: 180px; width: 100%; visual Bloque "> </a> </div> <div> <a herf ="#"> <img src =" img/3.jpg "style =" altura: 180px; ancho: 100%; pantalla: bloque "> </a> </div> <div> <hiv> <a herf ="#"> <img src =" img/4.jpg "estilo =" altura: 180px; bloque "> </a> </div> </div>
Los efectos son los siguientes:
Puede verlo utilizando la vista de diseño receptivo de Firefox
Sobre la base de solo miniaturas, agregue un contenedor DIV con el nombre de la clase. Caption y coloque otros contenidos en este contenedor, como: Título, Descripción del texto, botones, etc.
<div> <div> <div> <a href = "#"> <img src = "img/1.jpg" style = "altura: 180px; ancho: 100%; visual Aquí está el contenido de descripción aquí está el contenido de descripción Aquí está el contenido de descripción aquí es el contenido de descripción Aquí está el contenido de descripción </p> <a href = "#"> Comience a aprender </a> </div> <div> <a href = "#"> <img src = "img/2.jpg" estilo = "altura: 180px; width: 100%; visual 2222 </h3> <p> Aquí está el contenido de descripción 2222Here es el contenido de descripción 2222Here es la descripción contenido 2222Here es el contenido de descripción 2222He the Descripción Content 2222He The Descripción Contenido 2222 </p> <a href = "#"> Comience a aprender </a> </div> <div> <a href = "#"> <img src/"iMg/" iMg/". estilo = "altura: 180px; ancho: 100%; pantalla: bloque"> </a> <div> <h3> Aquí está el título gráfico 3333 </h3> <p> Aquí está la descripción contenido 3333 Aquí está la descripción contenido 3333 Aquí está el contenido descripción 3333 aquí está el contenido de descripción 222 aquí es el contenido descripción 3333 </p> <a href = "#"#"#"#"#"#"#"#" aprender </a> </div> <div> <a href = "#"> <img src = "img/4.jpg" style = "altura: 180px; ancho: 100%; visual 4444 El contenido de descripción es el contenido de la descripción 4444 esta descripción Contenido 4444 Esthere es el contenido de descripción 4444 </p> <a href = "#"> Comience a aprender </a> <a href = "#"> estudio </a> </div> </div> </div> </div>
Componente de caja de alerta
El marco Bootstrap utiliza el estilo .alert para lograr el efecto de la caja de advertencia. De forma predeterminada, Bootstrap proporciona cuatro efectos diferentes de la caja de advertencia:
1. Cadena de advertencia de éxito: pide al usuario que tenga éxito en la operación, agregue el estilo .alert-success sobre la base de .alert;
2. Cuadro de advertencia de información: proporcione a los usuarios información rápida y agregue el estilo .alert-Info sobre la base de .alert;
3. Caja de advertencia de advertencia: proporcione información de advertencia y agregue el estilo de advertencia.
4. Cuadro de advertencia de error: solicita al usuario errores en funcionamiento y agregue el estilo .alert-Danger sobre la base de .alert;
Entre ellos, el estilo .alert establece principalmente el color de fondo, el borde, la esquina redondeada y el color de texto del cuadro de advertencia. Además, el procesamiento de estilo se realiza en H4, P, UL y .alert-Link. El siguiente es el código fuente CSS:
.alert {Padding: 15px; margin-bottom: 20px; border: 1px sólido transparente; border-radio: 4px;}. alerta h4 {margin-top: 0; color: inherit;}. alert .alert-link {font-weight: bold;}. alert> p, .alert> ul {margin-bottom: 0;}. 5px;}. Alert-success {color: #3C763D; Color de fondo: #dff0d8; border-color: #d6e9c6;}. Alert-success hr {border-top-color: #c9e2b3;}. Alert-tesor .alert-link {color: #2b542c;}. Alerta de alerta {color: alerta {color: alerta {color: alerta: #31708F; Color de fondo: #d9Edf7; border-color: #bce8f1;}. Alerta-info hr {border-top-color: #a6e1ec;}. Alert-info .alert-link {color: #245269;}. #faeBcc;}. Alerta de alerta hr {border-top-color: #f7e1b5;}. alerta-warning .alert-link {color: #66512c;}. alert-danger {color: #a94442; fondo de fondo: #f2dede; border-color: #ebccd1;}.} #E4B9C0;}. Alert-Danger .alert-Link {Color: #843534;}Por ejemplo:
<div rol = "alerta"> ¡Felicitaciones por su operación exitosa! </div> <div role = "alerta"> Ingrese la contraseña correcta </div> <div role = "alerta"> que ha fallado dos veces, y hay otra última oportunidad </div> <div role = "alerta"> ¡Lo sentimos, su contraseña se ingresó incorrectamente! </div>
Caja de alerta cerrable
1. Agregar un nombre de clase .alert-DISMISSable al contenedor del cuadro de advertencia predeterminado.
2. Agregue .clar a la etiqueta del botón para implementar el botón de cierre del cuadro de advertencia
3. Asegúrese de que el atributo personalizado data-dismiss = "alerta" esté configurado en el elemento de botón Cerrar (cerrar el cuadro de alerta requiere que JS detecte el atributo, controlando así el cierre del cuadro de alerta)
ejemplo:
<div role = "alerta"> <botón tipo = "botón" data-dismiss = "alerta"> × </botón> ¡Felicitaciones por su operación exitosa! </div> <divrole = "alerta"> <button type = "button" data-dismiss = "alerta"> × </botón> Ingrese la contraseña correcta </div> <div role = "alerta"> <button type = "button" data-dismiss = "alerta"> × </botón> ha fallado la operación dos veces, y hay una última oportunidad </div> <divits-rol = "alerta" <button type = "botón" Data-Dismiss = "Alert"> × </boton> Lo siento, ¡su contraseña se ingresó incorrectamente! </div>
Enlace para alerta
A veces debe agregar un enlace al cuadro de advertencia para decirle al usuario que salte a una nueva página. El enlace al cuadro de advertencia se resalta en el marco Bootstrap. Agregue un nombre de clase como .alert-link al enlace agregado al cuadro de advertencia. A continuación se muestra el estilo CSS de alerta de alerta
.alert .alert-link {font-weight: bold;}/*El color de texto del enlace en diferentes tipos de cuadros de advertencia*/. Alert-success .alert-link {color: #2b542c;}. Alert-Info .Alert-Link {Color: #245269;}. .alert-link {color: #843534;}ejemplo:
<div role = "alerta"> <strong> bien hecho! </strong> que lees con éxito <a href = "#"> Este importante mensaje de alerta </a> </div> <divs role = "alerta"> <strong> bien hecho! </strong> que hayas leído con éxito <a href = "#"> <strong> este importante mensaje de alerta </aa> </div> <Div role = "alerta"> <strong> bien hecho! <Strong> Strong. href = "#"> Este importante mensaje de alerta </a> </div> <div role = "alerta"> <strong> bien hecho! </strong> leíste con éxito <a href = "#"> este importante mensaje de alerta </a> </div> <div role = "alerta"> <strong> bien hecho! </strong> lee con éxito <a href = "#"> este mensaje de alerta importante </a> </divivado role = "alerta"> <strong> bien hecho! </strong> leíste con éxito <a href = "#"> Este importante mensaje de alerta </a> </div>
Presentaré mucho sobre el componente de miniatura Bootstrap y el componente de caja de advertencia que este artículo le presenta. ¡Espero que te sea útil!