Bootstrap v3 使用JavaScript实现面板的开关

原创

于 2023-06-28 19:55:44 发布 · 788 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #bootstrap #前端

本文介绍了如何在网页中使用Bootstrap框架创建面板，包括引入必要的JS和CSS文件，复制并粘贴面板内容，以及通过JavaScript实现面板的显示和隐藏功能。提供了两种方法，一种是通过按钮切换面板的可见性，另一种是分别定义打开和关闭面板的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、准备工作

首先在网页文件中引入bootstrap的三个文件，分别是jquery、js、css这三个文件

<script src="bootstrap/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

二、Copy面板

先到bootstrap中文网v3文档中复制面板的内容，注意不要直接copy

Bootstrap中文网v3文档之面板内容https://v3.bootcss.com/components/#panels

找到你想要的面板格式后先右击检查

找到两个相对应的类名然后右击复制

复制完成后直接返回html文件中进行粘贴即可

这里我使用的是表格面板

<!--面板-->
<div class="panel panel-default container" id="my_panel" style="display: none">
      <!-- Default panel contents -->
      <div class="panel-heading">Panel heading</div>
      <div class="panel-body">
        <p>Some default panel content here. Nulla vitae elit liber