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

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

v2.3.1

バージョン履歴
・2.0.4

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

　閲覧数:1,293　投稿日: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,252　投稿日:2013-03-27　更新日:2013-03-27

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

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

どうしたら良い？

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

配布ファイル変更内容

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

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

　閲覧数:1,143　投稿日: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/10/31 4:58 更新

順位	ページタイトル抜粋	アクセス数
1	Design 0	16
2	「bgcolor」「background-color」「background」の違い \| CSS	6
3	鉄道会社毎のカラーコード \| カラーコード(色)	5
4	カラーコード／色コード \| カラーコード(色)	4
4	「東京都」のカラーコード取得は難しい \| カラーコード(色)	4
5	「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) \| Font Awesome(フォント)	3
6	Flickrがサポートするライセンス 9 ＋特別なライセンス 2 \| 画像著作権(画像)	2
6	Illustrator 2 で作成したデータを、Fireworks 8 で読み込む \| Fireworks 8(Fireworks)	2
6	「マウスオーバー」「ロールオーバー」「ホバー」の違い \| CSS	2
6	HSLとHSVの違い \| 色変換(色)	2
6	縦横比が16:9となる整数値の組み合わせ	2
6	「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 \| AI画像生成	2
6	Chromeブックマークショートカット \| Chromeブックマーク(ブラウザ)	2
6	Stylus(Chrome 拡張機能) カテゴリー	2
6	レスポンシブサイトにおけるスマホ表示用画像指定	2
6	Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない \| Google Chrome(ブラウザ)	2
6	Adobe Camera Raw 4.0 \| Photoshop	2
6	スキップリンク \| アクセシビリティ(UI)	2
6	「display:flex;」を設定している「タグ」内の「タグ」クリック範囲を拡大する \| Flexible Box Layout Module(CSS)	2
6	画像素材 \| 画像	2
	2026/10/30 5:05 更新