Share
En esta serie de Bootstrap 3, lo guiaremos a través de todas las nuevas características en la última versión de este marco popular. En el último tutorial observamos algunos cambios en los componentes, y esta vez terminaremos observando los cambios en otros componentes, como etiquetas, distintivos, grupos de listas y paneles..
Esta va a ser una sección muy corta, porque solo ha habido dos cambios en las etiquetas y uno grande en las insignias..
Para hacer una etiqueta en BS2, simplemente le dimos una etiqueta-xxxx nombre de la clase, donde xxxx representa el estado que la etiqueta debía representar. Bajo BS3, ahora tenemos una definición de clase de dos partes, y un cambio de nombre de error a peligro para la clase de color rojo, de modo que la denominación ahora coincida con todo lo demás, y eso es casi todo.
Tampoco hay clases / opciones de tamaño para estos en BS3, ya que las etiquetas adquieren el tamaño del contenedor circundante. Por lo tanto, si creas un con una clase de etiqueta apropiada, y luego envuélvalo en una , El tamaño de esa etiqueta será mucho más grande que el resto..
El siguiente ejemplo de código demuestra esto:
Defecto
Primario
Éxito
Información
Advertencia
Peligro
Salida producida por ejemplo de códigoLas insignias, por otro lado, han sufrido un cambio mayor..
En BS3, las insignias ya no tienen clases de color contextuales. Es decir, ya no hay un éxito de etiqueta o etiqueta de advertencia, Como ocurre con las etiquetas anteriores y con otros elementos..
Esto significa que no puede colorear las insignias de la misma manera que lo haría en BS2, y cualquier etiqueta que cree solo se puede representar utilizando el color gris estándar. Bueno, al menos oficialmente no puedes.
Si aplica un alert-xxxxx junto a un etiqueta clase en el se usa para su etiqueta, luego la etiqueta tomará el color de esa clase de alerta, y aunque esta no es una forma compatible de hacer las cosas, funciona y le permite usar las etiquetas como lo hizo en BS2.
Para marcar una etiqueta estándar, todo lo que necesita hacer es agregar un etiqueta y 'etiqueta por defecto' clase a , y estas listo para ir
Accentsconagua
Esta es una etiqueta
Etiqueta producida por ejemplo de códigoSi desea piratear sus etiquetas para usar los diferentes colores, puede hacerlo de la siguiente manera:
Normal Éxito Información Advertencia Peligro
Salida producida por ejemplo de códigoSin embargo, una buena característica que aún tiene el componente de distintivo es su uso de vacío: pseudo-selector, lo que le permite desaparecer automáticamente de la pantalla si su texto interno está vacío. Esto ayuda con los cambios internos diseñados para funcionar en los grupos de listas y listas de píldoras, porque ahora significa que es muy fácil crear cosas como las listas de notificaciones de la bandeja de entrada, donde los valores desaparecen cuando Se eliminan los contenidos. Aquí hay un ejemplo:
- 42 Bandeja de entrada
- 10000 Correo no deseado
- Victorias de loteria
Salida producida por ejemplo de códigoSi examina el código, verá que la última opción de la lista no tiene ningún valor dentro de su etiqueta span, que, debido a la vacío: pseudo-selector, hace que el navegador no lo renderice. Sin embargo, la segunda vez que pongas algo allí usando JavaScript o cualquier método que pueda manipular el DOM, esa insignia volverá a aparecer sin que falte un tiempo. Note también el uso de la tirar a la derecha clase de alineación para asegurarse de que la etiqueta se encuentra en el lado derecho del elemento, haciendo que todo se vea bien y alineado.
Los grupos de listas son una cosa nueva agregada en BS3, diseñada para reemplazar las listas de navegación de BS2, y tienen muchas más capacidades que sus contrapartes de BS2.
Una vez que comience a usarlos, se dará cuenta de que los grupos de listas se parecen más a los cuadros de elementos de lista que se pueden diseñar completamente, y, para ser sincero, todo lo que se necesita para crear un cuadro de lista con un estilo completamente completo sería envolverlos por su cuenta div y configurar el desbordamiento para desplazarse adecuadamente.
Un componente de grupo de lista básico se puede crear con un marcado similar al siguiente:
Salida producida por ejemplo de códigoComo se vio anteriormente en la sección de distintivos, puede agregar distintivos a las listas y otros objetos, y si los agrega a un grupo de listas, se alinean perfectamente:
Salida de código de ejemploEl más observador de ustedes puede estar pensando, "Ok, así que los grupos de la lista se ven bien, pero todavía están
Bueno, tal vez tengas razón en eso ... o quizás tengamos que experimentar un poco más.
Los grupos de listas, a diferencia de las clases que vimos en las secciones de navegación, no se pueden aplicar simplemente a una lista desordenada. Se puede aplicar un grupo de lista a cualquier contenedor primario, y cuando se hace así, el estilo hará que todos los secundarios de ese contenedor se vinculen. Echa un vistazo al siguiente ejemplo:
Salida producida por ejemplo de códigoComo muestra este ejemplo de código, podemos crear una lista de enlaces utilizando nada más que un Tenga en cuenta que todavía obtenemos el efecto completo de desplazamiento de la celda cuando el mouse se desplaza sobre un enlace, y simplemente agregando Pero ¿por qué parar allí?? Al igual que con cualquier otro elemento en BS3, los grupos de listas también tienen sus propias clases contextuales para darles un significado en el conjunto de colores estándar: Como puedes ver, ¿de qué sirve una hamburguesa sin queso y un bollo? Tomates que puedo tomar o dejar, pero por favor sostén el pepinillo! Cubrimos los cambios en miniatura básicos para el estilo de nuevo en el tutorial en CSS, pero en lo que no llegamos a ser son los cambios en los componentes circundantes. La fusión que ahora existe en BS3 nos permite combinar las clases de miniaturas con las clases de cuadrícula para crear listas de imágenes fáciles de usar. La forma más básica en que podemos usarlos es usar el Para aquellos que se están preguntando, estoy usando Este ejemplo no es nada realmente especial; Si has estado leyendo el resto de esta serie, es probable que ya hayas descubierto lo fácil que es hacerlo. Sin embargo, si agregamos un poco más de marcado y trabajamos con la misma idea, podemos producir fácilmente algo como lo siguiente: El planeta está irradiando pulsos. Esta vida es nada menos que un oasis floreciente de potencialidad transformadora fuera del ser.. Gustar disgustar Esta vida es nada menos que un levantamiento floreciente de aspiración de frecuencia. El potencial es la riqueza de la vida consciente, y de nosotros.. Gustar disgustar Puede ser difícil saber por dónde empezar. La totalidad te está llamando a través de partículas subatómicas. Puedes oirlo? Gustar disgustar A través del reiki, nuestras esencias se nutren con un propósito. Pronto serás guiado por un poder profundo dentro de ti.. Gustar disgustar Crear listas verticales es igual de fácil, pero en lugar de usar el El motivo principal de diseño aquí está en las listas de comentarios y mensajes con una imagen de avatar, pero se pueden usar para noticias, listas de productos y muchas otras cosas.. Para marcar un objeto multimedia, simplemente use un exterior El objetivo de la energía ultrasónica es plantar las semillas de la conciencia en lugar del estancamiento. Tú y yo somos seres de la matriz cuántica. El propósito es una constante.. Como probablemente ya pueda imaginar, no se necesitaría mucho para agregarlos a un grupo de lista, o alguna otra estructura creada mediante el sistema de cuadrícula BS3. BS3 en realidad lo hace mucho más fácil al proporcionar una clase de lista de objetos multimedia dedicada y un marcado compatible. Al cambiar un poco su marca, puede generar listas completas de objetos multimedia, de la siguiente manera: La conciencia es el crecimiento de la sincronicidad, y de nosotros. Esta vida es nada menos que una explosión desplegada de verdad infinita. Existimos como energía sonar.. La humanidad no tiene nada que perder. Estamos en una encrucijada de renacimiento y discontinuidad. Estamos en medio de una maduración de la orientación de la expansión de la conciencia que abrirá un camino hacia la propia sopa cuántica. Debemos aprender a llevar vidas unificadas frente al engaño. A partir de ahora, los guerreros reflexionaremos como nunca antes a medida que renacemos de la sopa cuántica. Debemos llamarnos y cumplir con los demás.. Si anidas el Al igual que los grupos de listas, los paneles son una nueva adición a BS3, y qué adición son! Todos estamos familiarizados con cosas como formularios, por ejemplo, estar en cuadros de grupo o secciones de un sitio web que se dividen entre sí de forma lógica. Los paneles BS3 le permiten controlar fácilmente esta separación lógica. Puede tener paneles antiguos lisos, paneles con encabezados, paneles con títulos en encabezados, paneles con pies de página y paneles con su propio conjunto de colores contextuales.. Un panel básico se construye utilizando sólo dos Sin embargo, no es muy bueno sin un título, y realmente como se muestra en este ejemplo de código, no es nada más que un Si sumamos un tercero El encabezado de su panel no tiene que ser solo un simple Sub encabezado del panel El contenido del panel va aquí. El contenido del panel va aquí. El contenido del panel va aquí. También puede aplicar un pie de panel añadiendo un Una cosa de la que hay que tener cuidado, sin embargo, si estás usando Los paneles también pueden funcionar de manera fluida con listas de grupos y tablas. Si te unes a una mesa con un panel dentro del padre Sub encabezado del panel El contenido del panel va aquí. El contenido del panel va aquí. El contenido del panel va aquí. Si eliminas el Agregar un grupo de lista a su panel también es tan fácil, y se realiza exactamente de la misma manera. Dejaré eso como un ejercicio para que el lector juegue, sin embargo. Antes de dejar por fin el tutorial sobre componentes, hay algunas cosas más que cubrir: el jumbotrón, los cuadros de alerta, las barras de progreso y los pozos.. El jumbotron no es un elemento nuevo, pero su uso en BS2 fue un poco más desordenado que en BS3. Crear un jumbotron es muy simple; simplemente usa un ¿No te encanta este marco? Es elegante, fácil de usar y te libera de tantos códigos repetitivos. Diablos si lo hago Y eso es. Puede eliminar las esquinas redondeadas y hacerlas de ancho completo cambiando el pedido y moviéndolo fuera de su contenedor, pero no hay clases especiales ni colores opcionales para esto; está diseñado para ser grande y audaz, y llamar su atención. Hablando de llamar la atención, también tenemos varias clases de alerta, y el único cambio real entre la versión BS2 y BS3 es el cambio de nombre del nombre de la clase. Si desea agregar enlaces en sus alertas utilizando un estándar También puede agregar un icono de cruz / descartar a la alerta, permitiendo que el usuario la cierre y desaparezca de la pantalla. Para hacer esto, necesitamos agregar un Añadimos la clase extra. Si las alertas brindan retroalimentación operativa, entonces hay otro componente relacionado con la retroalimentación que es imprescindible tener la barra de progreso. Ningún elemento de retroalimentación ha producido tanto odio o saludo como esta barra humilde y poco coloreada. De BS2 a BS3, los únicos cambios realizados aquí, como con las clases de alerta, son el cambio de nombre de los colores contextuales para que coincidan con los nombres generales del esquema en otras partes del marco.. El formato HTML base para producirlos sigue siendo exactamente el mismo: Sin embargo, una cosa a la que realmente debería prestar atención (y algo que he reiterado en varios puntos de esta serie) es el grupo de atributos y extras utilizados para hacer que este elemento sea adecuado para lectores de pantalla y equipos similares.. Dado que una barra de progreso a menudo tiende a ser de naturaleza puramente gráfica, no significa nada para alguien que no puede leer la pantalla. La mayoría de los otros elementos tienen al menos suficiente texto para darle al lector una idea de lo que hay allí; Las barras de progreso necesitan toda la ayuda que puedan obtener. Verá en el ejemplo anterior que hemos agregado valores de aria extra para informar sobre el porcentaje en que se encuentra, y también hemos marcado un intervalo que es solo para lectores de pantalla, específicamente para brindar un informe audible. Si eliminamos el No hace falta decir que también puedes añadir También puedes añadir El último elemento que queda, es el humilde. Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion. Etiquetas, ahora podemos ir aún más lejos:
Salida producida por ejemplo de códigoactivo clase, como lo hemos hecho en otros ejemplos, podemos marcar un elemento como activo, y al mismo tiempo mantener un conjunto único de bordes y la apariencia de cada elemento que se comporta como un elemento normal. 
Salida producida por ejemplo de códigoObjetos multimedia y cambios en miniatura personalizados
fila La clase y la cuadrícula se extienden, junto con las clases básicas de miniaturas, para hacer miniaturas perfectamente alineadas, como se muestra a continuación:
Miniaturas producidas por ejemplo de códigoholder.js Para producir los titulares de imagen. Te dejaré buscar en Google la ubicación (aparecerá como la primera disponible); Es una gran herramienta para reservar espacio de imágenes, especialmente cuando se hacen maquetas para clientes..
El éxtasis requiere exploración
Existimos como frecuencias.
Atravesar el mito es volverse uno.
Reflejamos, sanamos, renacemos.
Salida producida por ejemplo de códigominiatura clases, ahora necesitamos usar el medios de comunicación Clases de objetos. Estas clases y el marcado asociado crean un diseño similar al del ejemplo anterior, pero en lugar de aparecer debajo de la miniatura, el texto se alinea a la derecha.div con una clase de medios de comunicación. Entonces, dentro de eso, usa el objeto multimedia, cuerpo mediático, y encabezado de medios clases para marcar los bits individuales, como muestra el siguiente ejemplo:
Seguir el camino es volverse uno con él.
Objeto multimedia producido por ejemplo de código
La humanidad no tiene nada que perder.
Es un signo de cosas por venir.
Solo un viajero de la galaxia puede generar este dosel de vida.
Lista completa de objetos de medios generada por ejemplo de códigos y tirar a la derecha y tirar a la izquierda donde sea necesario colocar la imagen en el lado opuesto, por ejemplo. O, para alinear las cosas de manera ligeramente diferente, puede combinarlos con paneles (que veremos en breve) y otras estructuras similares para colocar bordes y otras sugerencias contextuales en toda la lista y ajustarlas en línea para producir componentes compuestos.Cambios en el panel
div Con relleno y un borde alrededor..encabezado del panel, Entonces empezamos a obtener algo un poco más interesante:
Panel producido por ejemplo de códigoCabecera del panel
Salida producida por ejemplo de códigopanel de pie de página. Si desea dar significado a sus paneles, también puede usar los colores contextuales que se usan para todo lo demás. Usted hace esto simplemente reemplazando el panel predeterminado clase en los ejemplos de código anteriores con panel-primario, éxito del panel, panel-info, panel de advertencia, o panel de peligro.
Salida producida por ejemplo de código, con el tipo establecido en panel-primariopanel de pie de página y en los colores contextuales, el pie de página NO adoptará la combinación de colores del panel. Esto es deliberado, ya que los desarrolladores de BS3 consideraron que, contextualmente, solo los contenidos del panel eran importantes. Cualquier botón, control o información de pie de página para responder a esa información no tuvo que ser resaltado de la misma manera, permitiendo así que el desarrollador agregue diferentes colores contextuales para diferentes controles según sea necesario.div, obtiene un panel como se muestra anteriormente y se une sin problemas a la tabla debajo, como se muestra a continuación:Cabecera del panel
#CARNÉ DE IDENTIDAD Nombre Mango de Twitter 1 Peter Shaw @shawty_ds 2 Soluciones Digitales UK @digitalsolut_uk 
Salida producida por ejemplo de códigoOtros cambios
jumbotron aplicado, y luego agregar algún marcado opcional dentro. El marcado que utilice depende totalmente de usted, pero para obtener el efecto deseado, el marcado recomendado es:Bootstrap 3
Jumbotron producido por ejemplo de código alerta-error a peligro de alerta. Aparte de eso, el marcado para producir alertas sigue siendo tan simple como usar un estándar 
Cajas de alerta producidas por ejemplo de código etiqueta, asegúrate de aplicar la clase enlace de alerta a la etiqueta de anclaje; Esto asegurará que la coloración del enlace sea consistente con la clase de color contextual que se está utilizando.. elemento marcado con una pizca de atributos de datos y clases adicionales como sigue:
Alerta desechable producida por ejemplo de códigoalerta-descartable al exterior despedir atributo de datos para conectar la acción de JavaScript a la alerta despedir Método, utilizando un simple botón..
Barra de progreso producida por muestrasr-solo clase, sin embargo, hace que nuestro bar se vea un poco mejor para aquellos que también lo pueden ver:
Barra de progreso con el sr-solo clase removida del espacio interiorprogreso-barra-éxito, progreso-barra-info, advertencia de barra de progreso, y progreso-barra-peligro al interior barra de progreso Clase, para aprovechar los colores contextuales disponibles..progreso a rayas y / o activo al exterior Progreso clase para obtener efectos de rayas y animados en sus barras de progreso. Se puede obtener un efecto de barra de progreso apilado colocando múltiples barra de progreso Progreso Contenedor y estableciendo sus valores adecuadamente..bien. No se han realizado cambios en esto desde BS3, pero ahora tiene una clase adicional llamada bien-sm. No hay magia involucrada aquí: si desea un área simple, recortada con un fondo sombreado, simplemente cree un bien clase a ella, y luego agregue su contenido dentro. Los pozos son útiles para barras laterales y / o pies de página, o cualquier cosa demasiado simple como para justificar que se coloquen en un panel completo u otra área cercada. No hay colores contextuales o acciones especiales, tampoco; Es simple, efectivo y fácil de usar:
Bien ejemplo producido por muestra
