Linux & Android Dialy

ツールチップ
これはスマホのインテントみたいなかんじで
マウスオーバーとかで文字がでる
<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”>
とすれば
ボタンと組み合わせることでふわっと消える