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

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

v2.3.1

バージョン履歴
・2.0.4

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

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

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

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

どうしたら良い？

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

配布ファイル変更内容

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

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

　閲覧数:965　投稿日: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
	2025/12/23 18:01 更新

順位	ページタイトル抜粋	アクセス数
1	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	112
2	タグの"submit"属性の見た目を、CSSで変更しようとしてハマる \| フォーム(CSS)	11
3	鉄道会社毎のカラーコード \| カラーコード(色)	7
4	RGB → HSL を色モデルで考える \| 色変換(色)	6
5	RGB ⇔ Lab \| 色変換(色)	4
6	FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 \| Font Awesome(フォント)	3
6	Design 0	3
6	Chromeをインストール出来ない \| Google Chrome(ブラウザ)	3
6	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	3
7	RGB → 色相H … 最大値基準 × 図形の考え方 \| 色変換(色)	2
7	ユーザー個別の設定情報が格納されているレジストリキーを削除	2
7	効果を打ち消すスタイルシート \| CSS	2
7	Material Design 2014 年 \| Material Design(色)	2
7	「bgcolor」「background-color」「background」の違い \| CSS	2
7	「マウスオーバー」「ロールオーバー」「ホバー」の違い \| CSS	2
7	JavaScript in Bootstrap \| 2系(Bootstrap)	2
7	色モデルイメージ図 \| 色変換(色)	2
7	｢レイヤー」＋「レイヤー効果」をコピーして新規psdにペースト \| Photoshop	2
8	「隣接する直前要素」で「最初の要素以外」を指定するCSSセレクタは、囲う要素直前要素:not(:first-child):has(+ 直後要素){} \| CSS	1
8	HTML5(HTML) カテゴリー	1
	2025/12/23 1:01 更新