Bootstrap(折叠+列表组&轮播图实现&图文区)

于 2022-05-08 15:43:09 发布
阅读量481 收藏 2
点赞数
分类专栏： bookstrap 文章标签： bootstrap html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64001795/article/details/124626570
版权
该博客介绍了如何使用Bootstrap来创建书籍列表的折叠效果，展示了轮播图的配置与演示，包括设置播放速度，并且详细说明了如何在不同设备端（电脑、平板、手机）实现图文内容的适配展示。
摘要由CSDN通过智能技术生成

目录

书籍列表+折叠效果

轮播图演示

 图文区

书籍列表+折叠效果

<div class="col-md-3 aa" style="background-color: #8FD19E; ">
					<div id="accordion">
						<div class="card">
							<div class="card-header" id="headingOne">
								<h5 class="mb-0">
									<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
										aria-expanded="true" aria-controls="collapseOne">
										书籍列表
									</button>
								</h5>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordion">
								<ul class="list-group">
									<li class="list-group-item">文艺</li>
									<li class="list-group-item">小说</li>
									<li class="list-group-item">青春</li>
									<li class="list-group-item">童书</li>
									<li class="list-group-item">励志</li>
									<li class="list-group-item">生活</li>
									<li class="list-group-item">人文社科</li>
									<li class="list-group-item">经营</li>
									<li class="list-group-item">科技</li>
									<li class="list-group-item">教育</li>
									<li class="list-group-item">工具书</li>
									<li class="list-group-item">期刊</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

最低0.47元/天 解锁文章
顾轻舟。
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap4（五）组件
weixin_45650998的博客
09-02 815
组件
Bootstrap前端框架
weixin_64549900的博客
05-13 179
轮播图&&折叠列表组 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 响应式前端框 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scal
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
Bootstrap折叠组，列表组，轮播使用与简单组合布局
qq_62898618的博客
05-04 729
Bootrap折叠组与列表组实现一个简单收缩列表 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <script src="js/jquery-3.6.0.js" typ
Bootstrap框架----DataTables列表折叠列
热门推荐
直到世界的尽头
01-31 2万+
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架——DataTables列表示例 本章学习行详细内容的展开与折叠，当数据量多时，可以通过点击按钮后再去请求获取数据进行展示。 官网例子参考 行详细内容的展开与折叠 http://datatables.club/example/user_share/row_details.h...
Bootstrap框架学习(五）——Bootstrap插件设计之折叠与轮播
weixin_42029090的博客
06-13 375
五、Bootstrap插件设计7、Bootstrap 折叠（Collapse）插件     折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。如果想要单独引用该插件的功能，那么需要引用 collapse.js。同时，也需要在 Bootstrap 版本中引用 Transition（过渡）插件。或者，可以引用 bootstrap.j...
Bootstrap 折叠
snowstorm的博客
03-18 3221
折叠插件实现的效果是：但单击一个触发元素时，在另外一个可折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。 一、声明式用法 声明一个触发按钮和一个折叠区域，示例代码： 默认显示折叠区域： 触发按钮 这是折叠区域！！默认隐藏折叠区域： 触发按钮 这是折叠区域 说明：.collapsed样式是表示该插件所对应的demo区域已经处于隐藏状态了，而collapse和in两个样式
图文产品销售展示响应式网页模板
01-23
9. **内容展示策略**：在图文产品销售展示中，模板可能会利用滑块、画廊或轮播组件来呈现产品图片，同时配以简洁明了的产品描述和价格信息，以吸引用户注意力并引导他们采取购买行动。 10. **响应式测试**：开发...
html+css+js基础问答
qq_43751465的博客
08-26 5166
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
Bootstrap4 折叠
12-13
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 折叠 Lorem ipsum dolor text.... 实例解析 .collapse 类用于指定一个折叠元素 (实例中的 ); 点击按钮后会在隐藏与显示之间切换。 控制内容的隐藏与显示，需要在 或 元素上添加 data-toggle=”collapse” 属性。 data-target=”#id” 属性是对应折叠的内容 ( )。 注意: 元素上你可以使用 href 属性来代替 data-target 属性: 实例 Collapsible Lorem ipsum dolo
Bootstrap展开收缩显示表格json格式数据.zip
05-23
Bootstrap展开收缩显示表格json格式数据基于Bootstrap3.3.5制作，自适应分辨率，JS函数调用json，动态获取表格数据，双击表格行可折叠关闭表格数据显示。
各种类型网站源码
06-19
这些源码可能包括响应式布局、动画效果、导航菜单、轮播图、产品展示、联系表单等多种功能。 首先，企业网站的特效源码对于提升用户体验至关重要。特效可以是页面加载时的动态过渡，也可以是鼠标悬停时的交互反馈。...
bootstrap框架列表组和折叠使用实现侧边导航栏
weixin_52657749的博客
04-16 1476
bootstrap框架列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: 12345<ul class="list-group">  <li class="list-group-item">First item</li>  <li ...
零基础Bootstrap入门教程(24)--折叠插件
程序员大阳
03-11 1089
本文目录1. 概述2. 通过``元素控制折叠3. 通过JS控制折叠4. 小结 1. 概述 折叠的意义是当内容需要是，则显示在界面上，而内容不需要时，就是折叠收藏起来。 Bootstrap对折叠的实现非常简单，我们本篇就来演示一番。 2. 通过<a>元素控制折叠 先看一段代码： <a type="button" class="btn btn-primary" data-toggle="collapse" href="#section1">显示春晓文字</a>
bootstrap table 收缩_Bootstrap-Table展开/折叠表示例开始折叠
weixin_28808633的博客
01-26 2961
我正在实施一个表展开/折叠组，并且它正在工作，但我无法弄清楚如何启动折叠组。Bootstrap-Table展开/折叠表示例开始折叠如果单击标题，该图像中的蓝色行，坍塌下的行。 我怎样才能改变它，以便这些组默认处于折叠状态？编辑：包括代码。我正在使用的页面使用了大量的引导程序和JavaScript，但以下是相关部分。HTML：data-row-style="rowStyle"id="layer-li...
bootstrap-table--学习-----折叠效果
huofeige
05-06 3249
折叠效果图如下 哈哈哈，代码如下： <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <met...
Bootstrap3--日常练手--实现面板折叠里面嵌入表格
small_33的博客
05-29 1002
大家好~ 珊妹这不是转了前端吗，前端插件真是数不胜数呢，所以珊妹打算以后会在闲暇时间来利用常用的插件来写一些大家平时可能会用到的例子来供大家参考，代码一定不是最优的，但尽可能是可用的，所以有幸遇到大神，还望多多提点一二~ 下面我们来说今天的功能，利用bootstrap插件完成面板折叠嵌入表格： 首先下载bootstrap，这都不用说了，珊妹这里下载的是bootstrap3版本，下载链接：https://v3.bootcss.com/ 大家还要下载个jquery.min.js文件，可以去官网下载； 然
bootstrap+JavaScript实现堆叠式轮播图效果
最新发布
05-30
要实现堆叠式轮播图效果，可以使用以下步骤： 1. 在 HTML 中创建一个容器，用于显示轮播图和导航按钮。 ```html <div class="slider"> <div class="slider-container"> <div class="slide active"> <img src="slide1.jpg"> </div> <div class="slide"> <img src="slide2.jpg"> </div> <div class="slide"> <img src="slide3.jpg"> </div> </div> <div class="slider-nav"> <button class="prev">Prev</button> <button class="next">Next</button> </div> </div> ``` 2. 使用 CSS 设置容器和轮播图的样式。 ```css .slider { position: relative; overflow: hidden; width: 100%; height: 400px; } .slider-container { position: relative; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .slide.active { opacity: 1; } .slide img { width: 100%; height: 100%; object-fit: cover; } .slider-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .slider-nav button { background-color: rgba(255, 255, 255, 0.5); border: none; padding: 10px 20px; margin: 0 10px; cursor: pointer; } .slider-nav button:hover { background-color: rgba(255, 255, 255, 0.8); } ``` 3. 使用 JavaScript 实现轮播图的切换和导航按钮的功能。 ```javascript var slides = document.querySelectorAll('.slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 5000); function nextSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); } function prevSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide - 1 + slides.length) % slides.length; slides[currentSlide].classList.add('active'); } var prevButton = document.querySelector('.prev'); var nextButton = document.querySelector('.next'); prevButton.addEventListener('click', function() { clearInterval(slideInterval); prevSlide(); slideInterval = setInterval(nextSlide, 5000); }); nextButton.addEventListener('click', function() { clearInterval(slideInterval); nextSlide(); slideInterval = setInterval(nextSlide, 5000); }); ``` 在上面的代码中，我们首先获取轮播图中的所有幻灯片和当前幻灯片的索引。然后，我们使用 setInterval 函数来定时调用 nextSlide 函数，以便自动切换幻灯片。在 nextSlide 函数中，我们将当前幻灯片的 active 类移除，并将索引增加 1，以便选择下一个幻灯片。然后，我们将下一个幻灯片的 active 类添加回去，以便显示它。类似地，在 prevSlide 函数中，我们将当前幻灯片的 active 类移除，并将索引减少 1，以便选择上一个幻灯片。 最后，我们使用 addEventListener 函数为导航按钮添加单击事件监听器。在单击事件处理程序中，我们清除 setInterval 函数的定时器，以便停止自动切换幻灯片。然后，我们调用 prevSlide 或 nextSlide 函数，以便切换幻灯片。最后，我们使用 setInterval 函数重新启动自动切换幻灯片的定时器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值