前端基础之《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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值