Bootstrap v2.3.1 | 「2系(Bootstrap)」カテゴリー

　状態:- 　閲覧数:4,859 　投稿日:2013-03-09 　更新日:2015-05-19

v2.3.1

バージョン履歴
・2.0.4

「2.1.0」未満バージョンで、マウスオーバーした際のテーブル背景色効果が自動付与される問題

　閲覧数:1,238　投稿日:2013-03-09　更新日:2013-03-27

何が問題？

マウスオーバーした際のテーブル背景色効果が勝手に付与されてしまう
・デザインによっては、この影響で著しく使い勝手が悪くなる場合がある
・例えば、「zebra-striped CSS class」を利用して、テーブル交互色を実現していたとき
・マウスオーバーした際の背景色効果が自動付与されると、見難くなることがある

「2.1.0」未満での対応

・ハックするしかない

.table tbody tr:hover td, .table tbody tr:hover th {
background-color: transparent;
}

.table-striped tbody tr:nth-child(odd):hover td,
.table-striped tbody tr:nth-child(odd):hover th {
background-color: #f9f9f9;
}

「2.1.0」追加オプション

デフォルト挙動の違い
・バージョン「2.1.0」から、デフォルト挙動が変更された

バージョン「2.1.0未満」
・マウスオーバーした際の背景色効果が自動付与される

バージョン「2.1.0以降」
・マウスオーバーした際の背景色効果が自動付与されない
・背景色効果を得るためには、「2.1.0」から追加されたオプション「table-hover」クラスを明示的に指定するよう変更

※恐らくテーブルデフォルトクラスに組み込んでいた効果を、用途に応じて応じて使いやすいよう、最小機能毎に切り出した結果の措置だと思われる

バージョンアップに対応する為に

　閲覧数:1,195　投稿日:2013-03-27　更新日:2013-03-27

配布内容を直接変更しない

・配布CSSを直接変更してしまうと、バージョンアップした際の対応が、面倒なことになる
・極力別ファイルにて、上書き設定していった方が良い

どうしたら良い？

・外国語フォントを指定しているCSS部分を変更せずに、上書きするにはどうすれば良いのだろうか？ transparentみたいに、一旦打ち消すこと出来ないし…

配布ファイル変更内容

・もう既にどこ変更したか分からなくなってる
・これから変更した都度、ここに追記していく予定

Bootstrap2系テーマ／テンプレート

　閲覧数:1,076　投稿日:2013-03-27　更新日:2015-05-19

Bootswatch: Themed swatches for Twitter Bootstrap
・初めて見た時は「うおおお！」と興奮したけど、久しぶりに訪れてみたら、何かギャラリー数が減少したような気がする。もしかして、退化してる？

StyleBootstrap.info: Twitter Bootstrap theme generator
・便利なサイトだけど、まだ実際に利用してはいない

Bootbox.js—alert, confirm and flexible dialogs for Twitter's Bootstrap framework

Twitter Bootstrap Notifications, from Nijiko Yonskai
・このアラート登場の仕方は格好が良いかも
・一定時間経過すると、自動的に閉じるみたいだし

Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ

Bootstrap をカスタマイズしてオリジナルテーマを作ってみた … GreenMind
・ざっと見る限り、テーマレベルのカスタマイズではないみたい
・下記2つだけでも使う十分価値はあると思われ

1. アイコンを Web font に変更
本家におけるアイコンは PNG 画像による CSS Sprite で実装されていますが、小さいサイズでの利用に制限されるというデメリットがあります。そこで当テーマでは Elusive Icons という Web フォント形式のアイコンに差し替えることで、サイズだけでなく色も自由に変更できるようにしました。
Elusive icons

5. テーブルをレスポンシブWebデザインに対応
モバイル端末など表示領域の狭い環境においてテーブル表示を最適

・ただ、本家バージョン3.0のリリースがすでに予告されているのであれば、もう少し待ってみようかな、という気はする

・「一部のアイコンは既にWeb font へ変更済」だし、テーブルについても導入こそしていないものの、調査済につき実装目途は付いているので

LayoutIt! - Interface Builder for Bootstrap
・ドラッグ&ドロップでBootstrapのレイアウトを作成出来る

「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない

JavaScript in Bootstrap

順位	ページタイトル抜粋	％
1	Bootstrap v2.3.1	81
2	「Bootstrap v2.3.1」不具合	70
3	Bootstrap 3	67
4	Bootstrap 2.0 → 3.1.1	65
5	Bootstrap 4	59
6	Twitter Bootstrap 1.4	54
7	Twitter Bootstrap 2.0	54
8	さよならBootstrap	48
9	JavaScript in Bootstrap	46
10	Group Tabs	46
11	Bootstrap 2.0 × Google MAP API	43
12	FotoSketcher 3.10	42
13	Save As MHT 0.1.3	42
14	Bookmarks clean up	41
15	Bootstrap３系テーマ／テンプレート	40
16	Bootstrap4系テーマ／テンプレート	40
17	Bootstrapをどこまで理解するか？	39
18	Bookmark Sentry	39
19	spacer.gif	38
20	Illustrator CS3でのJavaScript実行方法	38
	2026/6/13 13:58 更新

順位	ページタイトル抜粋	アクセス数
1	Fireworks で背景画像透明化 \| Fireworks CS3(Fireworks)	10
2	Design 0	6
3	「属性」「プロパティ」「アトリビュート」の違い \| CSS	5
3	HTMLエディタカテゴリー	5
3	「東京都」のカラーコード取得は難しい \| カラーコード(色)	5
3	(ショートカットキーで拡張機能を起動する)拡張機能のキーボード割り当て \| Chrome 拡張機能	5
3	GIMPで大画像の上に複数枚の小画像を横一列に並べる \| GIMP 系(ソフトウェア)	5
3	XnConvertとは？／インストール／変換実行してみる	5
3	textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する \| CSS	5
3	RGB ／ 24ビットカラー	5
4	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	4
4	Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる \| Google Chrome(ブラウザ)	4
4	「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある \| z-index(CSS)	4
4	黒体／色温度／ D65（6500K）／ D50（5000K）／ K \| 色	4
5	画像縦横比の問題 \| 画像	3
5	Sleipnir \| ブラウザ	3
5	「Bootstrapデザイン」✕「グラフ」 \| 2系(Bootstrap)	3
5	チェック柄　斜め線 \| CSS	3
6	RGB ⇔ Lab \| 色変換(色)	2
6	縦横比が16:9となる整数値の組み合わせ	2
	2026/6/13 5:05 更新