CSS を使用して、Bootstrap 3 アコーディオンパネルに山形アイコンを追加して、折りたたみ状態を視覚的に示すにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して、Bootstrap 3 アコーディオンパネルに山形アイコンを追加して、折りたたみ状態を視覚的に示すにはどうすればよいですか?

DDD

リリース： 2024-12-01 18:33:10

オリジナル

348 人が閲覧しました

How can I add chevron icons to Bootstrap 3 accordion panels to visually indicate their collapse state using CSS?

CSS を使用して折りたたみ状態のシェブロンアイコンを表示する

Bootstrap 3 フレームワークでは、折りたたみ可能なパネルを作成するためにアコーディオンコンポーネントがよく使用されます。これらのパネルのデフォルト機能には表示の切り替えが含まれていますが、ユーザーは山形アイコンを使用して現在の折りたたみ状態を視覚的に表示することで、これをさらに強化したい場合があります。

CSS アプローチ

次の CSS アプローチを使用して、パネル見出しに山形を追加できます:

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

ログイン後にコピー

これを使用するにはこのアプローチでは、上記の CSS をスタイルシートに追加します。これにより、パネルの見出しに山形が追加され、開いたパネルには下向きの山形が表示され、折りたたまれたパネルには上向きの山形が表示されます。

サンプル HTML

これを使用CSS を配置すると、次の HTML で山形の付いた折りたたみ可能なパネルが生成されます。 icons:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group">

ログイン後にコピー

このアプローチは、パネルの現在の状態に視覚的な手がかりを提供することでユーザーエクスペリエンスを向上させ、ユーザーが折りたたみ可能なパネルを理解し、操作しやすくします。

以上がCSS を使用して、Bootstrap 3 アコーディオンパネルに山形アイコンを追加して、折りたたみ状態を視覚的に示すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。