ツールチップとポップオーバー

ツールチップ
これはスマホのインテントみたいなかんじで
マウスオーバーとかで文字がでる
<a href="#" rel="tooltip" data-original-title="補足情報">tooltip</a>

これでできる
必要なのは
rel="tooltip"

そして
data-original-title="" に表示したい文字を記述する

ソースにすると
<a href="#" rel="popover" data-original-title="補足情報" data-content="もっ>と詳しい内容">popover</a>

あと、重要なこととして
これはcanvas とか webstrage みたいに
java script が必要

なので、
<script>
$(function(){
$('a[rel=tooltip]').tooltip();
});
</script>

とする
また
$('a[rel=tooltip]').tooltip();
を
$('a[rel=tooltip]').tooltip({'placement': 'bottom'});
とすれば
下にでるので見やすくなる

tooltip();
は bootstrap に入っている


ポップオーバー
こちらは、ツールチップより詳しく表示できる
まず、ツールチップと同じように
data-original-title=""へ表示したい文字列
さらに
data-content="" へもっと詳しい内容
を表示する

これも、ツールチップみたいに
java script でコントロールする

なので、script タグが必要
$('function(){
$('a[rel=popover]').popover();
});
となる

他にもオプションをつけれるようなので
http://twitter.github.io/bootstrap/javascript.html#popovers
を参考にするとサンプルがあってわかりやすい

ツールチップとポップオーバーに関しては
ドットインストールで動画で分かりやすく解説されているんどえ
こちらも参考にするとわかりやすいのでおすすめ

http://dotinstall.com/lessons/basic_twitter_bootstrap_v3/8818

モーダルウインドウ作成

モーダルウインドウ作成

モーダルウインドウは、ユーザになんらかの操作を
促すウインドウ

必要なのは呼び出すボタンと
ウインドウ

まずはボタンを a要素で作成

,a href="#myModal" class="btn" data-toggle="modal">Modal window</a>

これで
class="btn" によりリンクがボタンの形になる

そして、次にウインドウの作成
これは
<div id="myModal" class="modal h8ide fade">
</div>
としてウインドウをつくる

そして、スマホページのように
ヘッダー
ボディ
フッターを作成する

ヘッダーは
<div class="modal-header">
</div>

ボディは
<div class="modal-body">
</div>

フッターは
<div class="modal-fotter">
</div>
で作成

それぞれに記述していく

ヘッダーには閉じるボタンをつけたいので
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
</div>
とする

プログレスバーの表示

進捗状況を表すのに使う

<div class="progress">
</div>
で指定して

進捗状況は
<div class="bar" style"=width:45%">
</div>

また、ストライプにする。つまりシマシマ模様にするなら
<div class="progress progress-striped">
とする

動きも付け加えたいのなら
<div class="progress progress-striped active">
として
さらに色もつけたいのなら
<div class="progress progress-striped active progress-success">

詳しいことは
http://twitter.github.io/bootstrap/components.html#progress
を参考にするとわかりやすい

ラベルとバッジとアラート

ラベルをつけるなら
<p>
<span class="label">Note</span> Message
</p>

というようにする

また、このラベルには種類があり

label-warning にするとオレンジ色
label-info にすると水色になる

次にバッジ
スマホのメールの未読数字のように表示される

やり方は
<span class="badge">5</span>
というようにする

ちなみに、これも色を変えることができる
<span class="badge badge-important">5</span>
とすれば赤い色になる

ラベルとバッジに関しては
http://twitter.github.io/bootstrap/components.html#labels-badges
を参考にする

次はアラート

<div class="alert">
Message
</div>
とすることで、
Message というアラートができる

このアラートも
http://twitter.github.io/bootstrap/components.html#alerts
に詳しい解説が載っている

<div class="alert alert-success">
とすれば、アラートの背景色が緑になる

また、アラートとボタンの組み合わせもできる

<button type="button" class="close" data-dismiss="alert">×</button>

とすれば
アラートのところにxの消すボタンができるので
これを押せば、アラートが消える

あと、視覚効果でフワッと消すなら
<div class="alert alert-success fade in">
とすれば
ボタンと組み合わせることでふわっと消える

Boostrap のカスタマイズ と LESS

Boostrap のカスタマイズ

boostrap.css の背景色などの値を変更する場合

直接CSSの内容を変更するか
別に作成したCSSでオーバーライドして値を変更する

boostrap の CSS は
LESS　を利用して記載されているので
boostrap.css の元となるLESSファイルを変更することで
直接 boostrap.css を変更するより簡単に値の変更ができる

LESSは、コンパイルすることでCSSを出力するため
環境構築が必要
このためBoostrap では
カスタマイズ用のサイトを用意しているので
web サイトで LESS の変数の値を変更して

この変更された値でコンパイル済みの
Boostrap のファイル一式をダウンロードするのが
効率的

Boostrap のカスタマイズ用の web サイトは
http://twitter.github.io/bootstrap/customize.html

customize and download

このLESSについては
日本語ページなら
http://less-ja.studiomohawk.com

英語なら
http://lesscss.org
に仕様などがかかれています

LESSとは
CSSの言語を拡張して
CSSではでできなかった
変数
ミックスイン
演算
関数のような動的処理をCSSへ追加拡張した言語のこと