1. Forma
Archivo del código fuente:
_form.scss
mixins/_form.scss
1. Según la jerarquía: formulario-grupo-> formulario-control/input-group/form-static-control-> varias etiquetas
2. Los contenedores como el grupo de formulario/formulario-control/group de entrada/formulario-estatic-control se dividen en dos métodos de visualización: bloque en línea y bloque en línea. La celda de mesa se usa para lograr el nivel de grupo de entrada.
.input-group {display: inline-table; Align vertical: medio; .input-group-addon, .input-group-btn, .Form-Control {Width: Auto; }}3. Input-Group-Addon: si la clase inserta el icono de texto de la página web, desalineará el píxel anterior.
Solución: El glificón no se puede usar junto con otros estilos, pero se usa internamente, porque el glificón tiene una configuración de 1 píxel para la parte superior:
.glyphicon {posición: relativo; arriba: 1px; Pantalla: bloque en línea; Font-Family: 'Glyphicons Halflings'; estilo de fuente: normal; Font-peso: Normal; Línea de altura: 1; -Webkit-font-smoothing: antialiased; -Moz-OSX-Font-Smoothing: Grayscale;}2. Barra de navegación (Navbar)
Archivo del código fuente:
_navbar.scss
1. Divida principalmente las áreas internas, como la cabeza, otras áreas; y posicionamiento de ubicaciones de barra de navegación
2. La implementación de la carpeta (eliminada en 4.0), es decir, la clase de colapso de Navbar, en lugar de colapso, y aparece una capa oculta en el botón
2.1. Navbar-colapso: cuando es mayor que el punto de interrupción, se mostrará (porque el colapso está oculto de forma predeterminada)
3. Contenido admite Nav, Brand, Form, Toggler
4. Navbar-toggler (4.0 eliminado): Establecer para mostrar cuando la pantalla es menor que el valor de punto de interrupción (768), y en 4.0, el colapso se usa para mostrar este botón directamente. No hay límite en el tamaño de la pantalla. La aplicación de Navbar-Toggle también debe usarse en combinación con el colapso.
5. Navbar-Static-Top: solo agrega zindex, elimina las esquinas redondeadas, el ancho del borde y otros contenidos.
6. Navbar fijo/fondo: todos se colocan arriba y abajo, con efectos flotantes
7. Navbar-Brand: marca, puede poner nombres de páginas web, logotipos de la empresa y otros contenidos
8. Navbar-Toggle: una imagen de un clic utilizado para encogerse, que se mostrará cuando sea menor que el punto de interrupción, y si es mayor que este valor, se ocultará (y la pantalla de alternar es correcta flotando y sirve como un elemento de posicionamiento relativo):
.navbar-toggle {posición: relativo; flotante: correcto; margen-derecha: $ Navbar-Padding-Horizontal; relleno: 9px 10px; @include navbar-verical-align (34px); Color de fondo: transparente; imagen de fondo: ninguna; // Restablecer estilo predeterminado inusual Firefox-on-Android; Ver https://github.com/necolas/normalise.css/issues/214 borde: 1px sólido transparente; Border-Radius: $ Border-Radius-Base; // Eliminamos el `` `onesben` aquí, pero luego compensamos adjuntando`: hover` // estilos a `: focus`. &: Focus {esquema: 0; } // barras .icon-bar {display: block; Ancho: 22px; Altura: 2px; Border-Radius: 1px; } .icon-bar + .icon-bar {margin-top: 4px; } @media (min-width: $ grid-float-breakpoint) {display: none; }}9. Navbar-Sav: el NAV original ha realizado algunas configuraciones compatibles. ¿Deberíamos ajustar el estilo bajo el punto de interrupción-max y el estilo en breakpointg, o eliminar el color de fondo predeterminado, la sombra, etc.
10. Forma de navbar: ajuste principalmente todas las formas para ser elementos en línea
11. Navbar-Texs y Navbar-BTN: Ambos han realizado la configuración de compatibilidad apropiada basada en el valor predeterminado
12. Navbar proporciona dos temas: predeterminado e inverso. Cada tema tiene el procesamiento de compatibilidad de estilo correspondiente para sus respectivos componentes.
13. La barra de navegación en sí no tiene muchos estilos. Solo proporciona dos contenidos: alternar y marca, principalmente proporcionando dos temas, así como una combinación de cuatro componentes: desplegable, colapso, forma y NAV.
Si aún desea estudiar en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de Bootstrap
Esta serie de tutoriales se ha compilado en: Tutoriales básicos de Bootstrap Temas especiales, bienvenidos a Click To Learn.
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.