Hoy echaremos un vistazo a los efectos del componente CSS y las clases más importantes. Estas clases no son difíciles. La clave es dominarlos de manera competente, usarlos en combinación y usarlos de manera flexible. Para artículos sobre el estilo y el diseño CSS en los dos primeros artículos, puede leerlos en los artículos anteriores.
1. Componentes de navegación
Yo mismo hice una navegación. Actualmente solo hay un menú de primer nivel. En el siguiente artículo, se dará un menú de segundo nivel, que involucra complementos JS, por lo que no lo describiré aquí.
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge"> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1" <<r!-el 3 meta * Mets * viewport "debe colocar primero * * cualquier otro contenido * debe * seguirlos! -> <title> Menú de segundo nivel </title> <style> .sidebar-menu {margen: 20px automático; ancho: 180px;}/*Reescribe el estilo del deslizamiento del mouse*/. Naves de navegación Li A: Hover {Background-Color: #337Ab7; Color: #fff;} </style> <link href = "css/bootstrap.css" rel = "stylesheet"> <link href = "css/bootstrap.min.css" rel = "Stylesheet"> <link href = "css/style.css" rel = "Stylesheet"> <script "<scrugk" <secedador "<secedente" src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> <sody <! menú-> <div> <ul> <li role = "presentación"> <a href = "#"> <span> </span> home </a> </li> <li role = "presentación"> <a href = "#"> <span> </apan> sobre mí </a> </li> <li role = "presentación"> <a href = "#"> </span> </span> role = "Presentation"> <a href = "#"> <span> </span> fallan </a> </li> <li role = "presentación"> <a href = "#"> <span> </a -span> Message Broard </a> </li> <li role = "Presentation"> <a href = "#"> <span> </span> palabras emocionales </a> </li> </ul> </div> </body> </html>Los efectos son los siguientes:
Los siguientes puntos deben tenerse en cuenta en la navegación:
1: El componente de navegación depende de la clase NAV. (Es decir, cuando usa otras clases, debe escribir esta clase)
2: Asegurar la accesibilidad de los componentes de navegación (agregue el atributo de roles)
3: Las clases involucradas incluyen Tabs Nav, Pills de NAV (hacer cápsulas de navegación), APLACIONES (Haga navegación horizontal en navegación vertical), NAV-justificada (Haga una disposición de ancho igual de navegación)
4: Para la clase deshabilitada, al agregar enlaces en la página de navegación (incluidas las pestañas y las páginas de navegación), solo está deshabilitado en la superficie (el color se vuelve gris, la forma del mouse cambia) y la función real todavía existe.
5: Use la navegación con el menú desplegable.
Veamos el siguiente sub-sub-: puede pegar el código y probarlo usted mismo, y ya no tome capturas de pantalla.
< </ul> <!-pestañas de cápsula de navegación organizada verticalmente-> <ul> <li role = "presentación"> <a href = "#"> home </a> </li> <li role = "presentación"> <a href = "#"> perfil </a> </li> <li role = "presentación"> <a href = "#"> Mensajes </a> </a> </li> </li> </li> < <br> <br>
Echemos un vistazo al estado de navegación con el menú desplegable:
<ul> <li role = "presentación"> <a data-toggle = "desplegable" href = "#" role = "button" aria-haspopup = "true" aria-expandy = "false"> desplegable <span> </span> </a> <ul> <li> <a href = "#"> Acción </a> </li> <i <ah> "#"#"#"> <li> <a href = "#"> Acción 222 </a> </li> <li> <a href = "#"> Acción 333 </a> </li> </li> </li> <li> <a href = "#"> Acción 333 </a> </li> </li> </li> <li> <a href = "Presentation" </li> Li. Por lo general, usando li o tramo vacío. <li role = "presentación"> <a href = "#"> perfil </a> </li> <li role = "presentación"> <a href = "#"> mensajes </a> </li> </ul>
De hecho, para usar el menú desplegable de la clase de menú desplegable, el formato básico es como el anterior, o si convierte el enlace en un botón, etc., puede usarlo de manera flexible.
2. Componente de barra de navegación
Nota:
1: La barra de navegación es organizar todos los componentes horizontalmente y envolver los componentes, similar a la navegación horizontal
2: Asegurar la accesibilidad. Use la etiqueta <Ab> o <div role = "navegación">
3: Las clases involucradas en las barras de navegación incluyen: Navbar-Inverse (para implementar el color de fondo como blanco y texto blanco), NAVBAR fijado con la tapa del NAVBAR (barras de navegación fijas en la parte superior e inferior)
Navbar-left | Navbar-Right (generalmente agregue Navbar-Right al último elemento), Navbar-Text, Navbar-Link (configure el color de conexión), Navbar-Btn (para botones no incluidos en el formulario de formulario, puede
Use esta clase para lograr el efecto del centrado vertical), Navbar-Form (para lograr la alineación vertical), Navber-Brand (Set Brand Icon), Navbar-Colapse (colapso)
Echemos un vistazo al efecto del plegamiento del colapso de Navbar, el código es el siguiente:
< </botton> <a href = "#"> marca </a> </div> <div id = "bs-example-navbar-collapse-1">-columna de plegamiento <ul> <li> <a href = "#"> link <span> actual </span> </a> </li> <li> <a href = "#"> Link </a> </li> <li> <li> <li> data-toggle = "desplegable" rol = "Button" aria-haspopup = "true" aria-expandy = "false"> desplegable <span> </span> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> otra acción </a> </li> <li> <li> <a href = "#"#" aquí </a> </li> <li> <a href = "#"> enlace separado </a> </li> <li role = "separator"> </li> <li> <a href = "#"> un enlace más separado </a> </li> </li> </ul> <forma role = "Buscar"> <StiS> <Stin tipo = "Texter" TOUNTER "Search" Search "Search". tipo = "enviar"> enviar </boton> </form> <ul> <li> <a href = "#"> enlace </a> </li> <li> <a href = "#" data-toggle = "desplegable" rol = "botón" aria-haspopup = "true" aria-"falso"> uplete <span> </span> </a> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> href = "#"> Acción </a> </li> <li> <a href = "#"> otra acción </a> </li> <li> <a href = "#"> algo más aquí </a> </li> <li> <a href = "#"> enlace separado </a> </li> </li> </li> </iv> <! <button type = "Button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false"> <span> toggle navigation </span> <span> </span> <span> </span> </span> </span> <pan> </pan> </botin> <a href = "#" <An "<Ahi> </DIVI>
El efecto es el siguiente:
Es decir, cuando la pantalla de mi navegador se encoge, los componentes originales se convertirán en líneas plegadas (tres líneas horizontales) en el lado derecho de la línea de la marca. Haga clic en el botón Tres horizontal y se mostrará el componente.
3. Componentes de paginación
Nota:
1: Use la paginación de clase (agregue la clase Pagination-LG para hacerlo más grande)
2: alcanzar la alineación de giro de la página e implementar la alineación de giro de la página (la parte delantera y posterior se encuentran en ambos extremos respectivamente).
El código es el siguiente:
< href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#" aria-label = "span"> <pan " aria-hidden = "true"> »» </span> </a> </li> </ul> </am>
Si implementa la paginación, simplemente agregue <ul>.
El efecto de giro de la página es el siguiente: utiliza principalmente la clase de buscapersonas
< aria-hidden = "true"> ← </span> mayor </a> </li> <li> <a href = "#"> más nuevo <span aria-hidden = "true"> → </span> </a> </li> </ul> </aw>
Los efectos de los dos anteriores son los siguientes:
4. Insignia
Función: Presente la información en números llamativos.
<
Los efectos son los siguientes:
Agregar este tipo de clase de insignia también se puede usar con navegación, etc.
5. Componente en miniatura
Úselo con el sistema de trama y la clase de miniatura. El código es el siguiente: puede ser probado por usted mismo
< src = "111.png"> <div> <h3> Etiqueta de miniatura </h3> <p> <a href = "#" role = "botón"> botón </a> </p> </div> </div> <!-tercero-> <div> <div> <img src = "111.png"> <div> <hiv> thumbnail </h3il href = "#" role = "botón"> botón </a> </p> </div> </div> <!-tercero-> <div> <div> <mit <img src = "111.png"> <div> <h3> la etiqueta de la gótula </h3> <p> <a href = "#" rol = "booth"> bull </div> </div> </div> </div> </div> </div>
6. Caja de advertencia cerrable
Use la clase: alerta-DISMISSIBIT y un botón se publican de la siguiente manera:
< En todos los dispositivos ->
Con respecto a la escena, puede reemplazarla usted mismo. No más descripción. Establezca un enlace de alerta para establecer el color que coincida con el cuadro de advertencia actual.
7. Barra de progreso
Use clase: progreso y barra de progreso para implementar animación
< aria-valuemax = "100"> 80% </div> </div> <div> <div role = "progressbar" aria-valuenw = "2" aria-valuemin = "0" aria-valuemax = "100" style = "min-width: 2em;"> 2% </div> </iv>
Para lograr la barra de progreso del efecto de animación, use la estribación de la barra de progreso para lograr el efecto de animación y agregar activo. El código es el siguiente: no más capturas de pantalla
<
También puede cambiar el color de las rayas de la barra de progreso en combinación con el color de la escena.
8. Grupo de lista, componentes del grupo de entrada
Veamos primero el grupo de listas, principalmente utilizando la clase de grupo de lista, y en segundo lugar, los elementos de la lista están escritos con List-Group-Item. El código es el siguiente:
; href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 444444 </a> <a href = "#"> 55555 </a> </div> <!-Botón como un grupo de lista, use div y no puede usar type = "Button"> 2222 </Button> <Button type = "Button"> 3333 </Button> <Button type = "Button"> 4444 </Button> < <p> 22222 </p> </a> </div>
Echemos un vistazo al grupo de entrada, use la clase de grupo de entrada para envolver los componentes. El código es el siguiente:
;
9. Incorporar contenido de características receptivas
¿Entender lo que significa y qué es el contenido incrustado? ¿Cómo incrustarlo? Entonces, ¿cómo responder?
Incrustar: es decir, use etiquetas como <iframe>, <griT>, <vide> y <ject> para introducir contenido de archivo externo. Creo que todos conocen los nuevos atributos en HTML5. video, radio, etc.
Respuesta: Cree automáticamente una escala fija basada en el ancho del contenedor externo que está integrado, lo que permite que el navegador determine automáticamente el tamaño del video o contenido, y puede escalar en varios dispositivos.
Si desea que el estilo final coincida con otras propiedades, también puede usar explícitamente una clase derivada.
El código es el siguiente:
<Div> <iframe src = "..."> </frame> </div> <div> <iframe src = "..."> </frame> </div>
Echemos un vistazo a lo que responde a la inspectiva-16BY9 y a la insversión-respuesta-4by3 significa respectivamente.
Echemos un vistazo a la consola:
.Embed-sensible-4by3 {--- 4 representa horizontal, 3 representa vertical, es decir, una relación de escala, es decir, una escala de 4: 3 de relleno de relleno: 75%;} .. Inspersiva-16By9 {Padding-Bottom: 56.25%;}Mantenga la relación de aspecto, si el ancho se calcula al 100%, es 100% * 3/4 = 75%. En este momento, establezca su relación de aspecto estableciendo su botín de relleno. Cuando se acerca al navegador,
Finalmente, mantenga esta relación de escala para escalar.
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.