Come impostare la dimensione dell'etichetta in Bootstrap

Question

Vorrei impostare le dimensioni dell'etichetta allo stesso modo delle dimensioni dello schermo.

f.e. per etichette grandi con schermo grande, per etichette piccole con schermo piccolo.

Answer 1

Nella versione corrente di Bootstrap, Bootstrap 3, non hanno classi separate per diversi stili di etichette.

http://getbootstrap.com/components/

Tuttavia, è possibile personalizzare le classi bootstrap in questo modo. Nel file css

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

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

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

In alternativa, è possibile utilizzare i tag di intestazione per modificare le dimensioni. Ad esempio, ecco un'etichetta di medie dimensioni e un piccolo di dimensioni etichetta

<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>

Essi potrebbero aggiungere classi di ampiezza per le etichette nelle versioni future Bootstrap.

Answer 2

Dovrete fare 2 cose per rendere un'etichetta Bootstrap (o qualcosa di veramente) regolare le dimensioni in base alla dimensione dello schermo:

• utilizzare una query di supporto per gamma di dimensioni del display per regolare il CSS.
• Sovrascrivi il dimensionamento CSS impostato da Bootstrap. Lo fai rendendo le tue regole CSS più specifiche di quelle di Bootstrap. Per impostazione predefinita, Bootstrap imposta .label { font-size: 75% }. Quindi qualsiasi selettore in più sulla tua regola CSS lo renderà più specifico.

Ecco un esempio CSS messa in vendita per realizzare ciò che si sta chiedendo, utilizzando il valore di default 4 taglie in 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; } 
} 

Ecco come potrebbe essere utilizzato nel codice HTML:

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