Share
En el tutorial anterior de nuestra serie sobre Bootstrap 3, aprendió sobre algunas de las características de CSS que han cambiado en la versión 3. En este tutorial, lo terminaremos observando otras características modificadas, como imágenes y botones..
El cambio más destacado en las clases utilizadas para diseñar botones en BS3 es el estilo predeterminado. Bajo BS2, simplemente agregando el btnclase a un elemento de entrada de tipo botón, o a una etiqueta de anclaje, le daría al control el aspecto y la sensación predeterminados del botón.
A partir de BS3, ahora tiene que agregar explícitamente btn-predeterminado; simplemente añadiendo btnpor su propia voluntad ya no tendrá ningún efecto.
El segundo cambio principal está en el cambio de nombre de algunas de las clases base. Específicamente, btn-errorha sido renombrado a btn-peligropara que el esquema de nombres coincida con los otros cambios de clase con nombres similares y aporte uniformidad a la biblioteca base de Bootstrap.
Aparte de eso, las clases del botón base permanecen sin cambios, como muestra el siguiente ejemplo de código:
Cuando se representa en el navegador, verá el botón plano normal que BS3 tiene ahora para los controles:
Hay algunas clases nuevas para el elemento de botón, que se agregan para dar uniformidad a las clases de tamaño de cuadrícula. Estas clases son btn-lg, btn-sm, y btn-xs; no hay btn-md, como el botón de tamaño mediano es el tamaño estándar utilizado cuando no se especifica una clase.
El siguiente ejemplo de código muestra todos los estilos de botones en diferentes tamaños:
Cuando se representa en el navegador, este ejemplo de código debería proporcionarle el siguiente resultado:
Cuando añades la clase bloque de btnPara un botón o elemento de anclaje con el estilo de cualquiera de las clases de botones anteriores, ese botón se estirará para llenar el 100 por ciento del espacio disponible. Esto es útil cuando se producen cuadros de diálogo y controles de tamaño con el sistema de cuadrícula BS3, ya que le permite ajustar el tamaño de los botones (y otros elementos) para mantener un buen equilibrio en los diseños de formularios.
En la mayoría de los casos, no necesitará establecer el estado activo de un botón, pero si lo hace, puede agregar fácilmente el activoclase a cualquier elemento marcado usando las clases de botón. Activoen general (en el elemento al menos) usualmente usa el :activopseudo-selector para cambiar el estilo del botón. Añadiendo el activoclase, sin embargo, forzará el botón para mostrar su estado activo.
Nota: Si está pensando en utilizar el estado activo para crear botones dinámicos, tenga en cuenta que en los siguientes tutoriales, analizaremos los estados de los botones utilizando el componente y las funciones de JavaScript disponibles. BS3 proporciona un botón tan pegajoso con las funciones adicionales disponibles en estas instalaciones, por lo que no tendrá que crear sus propios botones pegajosos en la mayoría de los casos..
También puede deshabilitar sus botones y marcarlos como inactivos utilizando las mismas clases y atributos "deshabilitados" que analizamos anteriormente con los cambios en los elementos del formulario.
El siguiente código muestra los botones marcados para verse activos y en los estados deshabilitados:
Tenga en cuenta, sin embargo, que en el caso de botones de ancla, el discapacitadoelemento / clase hace no deshabilitar el enlace; para asegurarse de que un enlace de anclaje de estado deshabilitado no se active, deberá usar JavaScript personalizado.
Por este motivo, el equipo de BS3 recomienda que utilice el Elemento donde sea posible marcar botones, y solo usar etiquetas de anclaje en circunstancias específicas.
Tampoco olvidemos el tema de la "idempotencia" y la importancia de usar botones sobre los anclajes. En general, un enlace de anclaje es apropiado si el destino es una solicitud de obtención y hacer el enlace varias veces no causará ningún problema al repetir la activación; de lo contrario, use un botón.
Los cambios de CSS, en lo que concierne a la humilde etiqueta de imagen, no han tenido tanto alcance como en otros lugares en BS3. Anteriormente, las imágenes no respondían de forma predeterminada y, como ocurre con muchas cosas en BS2, tenía que agregar las clases opcionales de respuesta para estar cerca de responder con ellas..
Desafortunadamente, incluso después de agregar las clases de respuesta opcionales, las cosas aún no eran perfectas; muchas personas mencionaron problemas con las páginas donde se usaba Google Maps, entre otras cosas.
BS3 cambia todo esto. Ahora, por defecto, las imágenes responden completamente con el uso de un img-responsivea cualquier
Aparte de eso, el único otro cambio realizado en la sección de imágenes es el nombre del img-polaroidclase (usada para generar miniaturas) para img-miniatura, para que coincida con otro cambio de nombre similar en toda la biblioteca.
Las clases BS2 estoy castigadoy img-circulosigue funcionando como lo hacían anteriormente, dando un efecto de miniatura circular y de rectángulo redondeado.
Finalmente, llegamos a los cambios que cubren aquellas cosas que realmente no encajan en ninguna categoría específica.
Bajo las clases de tipografía en BS2, se introdujo originalmente en un conjunto de clases de color utilizadas para configurar el color de un elemento de texto con los mismos colores de marca que se usaron en otros elementos del marco..
BS3 lleva esto un paso más allá e introduce el concepto de tener los mismos colores que se utilizan para los fondos contextuales también.
En este caso, los fondos son una variación más ligera, como se usa en paneles y cuadros de alerta en otros lugares. Hay una ventaja adicional: si usa estas clases de color contextuales en las etiquetas de anclaje y cualquier otra cosa que tenga un ajuste de sobrevuelo de manera predeterminada, los colores se atenuarán ligeramente para mostrar que se han movido sobre.
Al igual que con la denominación en otras clases basadas en color, las clases disponibles aquí son texto silenciado, texto-primario, éxito de texto, información de texto, advertencia de texto, y peligro de textopara párrafos, espacios y otros elementos de texto en línea o basados en bloques.
Para los colores de fondo, los nombres de las clases son bg-primary, bg-éxito, bg-info, bg-warning, y bg-danger.
El siguiente código muestra un ejemplo de uso de ellos:
Este párrafo está utilizando la clase de texto silenciado., Típicamente reservado para algo no realmente importante o menos prominente.
Este párrafo usa la clase de texto primario., Normalmente reservado para algo importante o por defecto y visible..
Este párrafo está utilizando la clase de texto de éxito., Normalmente reservado para una acción que acaba de tener éxito o algo bueno y de felicitación..
Este párrafo está usando la clase de texto de información, normalmente reservado para mensajes informales, como un trabajo en segundo plano que acaba de terminar o un nuevo archivo disponible.
Este párrafo está utilizando la clase de texto de advertencia, Por lo general, se reserva para algo que puede ser peligroso o que necesita atención pero puede esperar un tiempo..
Este párrafo usa la clase de texto de peligro., Por lo general, reservado para algo muy importante, o algo que realmente necesita atención..
Este párrafo usa texto normal pero con un color de fondo primario para indicarte que lo que estás viendo es el estado predeterminado.
Este párrafo usa texto normal pero con un color de fondo exitoso para decirte que lo que estás viendo es bueno..
Este párrafo usa texto normal pero con un color de fondo de información para decirle que lo que está viendo es informativo y debe leerse, pero no siempre se debe actuar sobre él..
Este párrafo usa texto normal pero con un color de fondo de advertencia que le indica que lo que está viendo podría causar problemas que debería tener en cuenta..
Este párrafo usa texto normal pero con un color de fondo de peligro para decirte que lo que estás viendo necesita que prestes atención ahora.
Una cosa que se notó como necesaria en BS3, y no presente en BS2, es un dedicado signo de intercalaciónClase para indicadores desplegables en botones y otros muebles de pantalla..
Ahora puede utilizar esto en sus propios elementos agregando un nombre de clase de Otra nueva incorporación a BS3, si bien no es en realidad una clase, aún merece una mención: el diálogo se cierra.. Al igual que el El siguiente ejemplo de código muestra un ejemplo de ambos Este texto aparece en un div que tiene su propio icono de cierre adjunto.. Al igual que en BS2, las clases de utilidad de flotación rápida Otras clases nuevas incluyen Ya hemos visto que una nueva clase llamada Si define un título de página con un banner de imagen, un lector de pantalla típico no podrá decir lo que dice el texto en la imagen. Durante mucho tiempo, muchos autores han utilizado un truco llamado reemplazo de imagen para solucionar esto. El reemplazo de imagen funciona envolviendo el banner de imagen en un Lo que sucede entonces es que, en la pantalla, las personas con buena vista ven el banner de imagen, pero aquellos que usan un lector de pantalla escuchan al lector decir el texto real en el banner de imagen.. BS3 ahora proporciona una clase llamada Finalmente, llegamos al último de los últimos en la sección de cambios de CSS.. ¿De qué serviría un marco de diseño web sensible sin clases de utilidad para ayudarlo a administrar sus diseños receptivos?? "Pero espera, lo hemos cubierto con grillas", te oigo decir, y sí, lo hemos hecho. Pero BS3 tiene un truco más bajo la manga, que para ser justos estaba Presente en BS2, pero realmente no funcionó tan bien. Entonces, ¿qué es esta magia extra? Permítanme presentarles las clases de visibilidad receptiva.. Esencialmente, lo que hacen estas pequeñas gemas es permitirte intercambiar y cambiar partes de tu interfaz de usuario en función de tu cuadrícula y tamaño de pantalla. Imaginemos, por ejemplo, que tiene una lista de elementos de la bandeja de entrada de correo electrónico, y cuando se ve en una PC de escritorio, cada elemento tiene una vista previa al lado, como en una aplicación clásica de lectura de correo electrónico. Algo tal vez como lo siguiente: Ahora esto es fantástico hasta que intente ajustarlo en un dispositivo móvil, donde absolutamente desea ocultar el panel de vista previa y dejar solo la lista de correo electrónico. Normalmente, una tarea como esta se realiza utilizando un poco de JavaScript para cambiar la visibilidad del elemento cambiando la configuración visible del elemento. BS3 tiene una solución integrada que utiliza clases de CSS que le ayuda a manejar situaciones como esta con gran facilidad. Toma el siguiente bit de código: Querido una persona, Bla bla bla bla bla bla bla Si renderizas esto en tu navegador, deberías obtener algo que se parece a lo siguiente: Sin embargo, si cambia el tamaño de su navegador al tamaño de la pantalla del móvil, las cosas comienzan a parecer un poco extrañas: Esto puede funcionar para algunos, pero en general es una mala idea. Qué sucede cuando tiene 100 correos electrónicos no leídos y tiene que desplazarse a la parte inferior de la vista cada vez para leer la vista previa? Toma la vista previa principal Luego, si actualiza su navegador y trata de cambiar su tamaño, debería ver que la vista previa Al igual que con el sistema de cuadrícula, hay cuatro tamaños diferentes, y hay clases para ocultar y hacer visible. Las clases visibles harán visible el elemento en cuestión. solamente en el tamaño de pantalla especificado, y las clases ocultas hacen que el elemento en cuestión se oculte solamente en el tamaño de pantalla especificado. Los nombres de las clases son los siguientes: Los anchos de los dispositivos y los puntos de activación asociados son los mismos que los utilizados en el sistema de cuadrícula en general, con Hay dos clases finales que se usan en esta categoría para ayudarlo a manejar la visualización frente a los diseños basados en impresión.. Puedes usar Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion.signo de intercalacióna su contenedor exterior-a o signo de intercalación, esto estaba presente en BS2, pero no estaba disponible para ser usado por separado de su uso previsto en los diálogos modales y las barras de alerta. Sin embargo, a partir de BS3 en adelante, puede usarlo por sí solo. signo de intercalaciónClase y cruzada en marcado genérico: 
tirar a la izquierday tirar a la derechaTodavía existen, pero ahora están unidos por bloque central, que simplemente hace que ambos márgenes sean automáticos y centre el elemento en su matriz, y clearfix, que borra cualquier flotación que pueda estar usando, restaurando así el flujo normal de documentos. espectáculo, oculto, y invisibleclases. Showprácticamente habla por sí misma, pero ¿cuál es la diferencia entre los dos últimos?? Ocultocolapsa físicamente el espacio utilizado por el elemento, por lo que si lo tiene en una división de altura completa, por ejemplo, esa división colapsará hasta su altura más pequeña. Sin embargo si usas invisible, el elemento conserva su espacio (y también sigue ocupando su lugar en el flujo del elemento), pero desaparece de la vista. sr-solose ha introducido para marcar un bloque como visible para los lectores de pantalla y nada más. Ahora hay otra clase como esta que se usa para encabezados gráficos. H1o alguna otra etiqueta de tipo estándar, colocando el nombre como texto claro junto al banner de imagen, luego usando CSS para mover el texto fuera de la pantalla. ocultar textopara facilitar esto. Un ejemplo simple sigue:
Una imagen gráfica basada en el título.
Salida generada por ejemplo de código en un navegador de PC regular
Ejemplo de diseño de aplicación de correo electrónico
Correo electrónico 1 (1/1/11) Correo electrónico 2 (1/1/11) Email 3 (1/1/11) Email 4 (1/1/11) Email 5 (1/1/11) Correo electrónico 6 (1/1/11) Correo electrónico 2: Recibido (1/1/11)
A: una persona
Maqueta de aplicación de correo electrónico producida por ejemplo de código anterior
Maqueta de aplicación de correo electrónico en una vista redimensionadaoculto-sm, como sigue: 
Maqueta de la aplicación de correo electrónico, redimensionada, pero con clases ocultas agregadas
visible-xs: Hacer visible en pantallas extra-pequeñas. visible-sm: Hacer visible en pantallas pequeñas. visible-md: Hacer visible en pantallas medianas. visible-lg: Hacer visible en pantallas extra grandes
oculto-xs: Ocultar en pantallas extra-pequeñas oculto-sm: Ocultar en pantallas pequeñas ocultos-md: Ocultar en pantallas medianas lg oculto: Ocultar en pantallas grandes -xsCubriendo teléfonos de tableta del tamaño de una palma y más pequeños., -smcubriendo tabletas de tamaño medio a grande, -Marylandcubriendo la mayoría de las computadoras de escritorio, y -lgcubriendo escritorios de pantalla ancha. impresión visibley impresión ocultaexactamente de la misma manera que las clases basadas en tamaño anteriores, pero esta vez haciendo un elemento visible e invisible cuando se envía una página a la impresora. 
Accentsconagua