Bootsrapでモーダル表示HTML/HAMLテンプレート


Eye Catch Image

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

😼 おまけ: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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍