状態:-
閲覧数:3,374
投稿日:2012-02-13
更新日:2013-04-03
「current page」で白アイコンを利用する方法が、ちょっと分からなかったので、メモ
CSS
CSSで上記設定するだけ(但し、activeクラス付与は、自分で実装する必要あり)
アイコンの使い方に関する公式ドキュメント記載箇所
CSS
li.active a [class^="icon-"] {
background-image: url("../img/glyphicons-halflings-white.png");
}CSSで上記設定するだけ(但し、activeクラス付与は、自分で実装する必要あり)
アイコンの使い方に関する公式ドキュメント記載箇所
調査経緯
＜調査経緯＞
「Bootstrap, from Twitter」のドキュメントは若干、不親切。
日本語に訳されていないこともそうだが、
何かホントは色々なことが出来るのに、ワザと開発者向けに最低限の説明しかしていない、ような気すらする(多分、気のせいだと思うが…)。
「.インストール」で、「Twitter Bootstrap 講座 」受講してなかったら、
多分やってないと思うよコレ(Bootstrap)、ぐらいのレベル(ちなみに、まだ講座終わってなかったりするのだが……)。
「Twitter Bootstrapの基礎 | .インストール」メモ | DesignStyle
例えば、「Customize and download」ページ。選択内容によって、カスタマイズされた「CSS」「img」「js」がダウンロードできる、というコンセプトは素晴らしいのだが、出来れば一緒に、簡単な動作確認できるサンプルhtmlつけて欲しい、気がする…
Bootstrap, from Twitter
本題。
今日、気付いたのが、アイコンも設置できる！ ってこと。
それも「グローバルナビ」とか、「ボタン(ボタンはまだ試してないけど…)」とか、あらゆる場所で！
早速試してみたのだが、
アレ？
「current page」、「白アイコン」にならないよ、と。
どうすればいいのかな？
CSS設定すれば出来た！
だけど、ユーザー側でCSS設定するという仕様は、CSSフレームワークっぽくないね
でも、改めて考えてみれば、「current page」色を薄い色に設定した場合は、白アイコンなんて利用しないわけで、
ここら辺、利用者によって用途が違うため、CSSフレームワーク側では、
なるべく万人に共通の仕組みだけを組み込んで、後は選択制って感じにしてるんだろうね、
多分だけど……
Bootstrap 2.0 × Google MAP API
「Bootstrap, from Twitter 2」で、「Dropdowns bootstrap-dropdown.js」が動作しないときの対応案