18
A
答えて
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つのことを行う必要があるでしょう
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>
関連する問題
- 1. UITableViewCellで動的ラベルサイズを設定する方法
- 2. Google Maps APIでラベルサイズを設定
- 3. CSS /ブートストラップのコンテナ幅に応じたラベルサイズ
- 4. 同じページでページ番号を設定する方法 - ブートストラップ
- 5. ブートストラップで最小幅と最大幅を設定する方法
- 6. (Kivy)すべてのデバイスにフィットするようにフォントサイズまたはラベルサイズを設定する方法
- 7. 自動レイアウトでラベルサイズを正しく計算する方法
- 8. iPad/iPhone - 指定された矩形に収まるラベルサイズを設定します
- 9. ブートストラップの入力タグ間にマージンを設定する方法は?
- 10. ブロック間にさらにスペースを設定する方法ブートストラップ?
- 11. ブートストラップの行の高さを設定する方法は?
- 12. イメージ幅をブートストラップ列の幅に設定する方法
- 13. ブートストラップdatetimepickerにデフォルトの日付を設定する方法
- 14. フォームを水平に設定する方法は?ブートストラップ
- 15. ブートストラップDatepicker - マルチデートでstartDateを設定する
- 16. AndroidPlot:ラベルサイズを変更する
- 17. ブートストラップ・ドロップダウンの表示値とデータ値の両方を設定する方法は?
- 18. mesosを設定する方法minimesosでoffer_timeoutを設定する
- 19. ブートストラップ - 列の高さを設定する
- 20. ブートストラップの幅を設定する
- 21. FlashProfessionalのFlashBuilderで設定定数を設定する方法
- 22. ブートストラップでは、ページを2列に分割する方法、左側に固定幅を設定する
- 23. ラベルサイズの変更
- 24. matplotlib yaxisラベルサイズ
- 25. matplotlib-vennを使ってvennダイアグラムに円のサイズとラベルサイズを設定
- 26. ブートストラップ入力フィールドの最小幅の設定方法
- 27. なぜスプリングクラウド設定クライアントはブートストラップに設定をロードするのですか?
- 28. Laravel 5でビューヘルパーを設定する場所と設定方法
- 29. グローバル設定でOozieからハイブプロパティを設定する方法
- 30. apache2設定でグループアクセスを動的に設定する方法
OK。しかし、どのように私はこのクラスをダイナミックに使うことができますか?列サイズcol-md-6 col-xs-12と同様です。 – Spontan23