2016-01-26 10 views

答えて

12

現在のバージョンのBootstrap、Bootstrap 3では、ラベルのスタイルごとに別々のクラスはありません。

http://getbootstrap.com/components/

しかし、あなたはそのように、ブートストラップクラスをカスタマイズすることができます。あなたのCSSファイル

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

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

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

また、ヘッダータグを使用してサイズを変更することもできます。例えば、ここでは中規模のラベルや小型ラベル

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

がある彼らは、将来のブートストラップのバージョンでラベルのサイズクラスが追加される場合があります。あなたが(本当にか何か)ブートストラップのラベルを作るために2つのことを行う必要があるでしょう

+0

OK。しかし、どのように私はこのクラスをダイナミックに使うことができますか?列サイズcol-md-6 col-xs-12と同様です。 – Spontan23

3

画面サイズに基づいてサイズを調整します

  • CSSを調整するために、ディスプレイのサイズ範囲ごとにメディアクエリを使用してください。
  • ブートストラップによって設定されたCSSサイジングを上書きします。これを行うには、CSSルールをBootstrapよりも具体的にする。デフォルトでは、ブートストラップは.label { font-size: 75% }と設定します。したがって、CSSルールの余分なセレクタによって、より具体的になります。

ここでは、ブートストラップでデフォルト4つのサイズ使用して、求めているものを達成するためにリストの例のCSSです:ここで

@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; } 
} 

は、それがHTMLで使用することができる方法である:

<!-- any ancestor could be set to autosized --> 
<div class="autosized"> 
    ... 
     ... 
      <span class="label label-primary">Label 1</span> 
</div> 
関連する問題