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.
Puntos clave para el aprendizaje:
1. Componente de icono pequeño
2. Componente del menú desplegable
3. Componente de grupo de botones
4. Menú desplegable al estilo de los botones
En esta lección, aprenderemos principalmente sobre las tres funciones de componentes de Bootstrap: componente de icono pequeño, componente de menú desplegable y varios componentes de botones.
uno. Pequeño componente de icono
Bootstrap proporciona 263 iconos pequeños gratuitos (contados dos veces). Para obtener más detalles, consulte el enlace de componente del sitio web oficial chino:
http://v3.bootcss.com/components/#glyphicons.
Algunos íconos son los siguientes:
Puede usar las etiquetas <i> o <span> para usar, como sigue:
// Use un pequeño icono <i> </i> <span> </span> // también puede combinar botones con <boton> <span> </span> </boton> <botón> <botón> <span> </span> </boton> <botton> <botton> </span> </button>
dos. Componente de menú desplegable
El menú desplegable es hacer clic en un elemento o botón para activar la lista oculta que se mostrará.
// formato básico <div> <botón data data-toggle = "desplegable"> menú desplegable <span> </span> </boton> <ul> <li> <a href = "#"> inicio </a> </li> <li> <a href = "#"> información </a> </li> <li> <a href = "#"> producto </a> </li> <A href </a> </li> </ul> </div>
Los botones y los menús deben envolverse en un contenedor .dropdown, y como el botón del elemento hecho hecho, data-toggle = "desplegable" para ser configurado para ser efectivo. Para la sección del menú, la configuración puede ocultar automáticamente y agregar estilos fijos. Establezca la flecha para que esté hacia arriba o hacia abajo.
// Configurar para activar <div> // Los elementos del menú están alineados a la derecha, el valor predeterminado es desplegable-menu---left <ul> // Establezca el título del menú, no agregue Hyperlinks <li> Sitio web Navigation </li> // Establecer la línea de división del menú <Li> </li> // Establezca el menú <DivIs: por defecto <li> <a Href = "#"#"#" Menú a mostrar <div> de forma predeterminada
tres. Componente de grupo de botones
Un grupo de botones es el efecto único de integrar múltiples botones en un contenedor.
// formato básico <div> <button type = "button"> a la izquierda </boton> <button type = "button"> Middle </boton> <button type = "Botton"> Derecho </botón> </div> // Integrar múltiples botones para facilitar la administración <div> <div> <button type = "botón"> izquierda </botón> <button type = "botón"> derecho </botón> </div> <div> <botón de botón de botón izquierdo </botón> <button type = "botón"> derecho </botón> </div> <Div> <botón <button <button <button izquierdo </botón> <button> <button type = "Button" type = "Button"> </boton> <boton> <button type = "Button"> </boton> <botte> <button type = "Button"> </boton> <botte> <button type = "botón de botón"> </botón> <botón <button type = "botón"> </botón> <botón <button type = "botón"> </botón> </div> </div> // Establecer el button de button <div> BTN-GROUP-SM "> <Div> // Nest a un grupo, como el menú desplegable <Div> <Button type =" Button "> Left </Button> <Button type =" Button "> Middle </Button> <Button type =" Button "> Derecho </botón> <div> href = "#"> home </a> </li> <li> <a href = "#"> información </a> </li> <li> <a href = "#"> producto </a> </li> <li> <a href = "#"> Acerca de </a> </li> </ul> </div> </div>
Nota: Esto no se implementa en <Viv>. A través del análisis del código fuente, sabe que el nido en sí tiene posicionamiento, por lo que no necesita configurarlo. Y solo agregue una esquina redondeada más a la derecha.
// Establezca el grupo de botones organizado verticalmente <Viv> // Establezca el grupo de botones alineado en ambos extremos, use la etiqueta <a> <iv> <div> type = "botón"> izquierda </a> <a type = "botón"> Middle </a> <a type = "Botón"> Botón derecho </a> </div> // Si necesita usar el <botón de botón, debe agrupar cada botón <div> <div> type = "Button"> Left </Button> </div> <div> <button type = "botón"> derecho </botón> </div>
Cuatro. Menú desplegable al estilo de botones
Este menú desplegable es en realidad el mismo que el segundo punto de conocimiento, excepto que esto está en el grupo y no hay necesidad de declarar class = "desplegable".
// Menú desplegable del botón de grupo <Div> <Botton type = "Button" Data-Toggle = "Dropdown"> menú desplegable <span> </span> </boton> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> información </a> </li> <li> href = "#"> sobre </a> </li> </ul> </div> // Menú desplegable del botón dividido <div> <button type = "botón"> menú desplegable </botón> <botón type = "botón" data-toggle = "desplegable"> <span> </span> </botte> <ul> <li> <a href = "#"> casa </a> </li> <s> <a li> <a. href = "#"> información </a> </li> <li> <a href = "#"> Producto </a> </li> <li> <a href = "#"> Acerca de </a> </li> </ul> </div> // pop-up <div>
El contenido de arriba es el componente del icono del botón de menú del componente Bootstrap introducido por el editor. ¡Espero que sea útil para todos!