El artículo anterior ya ha hablado sobre algunos pasos y algunos usos básicos de Bootstrap. Haga clic para ver
Este blog continúa presentando algunos efectos comunes, principalmente incluyendo los siguientes componentes.
1. Menú desplegable
2. Barra de navegación
3. Barra de progreso
4. Objetos de medios
5. Paginación
6. Lista
Primero, importe el CSS y JS de Bootstrap
<link rel = "stylesheet" href = "css/bootstrap.min.css"> <!-Es mejor citar los css de CDN, algunos archivos de estilo no-> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/csss/bootstrap.min.@cscratts src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. Menú desplegable
Consiste principalmente en botón y UL, y puede agregar subtítulos y líneas divididas
<Div> <Botton type = "Button" Data-Toggle = "Dropdown" Aria-Expanded = "False"> Línea de metro <!-Este es un símbolo del triángulo hacia abajo-> <span> </span> </botón> <ul rol = "menú"> <! href="#">Line 2</a> </li> <li><a href="#">Line 3</a> </li> <li><a href="#">Line 4</a> </li> <!--This is a dividing line--> <li></li> <li><a href="#">Line 5</a> </li> </ul> </div>
2. Barra de navegación
La barra de navegación es el estándar para casi todas las páginas web, por lo que es absolutamente correcto aprender a usarla.
Esta es la barra de navegación en la parte superior de la página
< data-target = "#bs-example-navbar-collapse-1"> <span> Toggle Navigation </span> <span> </span> <span> </span> <span> </span> <span> </span> </boton> <!-Swap Brand to img-> <a href = "#"> Brand </a> </iv> <!-set el id a bs-oxample-oxates-oxatespse-1 estar retractado y hecho clic en-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> gestión de miembros </a> </li> <li> <a href = "#"> gestión de miembros </a> </li> <li> <a href = "#"> gestión de miembros </a> </ali> <a href = "#"#"" Gestión </a> </li> <li> <a href = "#"> gestión de miembros </a> </li> <li> <a href = "#"> gestión de miembros </a> </li> <li> <a href = "#"> gestión de miembros </a> </li> <li> <a href = "#"> gestión de miembros </a> </si> <!-un menú de menú de la barra de navegación. <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"> System maintenance<span></span> </a> <ul role="menu"> <li><a href="#">Restore the system</a></li> <li><a href="#">System backup</a></li> <li><a href = "#"> disconnect </a> </li> <li> <a href = "#"> Elimine el usuario </a> </li> </li> </li> </ul> <!-Escribir Navbar-Right First y The Right-> <!-Botón en la barra de navegación-> <Botón Tipo = "Botón"> señal </Botón> <!-Forma en el Forma de la barra de navegación-Barnón-"BARCO DE FORMULARIO". <div> <input type = "text" placeHolder = "Enter Search Content"> </div> <botón type = "Summit"> Search </boton> </form> </div> </div> </ar Nav> </Nav>
Cuando usamos páginas web para explorar blogs o archivos, tenemos un nivel. En este momento, si queremos volver al nivel anterior o varios niveles, necesitamos la barra de navegación de ubicación.
<
3. Barra de progreso
<Viv> <!-El progreso-barra de barra establece las rayas y la animación de conjuntos activos-> <!-Muestre el porcentaje de la barra de progreso de acuerdo con el porcentaje de ancho de estilo-> <div role = "Progressbar" aria-valeNow = "60" aria-valuemin = "0" ARIA-VALUEMAX = "100"> <span> 30%</span> < Bar-> 30% </div> </div>
4. Objetos de medios
Este es básicamente el mismo mensaje en Weibo o Twitter
El avatar a la izquierda, el título y el texto a la derecha
<Div> <Viv> <img src = "imágenes/1.jpg"> </div> <div> <h4> encabezado de medios </h4> <p> CRAS SIT AMET NIBH Libero, en Gravida Nulla. Nulla Vel Metus Sclerisque Ante Sollicitudin Commodo. Cras purus odio, vestibulum en vulputado AT, Tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec Lacinia Congue Felis en Faucibus. </p> </div> </div>
5. Paginación
Estas son múltiples páginas
<ul> <li> <a href = "#" aria-label = "anterior"> <!-Double flechas a la izquierda-> <span aria-hidden = "true"> «</span> </a> </li> <!-La primera opción se activa-> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"#" <li><a href="#">3</a> </li> <li><a href="#">4</a> </li> <li><a href="#">5</a> </li> <li><a href="#">6</a> </li> <li><a href="#">7</a> </li> <li> <a href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "next"> <!-Doble flechas a la derecha-> <span aria-hidden = "true"> »</span> </a> </li> </ul>
Esta es solo la página anterior y la siguiente página
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> página anterior </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> página siguiente </a> </li> </ul>
Lo anterior está escrito con dos botones conectados juntos
Lo siguiente se escribe ya que se distribuyen dos botones en ambos lados
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> página anterior </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> página siguiente </a> </li> </ul>
6. Lista
El efecto de la lista es muy común y muy simple de usar
<Div> <!-El primer elemento se seleccionó-> <a href = "#"> Estadísticas de acceso </a> <a href = "#"> Estadísticas de información </a> <a href = "#"> Log Statistics </a> <a href = "#"> Estadísticas de información </a> <a href = "#"> Información de la información </a> <a href = "#" href = "#"> Estadísticas de información </a> <a href = "#"> Estadísticas de información </a> </div>
Usé el componente anterior para hacer una página web estática de backend
El efecto es como se muestra en la imagen
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
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.