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 ruta
2. Componentes de paginación
3. Componentes de etiqueta
4. Componentes de insignia
En esta lección, aprenderemos principalmente sobre las cuatro funciones de componentes de Bootstrap: componente de ruta, componente de paginación, componente de etiqueta y componente de insignia.
uno. Componente de ruta
El componente de la ruta también se llama navegación de breadrumb.
// Breadcrumb Navigation <Ol> <li> <a href = "#"> Home </a> </li> <li> <a href = "#"> Lista de productos </a> </li> <li> Versión coreana del suéter de cachemir 2015 </li> </ol>
dos. Componentes de paginación
El componente de paginación puede proporcionar funcionalidad con las páginas de visualización.
// Pagination predeterminada <ul> <li> <a href = "#"> «</a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> 2 </a> </li> <li> <a href ="#"> 3 </a> </li> <hi <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> </ul> // Preferencias y deshabilitados <li> <a href = "#"> 1 </a> </li> <li> <a href = "#"> 2 </a> </a> // sets, cuatro lg, valor predeterminado, sm y xs. efectos <ul> <li> <a href = "#"> 1 </a> </li> </li> // Establezca tamaños, cuatro lg, predeterminado, sm y xs <ul> // efectos de giro de la página <ul> <li> <a href = "#"> página anterior </a> </li> <li> <a href = "#"> Página siguiente </a> </li> </ul> <ul> <li> <a href = "#"> Página anterior </a> </li> </ul> // Deshabilitar la página Elemento de giro <li> <a href = "#"> Página anterior </a> </li>
tres. Etiqueta
// etiquetas con la etiqueta <h3> etiqueta <span> nueva </span> </h3> // etiquetas de diferentes tonos <h3> etiquetas <span> nuevas </span> </h3> <h3> etiquetas <span> new </span> </h3> <h3> etiquetas <span> new </h3> <h3> <h3> <span> nuevo </span> </h3>
Cuatro. insignia
// Información de la cantidad de información no leída <a href = "#"> información <span> 10 </span> </a> // Use la insignia en el botón <botón> Enviar <Span> 3 </span> </botón> // El estado de activación adapta automáticamente el tono <ul> <li> <a href = "#"> Cienpage <span> 2 </span> </a> </li> <li> <a aza. href = "#"> información </a> </li> </ul>
Lo anterior es la etiqueta de paginación de ruta y el componente de insignia del componente de arranque que le presenta el editor. ¡Espero que sea útil para todos!