カテゴリー: Twitter Bootstrap

ツールチップ
これはスマホのインテントみたいなかんじで
マウスオーバーとかで文字がでる
<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 のカスタマイズ
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へ追加拡張した言語のこと

li class=”unstyled” とすると
オーダーを削除し、左寄せに表示できる
class=”btn” とすると
カーソルが当たったときの
ホバー表示
クリックしたときの車道などの表現が追加される
また
class=” btn btn-success”
class=”btn btn-danger”
とすれば
ボタンの色を変更できる
ボタンには Boostrap であらかじめ用意されている
アイコンを表示することも可能
ゴミ箱のアイコンなら
icon-trash とすればOK
また、ボタンのグループ化も可能
グループ化したいなら
そのボタンを div タグでくくって
class=”btn-group”
とすれば、ボタンのグループ化ができる
例えば
</div>
<div class=”btn-group” style=”margin-top:10px;”>
<button class=”btn btn-success”>作成</button>
<button class=”btn btn-success”>削除</button>
</div>
というようにする

boostrap 適用
<link href=”css/boostrap.min.css” rel=”stylesheet”>
<link href=”css/boostrap-responsive.min.css” rel=”stylesheet”>
これで
boostrap.css を読み込んでから
boostrap-responsive.css を読み込む
あらかじめ
メディアクエリーが指定されているので
画面サイズに合わせてえスタイルが細かく制御される
メディアクエリーとは
メディア、たとえば、プリンタ、ディスプレイなど
と閲覧者の環境、つまり画面サイズに応じて
CSSの適用条件を細かく指定できるという仕組みのこと
#media (min-width: 768px) and (max-width:979px){
//画面さいず最小　768px
最大で 979px の場合に視聴するスタイルを記述
}
#media (max-width]707px){
//画面さいず最大 767px のときに使用するスタイルを記述
}
ということで
買物リストアプリの header タグに
boostrap 適用
<header class=”navbar navbar-fixed-top”>
<nav class=”navbar-inner”>
<span class=”brand”>買物長</span>
<ul class=”nav”>
<li class=”active”><a href=”index.html”>買物帳リス
ト</a></li>
</ul>
</nav>
</header>
ヘッダーをナビゲーションバーへ変更する
これは
class=”navbar”
class=”navbar-inner”
を指定することで見た目をナビゲーションバーにできる
あわせて
navbar-fixed-top とすれば
画面さいずが変更されたときでも
ナビゲーションバーを画面上部へ固定できる
class=”brand”とすると
サイトのブランド名を表示できる
ナビゲーションバーにリンクを追加したいなら
class=”nav”
とする
現在表示している画面のリンクをアクティブに見せるには
class=”active”
とすればリンクが強調表示される

Boostrap をダウンロード
zip なので、これを解凍
css には
boostrap.css
boostrap-responsive.css
boostrap-responsive.css には
Responsible Design に必要な設定が記載されている
これらのファイルを
minify したのが
boostrap.min.css
boostrap-responsive.min.css
とうこと
img には
Boostrap で使うイメージがある
glyhicons-halfings.png
glyphicons-falfings-white,png
はイメージの色が違う
js の中には
boostrap.js
boostrap.min.js
となっている
Boostrap で画面に簡単に動作を加えることができるように
あらかじめ用意されているJavaScript になる
モーダルダイアログ
タブ
ドロップダウンリスト
などが用意されている
jQuery に依存しているので
jQuery を読み込み、その後、
boostrap.js を読み込んでから使う
Boostrap.min.js は minify したファイル
になっている

本日　Twitter Bootstrap
をつかったマッシュアップの
講習に参加します
Twitter Bootstrap
について、参考サイトを紹介していただきました
動画でみることができるので
分かりやすいと思います
以下がそのサイトです
#01 学習に必要なファイルを揃える
以前、動画でまなぶDVDの教材がありました
この教材では基礎でしたが
今後は
このサイトのように動画で学習できるものが多くなりそうです
Ustream と　再現可能な内容
そして
パスワードつきで閲覧というようにすると
限定メンバーでの
オンラインセミナーなどもできそうです