ブートストラップレイアウトの使用方法

ブートストラップレイアウトは、応答性のあるWeb開発を簡素化するための再利用可能なコンポーネントを提供するフロントエンドフレームワークです。そのレイアウトシステムは、.rowおよび.col-クラスを使用して行と列を作成する12列グリッドに基づいています。応答クラス（.col- {size} - {cols}）は、デバイスサイズに応じて列サイズを調整できます。アライメントクラス（.text-）を使用して要素を調整し、オフセットクラス（.Offset-*）はグリッドの先頭から列をオフセットできます。

ブートストラップレイアウト：ガイド

ブートストラップレイアウトとは何ですか？

Bootstrapは、レスポンシブWebページの開発を簡素化するために設計された再利用可能なHTMLおよびCSSコンポーネントのセットを提供する人気のあるフロントエンドフレームワークです。そのレイアウトシステムにより、開発者はグリッドベースのWebページを簡単に作成できます。

ブートストラップを使用したレイアウト

ブートストラップレイアウトを使用するには、次のことが必要です。

1。ブートストラップライブラリを含めます。

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"></code>

2。グリッドシステムを使用します。

ブートストラップグリッドシステムは、行と12列で構成されています。 .rowおよび.col-*クラスを使用して、行と列を作成できます。

 <code class="html"><div class="row"> <div class="col-sm-6">内容</div> <div class="col-sm-6">内容</div> </div></code>

3.応答サイズを指定します。

Bootstrapは、さまざまなデバイスサイズに応答する応答クラスを提供します。 .col-*-*の形でクラスを使用し、ここで、それぞれデバイスのサイズと列サイズを表します。

 <code class="html"><div class="col-md-4">内容（在中型设备上占4 列）</div></code>

4。要素の調整：

.text-left 、 .text-center 、 .text-rightなどの.text-*クラスに要素を揃えることができます。

 <code class="html"><p class="text-center">居中文本</p></code>

5。オフセット列： .Offset-*`クラスでは、グリッドの開始に対する列をオフセットできます。

 <code class="html"><div class="offset-md-4">内容（在中型设备上从第5 列开始）</div></code>

サンプルレイアウト

これが簡単なレイアウトの例です。

 <code class="html"><div class="container"> <div class="row"> <div class="col-sm-3">侧边栏</div> <div class="col-sm-9">正文区域</div> </div> </div></code>

このレイアウトは、小さな画面に3列のサイドバーと9列のメインエリアがあり、4列のサイドバーと大きな画面に8列のメインエリアがあります。

以上がブートストラップレイアウトの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。