Framework7-layout-grid
提供:Dev Guides
Framework7-レイアウトグリッド
説明
Framework7は、ユーザーのニーズに応じてコンテンツを配置するためのさまざまなタイプのグリッドタイプを提供します。
レイアウトグリッドは、次の表で説明するように、さまざまな種類の列サイズを提供します-
S.No | Class | Table Class | Width |
---|---|---|---|
1 | col-5 | tablet-5 | 5% |
2 | col-10 | tablet-10 | 10% |
3 | col-15 | tablet-15 | 15% |
4 | col-20 | tablet-20 | 20% |
5 | col-25 | tablet-25 | 25% |
6 | col-30 | tablet-30 | 30% |
7 | col-33 | tablet-33 | 33.3% |
8 | col-35 | tablet-35 | 35% |
9 | col-40 | tablet-40 | 40% |
10 | col-45 | tablet-45 | 45% |
11 | col-50 | tablet-50 | 50% |
12 | col-55 | tablet-55 | 55% |
13 | col-60 | tablet-60 | 60% |
14 | col-65 | tablet-65 | 65% |
15 | col-66 | tablet-66 | 66.6% |
16 | col-70 | tablet-70 | 70% |
17 | col-75 | tablet-75 | 75% |
18 | col-80 | tablet-80 | 80% |
19 | col-85 | tablet-85 | 85% |
20 | col-90 | tablet-90 | 90% |
21 | col-95 | tablet-95 | 95% |
21 | col-100 | tablet-100 | 100% |
22 | col-auto | tablet-auto | Equal width |
例
次の例は、Framework7で必要に応じてコンテンツを配置するためのグリッドレイアウトを提供します-
出力
上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
- 上記のHTMLコードを layout_gridl ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp://localhost/layout_gridlとして開きます。出力は以下のように表示されます。
- このコードは、ユーザーのニーズに応じてコンテンツを配置するためのさまざまなタイプのグリッドを提供します。