bootstrap: 微調整Tips

テーブルの行の高さを調整する

tableタグに__table-condensed__クラスを設定する
<table class="table table-condensed">

table-condensed クラスにより padding:5px が指定される。
この高さ（空白）を調整したい場合は独自のCSSファイルをインクルードし以下のように指定する。

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;  /* 5px の値を変更 */
}

label の幅を揃える

対象とするlabelクラス（複数）に対して min-width, display プロパティを設定する

HTML例

<div id="same-widths">
<span class="label label-info">info</span>
<span class="label label-primary">primary</span>
<span class="label label-danger">danger</span>
</div>

適用するCSS

# same-widths .label {
  min-width:XXXpx !important;
  display: inline-block !important;
}

navbar のタイトル文字部分に画像を表示する

.navbar-brand クラスをカスタマイズする

CSS例（外部ファイルとしてインクルード）

.navbar-brand {
  background: url("image.png") no-repeat left center;
  background-size: 30px 30px;
  height: 50px;
  width: 250px;
  padding-left: 60px;
}

image.png は上記CSSファイルと同じ場所に格納する。上記では 30px x 30px を想定（navbar の縦サイズの制約上、画像は 30px x 30px くらいまでのサイズがおさまりがよい）。