- グリッドシステムの基本的な使用法: Bootstrapのグリッドシステムは、行（row）と列（column）の組み合わせで構成されています。以下のコード例は、2つのサイドバイサイドの列を作成する基本的な方法です。
<div class="container">
<div class="row">
<div class="col-md-6">左側のコンテンツ</div>
<div class="col-md-6">右側のコンテンツ</div>
</div>
</div>この例では、col-md-6クラスを使用して、各列が画面の半分の幅を占めるようにしています。適宜、col-md-6を変更することで、異なる列の幅を設定することができます。
- 列のレスポンシブな配置: Bootstrapのグリッドシステムでは、列の幅をデバイスのサイズに応じて自動的に変更することができます。以下の例は、デスクトップではサイドバイサイドの列を表示し、モバイルデバイスでは縦に積み重ねる方法です。
<div class="container">
<div class="row">
<div class="col-lg-6">左側のコンテンツ</div>
<div class="col-lg-6">右側のコンテンツ</div>
</div>
</div>上記の例では、col-lg-6クラスを使用して、デスクトップデバイスの場合にのみ列をサイドバイサイドに配置しています。モバイルデバイスでは自動的に縦に積み重ねられます。
- 列の追加とレイアウトの調整: Bootstrapのグリッドシステムでは、必要に応じて列を追加し、レイアウトを調整することもできます。以下の例は、3つの列を作成し、幅の調整を行う方法です。
<div class="container">
<div class="row">
<div class="col-md-4">左側のコンテンツ</div>
<div class="col-md-4">中央のコンテンツ</div>
<div class="col-md-4">右側のコンテンツ</div>
</div>
</div>上記の例では、各列にcol-md-4クラスを使用して、画面の幅を均等に3つの列に分割しています。必要に応じて、列の数や幅を調整することができます。
これらはBootstrapを使用してサイドバイサイドの列を作成するいくつかの一般的な方法です。適切なクラスとスタイルを適用することで、ウェブページのレイアウトを柔軟に調整することができます。