前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》

一、data-开头的是什么

是bootstrap封装的js。
data-toggle
data-target
data-dismiss
data-spy
参考资料：https://blog.csdn.net/WangMinGirl/article/details/108491717

二、标签页

1、怎么把标签页和下面内容关联起来

（1）把标签页的a链接的href，和下面div的id绑定起来。

（2）标签页的a链接上加上【data-toggle="tab"】

（3）文本区域使用
.tab-content
.tab-pane

（4）在tab-pane后面增加动画样式
.fade
.in

三、标签页例子

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.js"></script>
<title>bootstrap</title>
<style></style>
</head><body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><ul class="nav nav-tabs"><li class="active"><a href="#linux" data-toggle="tab">linux</a></li><li><a href="#js" data-toggle="tab">js</a></li><li><a href="#php" data-toggle="tab">php</a></li><li><a href="#html" data-toggle="tab">html</a></li></ul><div class="tab-content"><div id="linux" class="tab-pane active fade in">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div><div id="js" class="tab-pane fade">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</div><div id="php" class="tab-pane fade">Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</div><div id="html" class="tab-pane fade">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</div></div></div>
</body><script></script></html>

四、工具提示

1、增加提示
data-toggle="tooltip"

2、方向
data-placement="left"
data-placement="top"
data-placement="bottom"
data-placement="right"

3、提示的内容
title="Tooltip on top"

4、js添加启动提示

<script>$(function () {$('[data-toggle="tooltip"]').tooltip()});
</script>

五、工具提示例子

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.js"></script>
<title>bootstrap</title>
<style></style>
</head><body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button></div>
</body><script>$(function () {$('[data-toggle="tooltip"]').tooltip()});
</script></html>

六、弹出框

1、属性
data-container：将弹出窗口附加到特定元素
data-toggle：弹出的角色
data-placement：弹出方向
data-content：弹出的内容
title：弹出的标题

2、js添加触发

<script>$(function () {$('[data-toggle="popover"]').popover()});
</script>

3、弹出框的例子

<body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." title="title">Popover on 底部
</button></div>
</body><script>$(function () {$('[data-toggle="popover"]').popover()});
</script>

七、可消失的弹出框

1、data-trigger="focus"
点别的地方弹出框消失

2、例子

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="可消失的弹框" title="title" data-trigger="focus">可消失的弹框</button>

八、折叠效果

1、panel-group：面板组，上下的距离给紧缩了

2、自己实现

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.js"></script>
<title>bootstrap</title>
<style></style>
</head><body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><div class="panel-group"><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title"><a href="javascript:;">linux</a></div></div><div class="panel-body">linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章</div></div><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title"><a href="javascript:;">php</a></div></div><div class="panel-body">linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章</div></div><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title"><a href="javascript:;">javascript</a></div></div><div class="panel-body">linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章</div></div></div></div>
</body><script>$('.panel-body').hide().first().show();  //所有panel-body隐藏，显示第一个$('.panel-title').click(function(){$(this).parent().next().slideDown();//不是点击的这个的panel-body都隐藏$('.panel-body').not($(this).parent().next()).slideUp();});
</script></html>

3、官方提供的手风琴效果
id="accordion"：父标签id
href="#one"：捆绑的id
data-toggle="collapse"：折叠
data-parent="#accordion"：指向父标签的id
.panel-collapse
.collapse
.panel-group

<div class="panel-group" id="accordion"><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title"><a href="#one" data-toggle="collapse" data-parent="#accordion">linux</a></div></div><div id="one" class="panel-collapse collapse in"><div class="panel-body">linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章</div></div></div><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title"><a href="#two" data-toggle="collapse" data-parent="#accordion">php</a></div></div><div id="two" class="panel-collapse collapse"><div class="panel-body">linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章</div></div></div><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title"><a href="#thress" data-toggle="collapse" data-parent="#accordion">javascript</a></div></div><div id="thress" class="panel-collapse collapse"><div class="panel-body">linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章</div></div></div>
</div>

九、幻灯片

1、样式
.carousel：旋转木马效果，就是我们说的幻灯片
data-ride="carousel"：启动动画效果
.slide：滑动
.item
.active

2、幻灯片角色
（1）图片
.carousel-inner：幻灯片图片
（2）左右控制器
.carousel-control：控制器
data-slide="prev"：向左走
data-slide="next"：向右走
（3）指示灯控制器
.carousel-indicators：指示灯
data-target="#mycarousel"：最大的那个父标签id
data-slide-to="0"

3、图片说明
.carousel-caption：放在图片的下面

4、例子

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.js"></script>
<title>bootstrap</title>
<style></style>
</head><body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><div id="mycarousel" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><!--里面就是一个个的旋转木马--><div class="item active"><img src="bs/image/壁纸1.jpeg" /><div class="carousel-caption"><h1>壁纸1</h1><p>壁纸1壁纸1壁纸1</p></div></div><div class="item"><img src="bs/image/壁纸2.jpeg" /><div class="carousel-caption"><h1>壁纸2</h1><p>壁纸2壁纸2壁纸2</p></div></div><div class="item"><img src="bs/image/壁纸3.jpeg" /><div class="carousel-caption"><h1>壁纸3</h1><p>壁纸3壁纸3壁纸3</p></div></div></div><!--指示灯--><ol class="carousel-indicators"><li data-target="#mycarousel" data-slide-to="0" class="active"></li><li data-target="#mycarousel" data-slide-to="1"></li><li data-target="#mycarousel" data-slide-to="2"></li></ol><!--左右控制--><a href="#mycarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a href="#mycarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div></div>
</body><script></script></html>

前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》相关推荐

bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
AndroidStudio_安卓原生开发_自定义蒙板弹出框WaitDialog---Android原生开发工作笔记134
android在执行程序过程中,很可能会用到,正在执行的提示.下面我们就自己做一个提示框,自带蒙板,执行过程中,后面的窗口内容不能操作. 下面的代码可以直接复制粘贴使用: 1.首先写一个WaitDia ...
前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
Bootstrap系列之弹出框（Popovers）
文章の目录 1.概述 2.Example: Enable popovers everywhere 3.Example: Using the container option 4.Example 4.1 ...
弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
html弹出框教程,JavaScript 弹出框
JavaScript 弹出框在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框警告框是最简单的弹 ...
web前端基础之Bootstrap(三) - 插件
模态框放在body内的直接子元素弹出方式 1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...
# 前端基础（HTML + CSS + JavaScript）
一.HTML 基础概念:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 可以使用 HTML 来建立自己的 WEB 站点,H ...

前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》

前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》相关推荐

最新文章

热门文章