タイポグラフィ
タイプ
http://foundation.zurb.com/docs/components/type.html
基本的な要素を羅列します。
h1. This is a very large header.
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
↓結果
h1. This is a very large header.
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
h1.subheader
h2.subheader
h3.subheader
h4.subheader
h5.subheader
h6.subheader
↓結果
h1.subheader
h2.subheader
h3.subheader
h4.subheader
h5.subheader
h6.subheader
h1. Small segment header.
h2. Small segment header.
h3. Small segment header.
h4. Small segment header.
h5. Small segment header.
h6. Small segment header.
↓結果
h1. Small segment header.
h2. Small segment header.
h3. Small segment header.
h4. Small segment header.
h5. Small segment header.
h6. Small segment header.
Blockquotes
I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
↓結果
I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
印刷対応
印刷時は、以下の内容が適用されます。
- 背景、ボックスシャドウ、テキストシャドウは印刷されません
- リンクの後ろにリンク先のURLを付加します
- Blockquoteとpreにボーダーが付きます
- ページのクリーンナップとウィンドウの最小化
印刷時のみの表示の場合は.print-only、印刷時のみ非表示の場合は.hide-on-printを付けてください。
アラートボックス
アラートボックスは、右側の×（後述）をクリックすることで表示をhiddenにすることができます。
divに「data-alert」属性を付与し、class名に以下の表示スタイルを指定することで、色や形を変更することができます。
右側の×ボタンは、divの中にaタグを指定し、aタグに"close"classを付与するとaタグで囲んだ内容のボタンが付きます
例）<div data-alert class="alert-box radius">注意!<a href="" class="close">×</a></div>aタグのhrefにリンク先を指定してもcloseクラスが指定されているとリンクしません。
aタグの文字の中を自由に指定できますので、×以外の文字も表示できます。（アクションとしてはアラートボックスが消えるだけですが・・・）
標準的なアラートボックス (divに.alert-box.radiusを指定)
×
成功時に使用されるアラートボックス (divに.alert-box.successを指定)
？
アラートです (divに.alert-box.alert.roundを指定)
×
これは2次的なアラート (divに.alert-box.secondaryを指定)
×