Bootstrapの主な特徴の一つは、グリッドシステムです。グリッドシステムを使用することで、ウェブページを簡単に列と行に分割し、レイアウトを作成することができます。例えば、以下のコードは、2つの列を持つレイアウトを作成する方法を示しています。
<div class="container">
<div class="row">
<div class="col-md-6">左側のコンテンツ</div>
<div class="col-md-6">右側のコンテンツ</div>
</div>
</div>このコードでは、.container クラスはコンテンツを包むコンテナを定義し、.row クラスは行を作成します。そして、.col-md-6 クラスは、2つの列を持つレイアウトを作成します。
さらに、Bootstrapにはさまざまなコンポーネントやスタイルが用意されています。例えば、ボタンやナビゲーションバー、フォームなどのコンポーネントがあります。以下のコードは、Bootstrapのボタンを使用する方法を示しています。
<button class="btn btn-primary">クリックしてください</button>このコードでは、.btn クラスと .btn-primary クラスを使用して、Bootstrapのスタイルを適用したボタンを作成しています。
さらに、Bootstrapはレスポンシブデザインにも対応しており、異なるデバイスや画面サイズに応じて自動的にレイアウトを調整します。これにより、同じウェブページがデスクトップ、タブレット、スマートフォンなどの様々なデバイスで適切に表示されます。
以上がBootstrapの概要と基本的な使い方の紹介です。詳細な情報や他のコンポーネントの使用方法については、公式のBootstrapドキュメントを参照してください。