Bootstrap 5 は、最も人気のあるフロントエンド フレームワークの 1 つであり、開発者が応答性が高く視覚的に魅力的な Web サイトを迅速に構築するのに役立つ、さまざまな便利なコンポーネントとユーティリティを提供します。

カード

カードは、Bootstrap 5 の多用途コンポーネントであり、コンテンツをすっきりと整理された方法で表示できます。見た目の美しさと機能性の両方を兼ね備えた方法で情報を紹介するのに最適です。

基本構造

基本カードは、カード ヘッダー、本文、フッターなどの要素を含む、クラス .card のコンテナーで構成されます。

  

    Featured
  
  

    
Card Title
    
Some quick example text.
    Go somewhere
  
  

    2 days ago
  

カードのカスタマイズ

カードを広範囲にカスタマイズできます:

• 画像: .card-img-top または .card-img-bottom を使用して画像を追加します。
• レイアウト: さまざまなレイアウトにカードデッキ、グループ、または列を使用します。
• Colors: .bg-primary、.text-white などのコンテキスト クラスを利用します。

  
Header
  

    
Primary card title
    
Text content goes here.
  

使用例

• ユーザープロフィール: ユーザー情報をアバターで表示します。
• 商品リスト: 画像と説明付きで商品を紹介します。
• ブログ投稿: タイトルと抜粋を含む記事の要約。

日付ピッカー

Bootstrap 5 にはネイティブの日付ピッカーが含まれていませんが、Tempus Dominus や Bootstrap Datepicker などのサードパーティ ライブラリを使用すると、ネイティブの日付ピッカーを簡単に統合できます。

実装

まず、必要な CSS および JS ファイルを含めます:

次に、日付ピッカーを初期化します:

カスタマイズオプション

• 形式: 日付形式をカスタマイズします。
• 開始日と終了日: 選択可能な日付範囲を制限します。
• テーマ: さまざまなスタイルを適用します。

サイドバー

サイドバーは、特に複雑な Web アプリケーションのナビゲーションに不可欠です。

レスポンシブサイドバーの作成

Bootstrap のグリッド システムと折りたたみコンポーネントを使用して、応答性の高いサイドバーを作成できます。

インタラクティブなサイドバー

インタラクションを追加してユーザー エクスペリエンスを向上:

• ホバー効果: CSS を使用してメニュー項目を強調表示します。
• 折りたたみ可能なメニュー: クリックすると展開するサブメニューを実装します。
• アイコン: Font Awesome または Bootstrap アイコンを使用してアイコンを組み込みます。

チェックボックス

チェックボックスを使用すると、ユーザーはセットから複数のオプションを選択できます。

チェックボックスのスタイル設定

Bootstrap 5 はカスタム チェックボックス スタイルを提供します:

  
    Default checkbox
  

チェックボックスグループ

チェックボックスをグループ化して整理しやすくします:

  Select Options:
  

    
  

フッター

フッターは追加のナビゲーションや情報を提供するために非常に重要です。

フッターのデザイン

シンプルなフッターを作成します:

スティッキーフッター

フッターを一番下に固定する:

html, body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

結論

これらの Bootstrap 5 コンポーネントをマスターすると、Web プロジェクトの機能と美しさを大幅に向上させることができます。 カード、日付ピッカー、サイドバー、チェックボックス、フッターをカスタマイズおよび実装する方法を理解することで、次のことが可能になります。ユーザーフレンドリーで視覚的に魅力的なウェブサイトを作成します。さまざまなスタイルや構成を試し続けて、特定のニーズに最適なものを見つけてください。

さらに読む:

• Bootstrap 公式ドキュメント
• ブートストラップのカスタマイズ