ブートストラップアコーディオンをカスタマイズする方法

CSSを使用してアコーディオンヘッダーとボディスタイルをカスタマイズして、背景、色、境界線、タイポグラフィを変更します。 2。ブートストラップアイコンを統合し、CSSコンテンツを介して切り替えて、プラス/マイナスなどのカスタムアイコンにデフォルトの矢印を置き換えます。 3.デフォルトのスタイルを削除し、カードのようなデザインのためにBox-Shadow、Borderadius、およびマージンを適用して、間隔と境界を調整します。 4.オプションで、遷移プロパティを使用して崩壊アニメーション速度をカスタマイズするか、JavaScriptで無効にします。 5. Data-BS-Parentを使用してアコーディオンアイテムをグループ化して、1つのパネルのみが一度に開くことを確認します。 6. HTMLまたはJavaScriptのDataBS-Parent属性を削除または変更することにより、複数のパネルを開いたままにしてください。カスタマイズは、CSSオーバーライドとマイナーなHTMLまたはJavaScript調整を通じて達成され、完全にブランドのユーザーフレンドリーなアコーディオンコンポーネントを可能にします。

ブートストラップアコーディオンをカスタマイズすることは、サイトの設計に一致させたり、使いやすさを向上させたりする場合の一般的なタスクです。 Bootstrap 4または5を使用しているかどうかにかかわらず、デフォルトのアコーディオンは、CSSオーバーライドとオプションのJavaScriptの調整の組み合わせでスタイリングおよび変更できます。効果的に行う方法は次のとおりです。

1.アコーディオンヘッダーとボディスタイリングを変更します

デフォルトのアコーディオンは微妙なスタイリングを使用します。目立たせるには、ヘッダー（ボタン）とボディ（崩壊コンテンツ）をカスタマイズすることから始めます。

 / *アコーディオンボタンをカスタマイズ */
.accordion-button {
  バックグラウンドカラー：＃f8f9fa;
  色：＃212529;
  フォントサイズ：1rem;
  境界線：1pxソリッド＃dee2e6;
  ボーダーラジウス：8px;
  マージンボトム：8px;
}

/ *デフォルトのフォーカスアウトラインまたはスタイルITを削除 */
.accordion-button：フォーカス{
  Box-Shadow：なし;
  境界線：＃007BFF;
}

/ *スタイルアクティブ（オープン）状態 */
.accordion-button：not（.collapsed）{
  バックグラウンドカラー：＃e9ecef;
  色：＃0056B3;
  Box-Shadow：なし;
}

/ *アコーディオンボディをカスタマイズ */
.accordion-body {
  バックグラウンドカラー：#ffffff;
  ボーダートップ：1pxソリッド＃dee2e6;
  パディング：1REM;
  Font-Size：0.95Rem;
  色：＃495057;
}

注： .not(.collapsed)クラスは、BootstrapのJavaScriptによって自動的に切り替えられ、開いたパネルを示します。

2.デフォルトの矢印を削除し、カスタムアイコンを追加します

Bootstrapは、オープン/クローズで回転するバックグラウンドシェブロンを使用します。 Font AwesomeまたはBootstrapアイコンを使用して、カスタムアイコン（プラス/マイナスなど）に置き換えることができます。

ブートストラップアイコンを使用した例：

 <link href = "https://cdn.jsdelivr.net/npm/boottrap-icons@1.11.0/font/bootstrap-icons.css" rel = "styleSheet">

アコーディオンボタンを更新します：

 <button class = "accordion-button collapsed" type = "button" data-bs-toggle = "collapse" data-bs-target = "＃collapseone">
  セクション1 
  <i class = "bi bi-plus-circle ms-auto"> </i>
</button>

次に、CSSを使用して、状態に基づいてアイコンを交換します。

 .accordion-button：not（.collapsed）.bi-plus-circle :: before {
  コンテンツ： "\ f18c"; / * minus-circleアイコン */
}

.accordion-button.collapsed .bi-plus-circle :: before {
  コンテンツ： "\ f18e"; / * Plus-Circleアイコン */
}

または、デフォルトのアイコンを非表示にして、2つの別々のアイコンで可視性を管理できます。

3.間隔と境界を調整します

パディング、マージン、境界線を調整することにより、全体的な外観を制御します。

 .ACCORDION-ITEM {
  国境：なし;
  ボーダーラジウス：12px;
  オーバーフロー：隠し;
  Box-Shadow：0 2px 10px RGBA（0,0,0,0.1）;
  マージンボトム：10px;
}

.accordion-header {
  国境圏：なし;
}

これは、よりモダンなカードのような外観を与えます。

4。崩壊アニメーションのカスタマイズ（オプション）

Bootstrapは、崩壊にCSSトランジションを使用します。速度を微調整できます。

 .accordion-collapse {
  遷移：高さ0.3秒の容易さ。
}

または、 collapseクラスを削除し、JavaScriptを介して処理することにより、アニメーションを完全に無効にします。

5.常に1つのパネルを開くようにします（デフォルトの動作）

これはすでにブートストラップでデフォルトですが、PANELをリンクするためにdata-bs-parentを使用していることを確認してください。

 <div class = "accordion" id = "myaccordion">
  <div class = "accordion-item">
    <h2 class = "accordion-header">
      <button class = "Accordion-button collapsed" data-bs-toggle = "collapse" data-bs-target = "＃collapsone" aria-controls = "collapseone" data-bs-parent = "＃myaccordion">
        セクション1
      </button>
    </h2>
    <div id = "collapseone" class = "accordion-collapse" data-bs-parent = "＃myaccordion">
      <div class = "accordion-body">コンテンツ1 </div>
    </div>
  </div>
  <！ - その他のアイテム - >
</div>

data-bs-parent一度に1つのパネルのみが開くことを保証します。

6.オプション：複数のパネルを開くことができます

data-bs-parentを削除するか、JavaScriptの別のコンテナまたはnullに設定します。

 //複数の開いたパネルを許可します
document.QuerySeLectorall（'。Accordion-button '）。foreach（button => {
  button.addeventlistener（ 'click'、（）=> {
    //親グループを実施しないでください
  }）;
}）;

または、単にHTMLからdata-bs-parentを省略します。

ブートストラップアコーディオンをカスタマイズするには、JavaScriptを最優先する必要はありません。スマートCSSとマイナーなHTMLの調整は必要です。 .accordion-button 、 .accordion-body 、およびparent .accordion-itemクラスに焦点を当てると、完全にブランドの外観を実現できます。基本的に、好きではないスタイルを無効にし、アイコンやアニメーションとの相互作用を強化します。

以上がブートストラップアコーディオンをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。