人気のスタイリング ライブラリ/フレームワークをいくつか紹介するスタイリング シリーズの第 2 部へようこそ。このブログでは、Bootstrap について説明します。 Bootstrap は、直感的なグリッド システム、UI コンポーネント、および広範なユーティリティを提供することで、Web サイトの構築をより迅速かつ簡単にする強力なオープンソース フロントエンド フレームワークです。

設定

もちろん、いくつかの機能に入る前に、プロジェクトでのブートストラップのセットアップについて話しておく必要があります。 この記事の執筆時点では、Bootstrap の現在のバージョンは 5.3.3 であり、これを例に使用します。

CDN 経由のブートストラップ

ブートストラップは、CDN (コンテンツ配信ネットワーク) を使用して非常に迅速にセットアップできます。この方法ではインストールは必要ありません。Bootstrap の CSS および JavaScript リンクを HTML ファイルに追加するだけで、レースに参加できます!
次の CSS リンクを HTML の

その後、

パッケージマネージャー経由

大規模なプロジェクトで作業している場合、または最新のフロントエンド ツールを使用して作業している場合は、プロジェクト マネージャーを介してインストールすることをお勧めします。幸いなことに、これも簡単です。ターミナルで、npm を使用する場合は「npm install bootstrap」と書き、yarn を使用する場合は「yarn add bootstrap」と書くだけです。インストール後、ブートストラップの CSS と JavaScript をメインの CSS ファイルと JS ファイルに丁寧にインポートする必要があります:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

グリッドシステム

Bootstrap の最も強力な機能の 1 つは、グリッド システムです。これにより、さまざまな画面サイズに自動的に調整されるレスポンシブなレイアウトを作成できます。

構造

グリッドは 12 列構造に基づいてコンテンツを整理します。その基本構造は次のようになります:

  

    
Column 1
    
Column 2
    
Column 3
  

• コンテナ: コンテナは列と行を整列させながら保持します
• 行: 行は列を保持し、水平方向にグループ化します
• Col: 列はコンテンツが存在する場所であり、各行には 12 個の
を含めることができます。

サイズ

列には独自のサイズを指定することもできます。これを使用して、さまざまなレイアウトを提供できます。これらは、行内で占める列数によって表記されます。

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

ブレークポイント

Bootstraps グリッドはモバイル ファーストです。つまり、大型デバイスにスケールアップする前にモバイル デバイス向けに構築されています。このため、Bootstrap には、さまざまな画面サイズで列がどのように動作するかを定義するクラスがあります。これらは：

• xs: 576px 未満の画面の場合
• sm: 576px を超える画面の場合
• md: 768px を超える画面の場合
• lg: 992pxを超える画面の場合
• xl: 1200pxを超える画面の場合

例えば：

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

この例では、小さい画面では最初の列が全幅を占めますが、中程度以上の画面では 8 つのグリッド単位のみを占めます。 2 番目は、小さい画面では幅の半分を占めますが、中型以上では 4 単位のみを占めます。

共通コンポーネント

Bootstrap は、最小限のカスタム CSS で魅力的でユーザーフレンドリーな Web サイトを作成するのに役立つ、さまざまな事前構築済みコンポーネントを提供します。コンポーネントはたくさんあるので、使用する可能性が高い一般的なコンポーネントをいくつか説明します。

タイポグラフィ

ユーザーは読む必要があるため、まずテキストについて話します。タイポグラフィ クラスを使用すると、見出しから本文、リストに至るまで、一貫したテキスト スタイルを簡単に定義できます。たとえば、さまざまな見出しは表示クラスによって表記されます:

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

上記のように、ユーティリティ クラスを使用して段落テキストを定義し、本文テキストを変更することもできます。

ボタン

すべてのウェブサイトやアプリにはボタンが必要です。 Bootstrap では、すぐに使えるさまざまなボタン スタイルが提供されます。それらのクラスは次のように定義されています:

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

ナビゲーションバー

Bootstrap のナビゲーションバー コンポーネントには、配置、ドロップダウンなどのためのクラスが組み込まれています。

この例では、小さい画面ではナビゲーションバーが折りたたまれます。

ユーティリティクラス

Bootstrap には、開発を迅速化し、カスタム CSS の必要性を減らすのに役立つ幅広いユーティリティ クラスも含まれています。いくつかのクラス名を使用するだけで、間隔、配置、表示プロパティなどを調整できます!

間隔

スペースは開発においてユーザーの読みやすさを考慮して非常に重要です。ありがたいことに、Bootstrap には要素のマージンとパディングを調整するためのクラスが用意されています。これらはすべて、{property}{sides}-{size}.

• プロパティ: m はマージン、p はパディング
• 辺: t 上、b 底、l 左、r 右、x 左と右、y 上と下、またはすべての辺が空白
• サイズ: 0、1、2、...、または自動

例えば：

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

画面

表示ユーティリティは、要素の表示とレイアウトを制御するのに役立ちます。これらを使用して、要素の動作を表示、非表示、または変更することができます。表示クラスには次のものが含まれます:

• d-block：ブロック要素として表示
• d-inline: インライン要素として表示
• d-none: 要素を非表示にする
• d-flex: フレックスボックスを有効にする
• d-inline-block: インラインブロックとして表示

Bootstrap は、d-none d-md-block などのブレークポイントに適用されるこれらのクラスの応答バージョンも提供します。これにより、小さな画面では要素が非表示になります。

Visible on medium and larger screens
Centered with Flexbox

テキストユーティリティ

Bootstrap では、次のようなクラスを使用して大量のテキストをカスタマイズできます。

テキストの配置

• text-start: テキストを左揃えにします
• text-end: テキストを右揃えにします
• text-center: テキストを中央に揃えます

テキストの折り返し

• text-nowrap: テキストが次の行に折り返されないようにします
• text-truncate: 長すぎる場合は省略記号でテキストを切り詰めます

文字の色

• text-primary: 原色のテキスト (デフォルト: 青)
• text-success: 成功の色のテキスト (デフォルト: 緑)
• text-danger: 危険の色のテキスト (デフォルト: 赤)

This text is centered and green
This text is right-aligned and blue

結論

Bootstrap は、開発者が応答性の高い Web サイトを効率的に構築できるようにする強力で柔軟なフレームワークです。これらの基本概念をマスターすることで、ワークフローを合理化し、カスタム CSS やレイアウト管理ではなく、サイトのデザインと機能に集中できるようになります。だから飛び込んでみよう！いくつかの例を試して、素晴らしいアプリを構築してください!

情報源

ブートストラップ