Bootstrap v2.3.1

Bootstrap2系

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

v2.3.1


バージョン履歴
・2.0.4

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

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

何が問題?


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


「2.1.0」未満での対応


・ハックするしかない


「2.1.0」追加オプション


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

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

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

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

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

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

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


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


どうしたら良い?


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


配布ファイル変更内容


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

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

 閲覧数:436 投稿日: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



週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新