Twitter Bootstrap 3.0, ¿cómo hago "distintivo de distintivo importante" ahora?


218

En la versión dos podría usar

insignia insignia importante

Veo que el elemento .badge ya no tiene clases contextuales (-success, -primary, etc.).

¿Cómo logro lo mismo en la versión 3?

P.ej. Quiero insignias de advertencia e insignias importantes en mi interfaz de usuario


1
Deberían haber proporcionado .danger, .successetc., definiciones de estilo de clase listas para usar para casos de uso general como este.
Fr0zenFyr

Respuestas:


256

Simplemente agregue esta clase de una línea en su CSS y use el labelcomponente bootstrap .

.label-as-badge {
    border-radius: 1em;
}

Compare esto labely badgelado a lado:

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

ingrese la descripción de la imagen aquí

Parecen lo mismo. Pero en el CSS, se labelusa empara escalar bien, y todavía tiene todas las clases "-color". Por lo tanto, la etiqueta se escalará mejor a tamaños de fuente más grandes, y se puede colorear con éxito de etiqueta, advertencia de etiqueta, etc. Aquí hay dos ejemplos:

<span class="label label-success label-as-badge">Yay! Rah!</span>

ingrese la descripción de la imagen aquí

O donde las cosas son más grandes:

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

ingrese la descripción de la imagen aquí


16/11/2015 : Mirando cómo haremos esto en Bootstrap 4

Parece que las .badgeclases se han ido por completo. Pero hay una .label-pillclase incorporada (aquí) que se parece a lo que queremos.

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

En uso se ve así:

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

ingrese la descripción de la imagen aquí


11/04/2014 : Aquí hay una actualización sobre por qué las clases de alerta de polinización cruzada .badgeno son tan buenas. Creo que esta imagen lo resume:

ingrese la descripción de la imagen aquí

Esas clases de alerta no fueron diseñadas para ir con insignias. Los presenta con una "pista" de los colores previstos, pero al final la consistencia se arroja por la ventana y la legibilidad es cuestionable. Esas insignias pirateadas de alerta no son visualmente coherentes.

La .label-as-badgesolución solo extiende el diseño de arranque. Mantenemos intactas todas las decisiones tomadas por los diseñadores de bootstrap, es decir, la consideración que dieron por la legibilidad y la cohesión en todos los colores posibles, así como las elecciones de colores en sí. La .label-as-badgeclase solo agrega esquinas redondeadas, y nada más. No hay definiciones de color introducidas. Por lo tanto, una sola línea de CSS.

Sí, es más fácil simplemente hackear y colocar esas .alert-xxxxxclases, no tienes que agregar ninguna línea de CSS. O podría preocuparse más por las pequeñas cosas y agregar una línea.


3
Esto es genial siempre y cuando no quieras usar insignias en las listas de grupos, luego no flotan ... Puedo ver este frenado con el tiempo a medida que se cambia el bootstrap. buen truco sin embargo.
nodrog

2
Sí, buen punto @nodrog. El list-groupwith badgeses una buena característica lista para usar en bootstrap. Para aquellos que miran, esto es lo que parece: getbootstrap.com/components/#list-group-badges
broc.seib

1
No me convence el argumento de la "polinización cruzada". La reutilización y la recombinación de las clases / atributos CSS están sucediendo todo el tiempo. El argumento oculto detrás de su término podría ser que prefiere los nombres de clase y subclase css semántica. Básicamente es "flexibilidad / reutilización y corrección semántica". Un nombre de clase semántica debe admitir la función del elemento. "etiqueta como insignia" indica una transformación de elemento. - Nota al margen: La respuesta es básicamente mi comentario del 22 de septiembre con una solución al problema de "bordes no tan redondos en las etiquetas" agregando una línea de CSS.
Jens A. Koch

3
Si desea obtener el grupo de lista especial flotante, simplemente agregue esto. .list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
Gausie

2
Excelente respuesta También podría tirar allí el relleno para que coincida con .badge de la siguiente manera:.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Matt Borja

254

En resumen: reemplazar badge-importantcon alert-dangero progress-bar-danger.

Se parece a esto: Bootply Demo .


Puede combinar la clase CSS badgecon alert-*o progess-bar-*para colorearlos:

Con class="badges alert-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

Alertas Docu: http://getbootstrap.com/components/#alerts

Con class="badges progress-bar-*"(como lo sugiere @ clami219)

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

Docu Progress-Bar: http://getbootstrap.com/components/#progress-alternatives


44
No me gustó la forma en que la alerta decoraba las insignias, así que opté por usar etiquetas. getbootstrap.com/components/#labels
Mike Purcell

66
Esta es una respuesta un poco hack-ish. Claro que funciona, y es simple. Pero se supone que debes usar esas clases de alerta contextual con alertas. Es posible que se registre para estilos rotos en el futuro. La respuesta de @ JasonHuang es igual de simple y le brinda un mayor control.
mikesigs

2
Lo que me llevó a hacer la respuesta anterior fue que Visual Studio Web Essentials muestra una advertencia para el código anterior. A saber, "Cuando se usa 'alert-danger', también debe especificar la clase 'alert'".
mikesigs

3
La gente aterriza en esta página, porque la gente de bootstrap hizo muchas consideraciones de diseño, que arrojan consideraciones de diseño que hicieron antes :) - Solo recombiné las clases css existentes, para acercarme a la antigua "insignia importante" . Aquí vamos con las cosas que dan uso de la caja: eso es todo. No creo que haya una manera verdadera de crear CSS. Esta página ofrece muchas formas de resolver el problema. Pero por favor deja de gritar "¡Aaah! ¡No! ¡Esta no es la forma! Estás haciendo algo mal".
Jens A. Koch

1
@ Jens-AndréKoch tienes razón sobre mi "¡Aaah! ¡No!". Parece que le digo a la gente "lo estás haciendo mal", y no tengo dónde decir eso. Lo siento.
broc.seib

45

Bootstrap 3 eliminó esas opciones de color para las insignias. Sin embargo, podemos agregar esos estilos manualmente. Aquí está mi solución, y aquí está JS Bin :

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

25

Las clases de contexto para badgese eliminan de Bootstrap 3, por lo que tendrías que agregar un CSS personalizado para crear el mismo efecto como ...

.badge-important{background-color:#b94a48;}

Bootply


20
¿Por qué se deshicieron de ellos?
Peter

44
+! También me pregunto por qué se deshicieron de ellos. Puede usar la etiqueta, pero no se alinea correctamente en un contenedor de pastillas. Al menos no está centrado verticalmente.
cbmeeks

2
cojo. La migración ascendente de 2 a 3 es un dolor completo.
Kevin

La respuesta de Jens-André Koch es una solución única de Bootstrap 3.0. Creo que esta es la forma correcta?
Josh Petitt

2
@ Peter: Ver github.com/twbs/bootstrap/pull/6342 . TLDR: las insignias están destinadas a usarse como contadores 'no leídos' y no deben usarse para transmitir otros estados.
Bobby Jack

20

Otra forma posible, para hacer que los colores sean un poco más intensos, es esta:

<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

Ver Bootply


18

Si usa una versión SASS (p. Ej., La de thomas-mcdonald's ), es posible que desee ser un poco más dinámico (respetar las variables existentes) y crear todos los contextos de insignias utilizando la misma técnica que se usa para las etiquetas:

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

.badge-warning {
  @include label-variant($label-warning-bg);
}

.badge-danger {
  @include label-variant($label-danger-bg);
}

El MENOS equivalente debe ser sencillo.


5

Al igual que la respuesta anterior, pero aquí está usando bootstrap 3 nombres y colores:

/*css to add back colours for badges and make use of the colours*/
.badge-default {
  background-color: #999999;
}

.badge-primary {
  background-color: #428bca;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-danger {
  background-color: #d9534f;
}


2

Al usar la versión MENOS, puede importar mixins.less y crear sus propias clases para insignias de colores:

.badge-warning {
    .label-variant(@label-warning-bg);
}

Lo mismo para los otros colores; simplemente reemplace la advertencia con peligro, éxito, etc.


2

Bueno, esta es una respuesta terriblemente tardía, pero creo que aún pondré mis dos centavos ... Podría haber publicado esto como un comentario porque esta respuesta no agrega esencialmente ninguna solución nueva, pero agrega valor a la publicación como otra alternativa más. Pero en un comentario no podría dar todos los detalles debido al límite de caracteres.

NOTA: Esto necesita una edición para arrancar el archivo CSS: mueva las definiciones de estilo de .badgearriba .label-default. No pude encontrar ningún efecto secundario práctico debido al cambio en mis pruebas limitadas.

Si bien la solución de broc.seib es probablemente la mejor manera de cumplir con los requisitos de OP con una adición mínima a CSS, es posible lograr el mismo efecto sin CSS adicional, como la solución de Jens A. Koch o usando .label-xxxclases contextuales porque son fáciles de recordar en comparación con las progress-bar-xxxclases. No creo que las .alert-xxxclases den el mismo efecto.

Todo lo que tienes que hacer es usar .badgey .label-xxxclasificar juntos (pero en este orden). No olvide hacer los cambios mencionados en la NOTA anterior.

<a href="#">Inbox <span class="badge label-warning">42</span></a> Se ve como esto:

Insignia con advertencia bg

IMPORTANTE: esta solución puede romper sus estilos si decide actualizar y olvida realizar los cambios en su nuevo archivo CSS local. Mi solución para este desafío fue copiar todos los .label-xxxestilos en mi archivo CSS personalizado y cargarlo después de todos los demás archivos CSS. Este enfoque también ayuda cuando uso un CDN para cargar BS3.

** PD: ** Las respuestas mejor calificadas tienen sus pros y sus contras. Es la forma en que prefiere hacer su CSS porque no hay una "única forma correcta" de hacerlo.


Creo que no necesita mover .badge si colocó label-xxxxx antes de la insignia
Khaled AbuShqear
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.