Bootstrap 组件案例---手风琴：折叠和卡片

最新推荐文章于 2023-10-22 11:08:53 发布
最新推荐文章于 2023-10-22 11:08:53 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qazwsx_edc1/article/details/81137605
版权

 

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>

    <title></title>

    <link rel="stylesheet" href="css/bootstrap.css"/>

    <script src="js/jquery.min.js"></script>

    <script src="js/popper.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</head>

<body>

 <div class="container">

     <h1>手风琴：折叠和卡片</h1>

     <div id="accordion">

         <!--卡片1-->

        <div class="card">

            <!--卡片头部-->

            <div class="card-header">

                <a href="#collapseOne" class="card-link" data-toggle="collapse">选项内容一</a>

            </div>

            <!--卡片主要内容-->

            <div id="collapseOne" class="collapse" data-parent="#accordion">

                <div class="card-body">

                    内容1：努力实现梦想，加油！！！

                </div>

            </div>

        </div>

         <!--卡片2-->

         <div class="card">

             <!--卡片头部-->

             <div class="card-header">

                 <a href="#collapseTwo" class="card-link" data-toggle="collapse">选项内容二</a>

             </div>

             <!--卡片主要内容-->

             <div id="collapseTwo" class="collapse" data-parent="#accordion">

                 <div class="card-body">

                     内容2：学习改变命运！！！

                 </div>

             </div>

         </div>

         <div class="card">

             <!--卡片头部-->

             <div class="card-header">

                 <a href="#collapseThree" class="card-link" data-toggle="collapse">选项内容三</a>

             </div>

             <!--卡片主要内容-->

             <div id="collapseThree" class="collapse" data-parent="#accordion">

                 <div class="card-body">

                     内容3：好好学习，学习改变命运！！！

                 </div>

             </div>

         </div>

     </div>

 </div>

 <br/><br/><br/><br/><br/><br/>

</body>

</html>

 

 

咸鱼-咸鱼-咸鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
专研前端，探索后端
05-16 1141
分页： 分页功能是当遇到数据很多时，如果都放到一个页面上，那么找起来很不方便，而且不利于性能。此时采用分页功能就能很好的优化用户体验，可是如果自己开发分页功能，那么就会影响开发效率，bootstrap提供了分页功能，可以很好的解决这个问题，其用法：给父级ul标签添加pagination类，给子级li添加page-item,类样式如下： 类名 描述 .pagination 分页功能的容器添加的类名，用于布局 .page-item 给分页功能里面每一项添加的类名，用于选择伪类 ，布局链接样式
Bootstrap系列之折叠（Collapse）
老__L的博客
06-05 7322
折叠（Collapse）
Bootstrap 折叠
书香水墨
07-25 843
一、Bootstrap 折叠 1.1 简单的折叠 .collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle=“collapse” 属性。 data-target="#id" 属性是对应折叠的内容 (<div i...
Bootstrap系列之卡片（Cards）
老__L的博客
05-29 5775
Bootstrap卡片提供了一个灵活的、可扩展的内容容器，具有多个变体和选项。卡片是一种灵活的、可扩展的内容容器。它包括页眉和页脚选项、各种各样的内容、背景颜色和强大的显示选项。如果你熟悉Bootstrap 3，卡片可以代替我们的旧面板、井和缩略图。与这些组件类似的功能可用作纸牌的修饰类。卡片使用尽可能少的标记和样式，但仍然设法提供大量的控制和定制。建立与flexbox，他们提供容易对齐和混合好与其他Bootstrap组件。默认情况下它们没有空白，因此需要时使用间距实用程序。下面是一个混合内容和固定宽度的基
Bootstrap5 卡片讲解
qq_65552364的博客
06-05 2699
在 Bootstrap5 中，通过类 .card 与 .card-body 可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，卡片采用 flexbox 构建，易于对齐，并可与其他 Bootstrap 组件很好地混合。卡片没有固定的起始宽度，因此它们会自然地填充其父元素的整个宽度。卡片支持各种内容，包括图像、文本、列表组、链接等 🚀卡片之二式：标题 在卡片的内容中我们可以通过类 .card-title 设置卡片的标题，通过类 .card-subtitle 设置卡片的字幕。如果将 ..
Bootstrap组件——卡片
xun__xing的博客
07-29 4389
卡片一、卡片（card）1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组 一、卡片（card） 卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。 卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。 1.基础卡片 <div class="row"> <div cla
Bootstrap的卡片组件相关知识
最新发布
昊虹AI笔记
10-22 1484
Bootstrap的卡片组件相关知识
Bootstrap -Card卡片
xiabenshu的博客
05-08 1万+
Cards（卡片） Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。 关于 卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3，卡将替换我们的旧面板、井和缩略图。与这些组件类似的功能可以作为卡片的修饰符类使用。 例子 卡片是用尽可能少的标记和样式构建的，但仍然能够交付大量的控制和定制...
16Bootstrap5下拉菜单
醉瑾_的博客
12-10 991
16Bootstrap5下拉菜单 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5下拉菜单</title> <link rel=
bootstrap的折叠窗口（手风琴切换卡）
魔幻.伊蓝的博客
01-08 3008
2.3版本 3版本 .accordion .panel-group .accordion-group .panel .panel-default .accordion-heading .panel-heading .accordion-body .panel-collapse .accordion-inner .panel-body 以3版本为例，代码实例：
Bootstrap折叠、卡片组件。手风琴效果
qq_41003773的博客
08-20 842
折叠组件 <h3>折叠</h3> <!--<a class="btn btn-info" data-toggle="collapse" href="#d1">折叠按钮</a>--> <button data-toggle="collapse" data-target="#d1">折叠按钮</but...
bootstrap卡片图文列表布局代码.zip
07-05
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
Bootstrap折叠面板具体实现
weixin_45817492的博客
04-18 2670
Bootstrap折叠导航栏1.折叠面板效果2.制作过程3. 要注意的问题4.具体实现代码 1.折叠面板效果 点击每一个面板，触发对应的下方内容展开折叠,结合 card 卡片组件使用，可以扩展折叠组件为手风琴效果。 2.制作过程 引用文件bootstrap.js和jquery-3.4.0.js",用于实现折叠效果。引用文件bootstrap.css设置样式。 要创建折叠导航栏，需要把data-toggle=“collapse” 添加到您想要展开或折叠的组件的链接上。 href 或 data-t
Bootstrap折叠
了凡
11-11 2583
Bootstrap折叠基本折叠折叠可用来显示和隐藏内容<button class="btn btn-default" data-toggle="collapse" data-target="#demo">可折叠</button><div id="demo" class="collapse"> 被折叠的区域 </div>.collapse类表示可被折叠的元素(上面的<div>元素) 在<a>或
Bootstrap-table 使用总结
热门推荐
菜鸟逆袭之路
06-29 5万+
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动
Bootstrap03(组件案例)
weixin_66202611的博客
05-02 301
《案例1：实现搜索书籍页面 组件：媒体对象-Media object》 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1.实现搜索书籍页面：HTML</title> <!-- 引入bootstrap的css --> <link rel="stylesheet" type="text/css" href="css/boo.
Bootstrap部分案例
m0_61148761的博客
04-03 2798
主要用于组件：媒体对象-Media object代码如下效果如下主要用于页面内容：表格-Table代码如下效果如下主要用于组件：模态框-Modal代码如下效果如下：（点击结算弹出）扩展内容-图标代码如下效果如下折叠 滚动监听 下拉菜单 分页导航-面包屑导航 等等（需要留下印象）页面中引入库 ① bootstrap.min.css:Bootstrap核心样式【添加到head标签中】
【无标题】
weixin_63944861的博客
04-01 443
目录 准备工作 一、案例1：首页轮播图实现 主要用于组件：轮播-Carousel 二、案例2：首页书籍分类实现 主要用于组件：列表组-List group ​ 三、案例3：首页新书上架&热门书籍实现 页面内容需要：画像-Figure 四、案例4：首页整合 1、完善轮播图（左右箭头 指示灯样式） 2、完善新书上架&热门书籍 五、案例5：实现登录&注册页面 主要用于组件：表单-Forms 准备工作：页面中引入库 ① bootstrap.min.cs..
Bootstrap——Bootstrap学习笔记以及案例分享
Bonsoir777的博客
09-20 1599
本文主要介绍有关bootstrap 的使用方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值