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

三、标签页例子

bootstrap

        bootstrap前端框架

            linux
            js
            php
            html

                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.

                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.

                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.

                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.

四、工具提示

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

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

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

4、js添加启动提示

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

五、工具提示例子

bootstrap

        bootstrap前端框架
        Tooltip on left
        Tooltip on bottom

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

六、弹出框

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

2、js添加触发

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

3、弹出框的例子

        bootstrap前端框架

  Popover on 底部

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

七、可消失的弹出框

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

2、例子

可消失的弹框

八、折叠效果

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

2、自己实现

bootstrap

        bootstrap前端框架

                    linux

                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章

                    php

                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章

                    javascript

                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                    linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章

    $('.panel-body').hide().first().show();  //所有panel-body隐藏，显示第一个

    $('.panel-title').click(function(){
        $(this).parent().next().slideDown();
        //不是点击的这个的panel-body都隐藏
        $('.panel-body').not($(this).parent().next()).slideUp();
    });

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

            linux

                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章

            php

                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章

            javascript

                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章
                linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章linux文章

九、幻灯片

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、例子

bootstrap

        bootstrap前端框架

                        壁纸1
                        壁纸1壁纸1壁纸1

                        壁纸2
                        壁纸2壁纸2壁纸2

                        壁纸3
                        壁纸3壁纸3壁纸3

Original: https://blog.csdn.net/csj50/article/details/127808980
Author: csj50
Title: 前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》