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

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

v2.3.1

バージョン履歴
・2.0.4

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

　閲覧数:1,003　投稿日: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」クラスを明示的に指定するよう変更

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

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

　閲覧数:923　投稿日:2013-03-27　更新日:2013-03-27

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

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

どうしたら良い？

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

配布ファイル変更内容

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

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

　閲覧数:851　投稿日: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/3/10 19:43 更新

順位	ページタイトル抜粋	アクセス数
1	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	7
2	金融機関ブランドカラー／コーポレートカラー \| カラーコード(色)	6
2	RGB ⇔ Lab \| 色変換(色)	6
3	「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) \| Font Awesome(フォント)	5
3	このエントリーの結論／変更するまで／変更後	5
3	鉄道会社毎のカラーコード \| カラーコード(色)	5
3	「東京都」のカラーコード取得は難しい \| カラーコード(色)	5
4	色モデルイメージ図 \| 色変換(色)	3
4	24ビットカラーにおけるHLS要素範囲／最小値～最大値	3
4	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	3
5	G'MIC \| GIMP 系(ソフトウェア)	2
5	16進数カラーコード／ 2進数	2
5	「bgcolor」「background-color」「background」の違い \| CSS	2
5	「line-height」効果を打ち消すスタイルシートは、「line-height:normal;	2
5	「display:flex;」を設定している「タグ」内の「タグ」クリック範囲を拡大する \| Flexible Box Layout Module(CSS)	2
5	血の色／ #b30000 ／ #360800 ／ #ff0000 \| カラーコード(色)	2
5	FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 \| Font Awesome(フォント)	2
6	「OOCSS」とは別の考え方？ \| 命名規則(コーディングルール)	1
6	効果を打ち消すスタイルシート \| CSS	1
6	2系(Bootstrap) カテゴリー	1
	2025/3/10 1:01 更新