![Eye Catch Image](/img/2012-12-06-twitter-bootsrap-modal_1.jpg)
Twitter Bootsrapでモーダル表示HTML/HAMLテンプレートを作ってみました。
もしTwitterブートストラップでモーダルを作る際には、試してみてください!
🚜 HTML/HAMLテンプレート
BootsrapモーダルのHTMLのテンプレート。
<a class="btn" data-toggle="modal" href="#show_modal" role="button"> モーダル呼び出しボタン a>
<div id="show_modal" class ="modal hide fade" aria-hidden="true" aria-labelledby="modal_label" role="dialog" style="display: none; " tabindex="-1"> <div class="modal-header"> <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×button> <h3 id="modal_label">モーダル画面のタイトルh3> <div class="modal-body"> <h4>テーマh4> <p>メッセージp> div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">Closebutton> <button class="btn btn-primary">Changebutton> div> div> div>
|
BootsrapモーダルのHAMLのテンプレート。
%a.btn{"data-toggle" => "modal", :href => "#show_modal", :role => "button"} モーダル呼び出しボタン
#show_modal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "modal_label", :role => "dialog", :style => "display: none; ", :tabindex => "-1"} .modal-header %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} × %h3#modal_labelモーダル画面のタイトル .modal-body %h4テーマ %pメッセージ .modal-footer %button.btn{"data-dismiss" => "modal"} Close %button.btn.btn-primary Change
|
下は、Bootsrap/Bootswatch/Cosmoでのモーダルのサンプルです。
![fpu_tmp_1354801932.2845_6c09fa](/img/2012-12-06-twitter-bootsrap-modal_2.jpg)
😼 おまけ:Bootsrapでレスポンシブ
Twitter Bootsrapでレスポンシブのデザインにするときについつい忘れてしまうのでメモ。
HTMLのヘッダに次のコードを入れる
"viewport" content="width=device-width, initial-scale=1.0"> "assets/css/bootstrap-responsive.css" rel="stylesheet">
|
これで小1時間無駄にした〜〜orz
🖥 VULTRおすすめ
「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。
最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!