酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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

Eye Catch Image

Twitter Bootsrapでモーダル表示 HTML/HAMLテンプレートを作ってみました。 もしTwitterブートストラップでモーダルを作る際には、試してみて下さい!


HTML/HAML テンプレート

Bootsrap モーダルのHTMLのテンプレート。

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- モーダル呼び出し側 -->
<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">Close</button>
    <button class="btn btn-primary">Change</button>
  </div>
  </div>
</div>

Bootsrap モーダルのHAMLのテンプレート。

HAML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
-# モーダル呼び出し側
%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のヘッダに次のコードを入れる

コンソール
1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

これで小1時間無駄にした〜〜orz

おすすめの書籍