Bootstrap 3 折叠显示带有 V 形图标的状态

1个回答

despres

2025-07-09 23:28

Meta
Meta

使用 Bootstrap 3 折叠显示带有 V 形图标的状态

在网页设计和开发中，使用 Bootstrap 框架可以帮助我们快速搭建美观、响应式的网页。Bootstrap 3 是一个非常流行的版本，其中的折叠组件可以用于显示和隐藏内容，非常适合用于创建导航菜单、手风琴效果等。本文将介绍如何使用 Bootstrap 3 来实现折叠显示并带有 V 形图标的状态。

步骤 1：引入 Bootstrap 3 和 jQuery

首先，我们需要在页面中引入 Bootstrap 3 和 jQuery。可以通过 CDN 引入它们的最新版本，也可以下载并本地引入。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Collapse with V Icon</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS">
</head>
<body>
  
  <!-- 页面内容 -->
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.JS"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/JS/bootstrap.min.JS"></script>
</body>
</html>

步骤 2：创建折叠组件

接下来，我们需要创建一个折叠组件，并使用 Bootstrap 提供的样式和类来设置其外观和行为。

html
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        SEOne" aria-expanded="true" aria-controls="collapSEOne">
          第一个折叠项
        </a>
      </h4>
    </div>
    <div id="collapSEOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        这是第一个折叠项的内容。
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        
          第二个折叠项
        
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        这是第二个折叠项的内容。
      </div>
    </div>
  </div>
</div>

在上述代码中，我们使用了 panel-group 类来创建一个折叠组件容器，并为每个折叠项添加了 panel 类。通过设置 data-toggle="collapse" 和 data-parent="#accordion" 属性，我们实现了点击折叠项标题时展开或折叠对应的内容。

步骤 3：添加 V 形图标

为了在折叠状态下显示 V 形图标，我们需要使用自定义的 CSS 样式。在 Bootstrap 3 中，默认情况下只提供了加号和减号图标。下面是一个示例的自定义 CSS 样式，用于实现 V 形图标：

CSS
.panel-title .collapsed:after {
  content: '\e080';
  font-family: 'Glyphicons Halflings';
  float: right;
  color: #777;
}
.panel-title:after {
  content: '\e114';
  font-family: 'Glyphicons Halflings';
  float: right;
  color: #777;
}

请注意，上述 CSS 样式使用了 Bootstrap 自带的字体图标库 Glyphicons Halflings。这些图标可以通过设置 content 属性来显示。我们将 content 设置为 '\e080' 来显示 V 形图标，并将 content 设置为 '\e114' 来显示折叠状态下的 V 形图标。

步骤 4：完整代码和效果

将上述代码整合在一起，我们可以得到以下完整的 HTML 页面代码，并在浏览器中查看效果：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Collapse with V Icon</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS">
  <style>
    .panel-title .collapsed:after {
      content: '\e080';
      font-family: 'Glyphicons Halflings';
      float: right;
      color: #777;
    }
    
    .panel-title:after {
      content: '\e114';
      font-family: 'Glyphicons Halflings';
      float: right;
      color: #777;
    }
  </style>
</head>
<body>
  
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          SEOne" aria-expanded="true" aria-controls="collapSEOne">
            第一个折叠项
          </a>
        </h4>
      </div>
      <div id="collapSEOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          这是第一个折叠项的内容。
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          
            第二个折叠项
          
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          这是第二个折叠项的内容。
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.JS"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/JS/bootstrap.min.JS"></script>
</body>
</html>

以上代码将在浏览器中显示两个折叠项，点击折叠项的标题时，对应的内容将展开或折叠，并且标题旁边会显示一个 V 形图标，表示当前的折叠状态。

举报有用（4）分享收藏

Bootstrap 3 折叠显示带有 V 形图标的状态

1个回答

despres

热门话题

相关问题