6.2.2. 基本的な画面レイアウト別実装例¶

6.2.2.1. 固定レイアウト（１カラム）¶

コンテンツエリアの一番外側の div の class 属性の説明です。

• 一番外側の div の class 属性に imui-form-container 、 imui-form-container-narrow 、 imui-form-container-wide のいずれかのコンテナクラスを指定します。

1 2 3

<div class="imui-form-container"> ... </div>

• 指定した class により枠の幅 (%) が変わります。（サンプル画像では style=height:300px を指定）

imui–form–container	imui–form–container–narrow	imui–form–container–wide
width:75%	width:60%	width:90%

6.2.2.2. 左右に分割するレイアウト（２カラム）¶

コンテンツエリアを左右に分割したい場合の実装例です。

• Twitter の Bootstrap を利用します。
• 実装例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2" style="height:400px;">
      <div>sidebar content</div>
    </div>
    <div class="span10" style="height:400px;">
      <div>body content</div>
    </div>
  </div>
</div>

• 画面