twitter-bootstrap - color - tooltip bootstrap

Cómo establecer el tamaño de la etiqueta en Bootstrap

Question

Me gustaría establecer el tamaño de la etiqueta igual que el tamaño de la pantalla.

fe para etiqueta grande de pantalla grande, para etiqueta pequeña de pantalla pequeña.

Answer 1

En la versión actual de Bootstrap, Bootstrap 3, no tienen clases separadas para diferentes estilos de etiquetas.

http://getbootstrap.com/components/

Sin embargo, puede personalizar las clases bootstrap de esa manera. En tu archivo css

.lb-sm {
  font-size: 12px;
}

.lb-md {
  font-size: 16px;
}

.lb-lg {
  font-size: 20px;
}

Alternativamente, puede usar etiquetas de encabezado para cambiar los tamaños. Por ejemplo, aquí hay una etiqueta de tamaño mediano y una etiqueta de tamaño pequeño.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Example heading <span class="label label-default">New</span></h3>
<h6>Example heading <span class="label label-default">New</span></h6>

Podrían agregar clases de tamaño para etiquetas en futuras versiones de Bootstrap.

Answer 2

Tendrá que hacer 2 cosas para hacer que una etiqueta de Bootstrap (o algo realmente) ajuste los tamaños según el tamaño de la pantalla:

• Utilice una consulta de medios por rango de tamaño de visualización para ajustar el CSS.
• Anular conjunto de tamaño de CSS por Bootstrap. Haces esto haciendo tus reglas de CSS más específicas que las de Bootstrap. Por defecto, Bootstrap establece .label { font-size: 75% } . Por lo tanto, cualquier selector adicional en su regla CSS lo hará más específico.

Aquí hay un ejemplo de lista de CSS para lograr lo que está pidiendo, utilizando los 4 tamaños predeterminados en Bootstrap:

@media (max-width: 767) {
    /* your custom css class on a parent will increase specificity */
    /* so this rule will override Bootstrap''s font size setting */
    .autosized .label { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .autosized .label { font-size: 16px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .autosized .label { font-size: 18px; }
}

@media (min-width: 1200px) {
    .autosized .label { font-size: 20px; }
}

Aquí es cómo podría ser utilizado en el HTML:

<!-- any ancestor could be set to autosized -->
<div class="autosized">
    ...
        ...
            <span class="label label-primary">Label 1</span>
</div>