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. Tabla
2. Botón
En esta lección, aprendemos principalmente sobre las funciones de mesa y botón de arranque, y mostramos varios efectos ricos a través de la definición CSS incorporada.
uno. hoja
Bootstrap proporciona algunos estilos de mesa ricos para que los desarrolladores lo usen.
1. Formato básico
// Implementar estilo de tabla básico <able>
Nota: Podemos ver el CSS correspondiente a través de Firebug.
2. Forma a rayas
// deja que las líneas en <tbody> produzcan una línea tras otra y un efecto de fondo monocromático <able>
Nota: El efecto de la tabla debe basarse en el formato básico.
3. Mesa con bordes
// Agregue un borde a la tabla <Table>
4. Rover el ratón
// deja que la tabla debajo de <tbody> pase el mouse para lograr el efecto de fondo <Able>
5. Clase de estado
// El estilo de fondo de cada línea se puede configurar por separado <tr>
Nota: Hay cinco estilos diferentes para elegir.
Descripción del estilo:
Ratón activo flotando sobre fila o celda
Signos de éxito de acción exitosa o positiva
La información marca información o acciones de solicitud normal
Advertencia Se requiere advertencia del logotipo o atención del usuario
El peligro indica acciones negativas peligrosas o potenciales
6. Ocultar una línea
// Ocultar línea <tr>
7. Tabla receptiva
// Hay una forma receptiva para el elemento principal de la tabla, menos de 768px, y el borde aparece <Body>
dos. Botón
Bootstrap proporciona muchos botones ricos para que los desarrolladores lo usen.
1. etiquetas o elementos que se pueden usar como botones
// Convertir al botón normal <a href = "###"> enlace </a> <botón> botón </button> <input type = "button" value = "input">
Hay tres cosas a tener en cuenta:
(1). Cosas a tener en cuenta sobre los componentes
Aunque la clase de botón se puede aplicar a los elementos <a> y <botte>, los componentes de la barra de navegación y navegación solo admiten los elementos <botón>.
(2). Cosas a tener en cuenta cuando el enlace se usa como un botón
Si el elemento <a> se usa como un botón, y se usa para activar ciertas funciones en la página actual, en lugar de vincular otras páginas o vincular otras partes de la página actual, asegúrese de configurar la propiedad de "botón" de rol =.
(3). Pantalla de navegador cruzado
La mejor práctica que resumimos es que se recomienda usar el elemento <botón> siempre que sea posible para obtener efectos de dibujo coincidentes en cada navegador.
Además, también descubrimos un error en el navegador en Firefox <30, que muestra que nos impide establecer el atributo de altura de línea de línea para los botones creados en función del elemento <input>, lo que hace que el navegador Firefox no sea completamente consistente con otros botones.
2. Estilos predefinidos
// Información general <botón> Botón </botón>
Descripción del estilo
Btn-default estilo predeterminado
Estilo de éxito btn
Estilo de información general BTN-Info
Estilo de advertencia de advertencia de BTN
Estilo peligroso BTN-Danger
Estilo de preferencia primaria BTN
Estilo de enlace BTN-Link
3. Tamaño
// tamaño de un botón grande a pequeño a pequeño </botón> <botón> Button </Button> <botin> Button </Button> <botin> Button </Button>
4. Botón de nivel de bloque
// Bloque de nivel Break <botin> Button </Button> <botin> Button </Button>
5. Estado de activación
// Activar botón <Botón> Botón </Button>
6. Desactivar el estado
// Button de desactivación <botón> Botón </Button>
Lo anterior es las funciones de tabla y botón de arranque que le presentan el editor. ¡Espero que sea útil para todos!