SE

colを使ったレイアウト方法にはどういった方法があるのか教えてください。

PM

まずはグリッドシステムから理解していきましょう。

Bootstrapでのcolの使い方とは？

今回は、Bootstrapでのグリッドシステムの使い方を説明します。

グリッドシステムでは、 containersやrowsおよびcol でレイアウト調整します。

レイアウトを格子状に分解して配置するデザイン手法です。

Bootstrapでのグリッドシステムに興味のある方はぜひご覧ください。

基本的な使い方

Bootstrapでのグリッドシステムの基本的な使い方を紹介します。

.row や .col を用いて、画面を等分割できます。

See the Pen
bootstrap_col1 by kskumd (@kskumd)
on CodePen.

カラム指定

Bootstrapでは、画面の横幅を12分割したグリッドシステムを採用しています。

ここでは、カラム幅の指定方法を紹介します。

See the Pen
bootstrap_col2 by kskumd (@kskumd)
on CodePen.

カラム順序

Bootstrapでのグリッドシステムでは、カラム順序を指定できます。

orderの順番で表示されます。

See the Pen
bootstrap_col3 by kskumd (@kskumd)
on CodePen.

このようにBootstrapでのグリッドシステムでは、カラム順序を指定できます。

水平方向の配置

Bootstrapでのグリッドシステムでは、水平方向の配置を指定できます。

See the Pen
bootstrap_col4 by kskumd (@kskumd)
on CodePen.

SE

基本は格子状に配置された画面をどうレイアウトしていくかが基本の考え方なんですね。

PM

そうですね。スマホでもパソコンでも見やすいデザインを作ることができるので、ぜひマスターしてください。

まとめ

Bootstrapでのグリッドシステムの使い方を説明しました。

グリッドシステムでは、 containersやrowsおよびcol でレイアウト調整します。

レイアウトを格子状に分解して配置するデザイン手法です。

ぜひご自身でBootstrapのソースコードを書いて、理解を深めてください。