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은 갈매기형 표시가 있는 축소 가능한 패널을 생성합니다. 아이콘:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!