Bootstrap的JavaScript插件

最新推荐文章于 2022-08-19 08:33:18 发布

ZhangXD_BLOG

最新推荐文章于 2022-08-19 08:33:18 发布

阅读量755

点赞数 1

分类专栏： Bootstrap 文章标签：框架 Bootstrap

本文链接：https://blog.youkuaiyun.com/u012054869/article/details/51945811

版权

Bootstrap 专栏收录该内容

3 篇文章

订阅专栏

1.导入JavaScript插件

Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。
Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js
在这里我直接导入了bootstrap.min.js

<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

2.模态框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!--模态框-->
<!--触发按钮-->
<button class="btn btn-primary" type="button">模态框</button>
<!--弹出的模态框-->
<div class="modal fade" id="mot">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">这是模态框的头部</h4>
            </div>
            <!--主题内容-->
            <div class="modal-body">
                <p>这是模态框的内容，主体部分</p>
            </div>
            <!--脚部-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>


<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function(){
        
        $(".btn").click(function(){//模态框的触发
            $("#mot").modal("toggle");
        });
    });
</script>
</body>
</html>

3.提示框：

<!--提示框-->
<!--提示框居上-->
<button type="button"
        class="btn btn-default"
        data-toggle="tooltip"
        data-placement="top"
        data-original-title="提示框居上"
        title="">提示框在上</button>
<!--提示框居左-->
<button type="button"
        class="btn btn-default"
        data-toggle="tooltip"
        data-placement="left"
        data-original-title="提示框居左"
        title="">提示框在左</button>
<!--提示框居右-->
<button type="button"
        class="btn btn-default"
        data-toggle="tooltip"
        data-placement="right"
        data-original-title="提示框居右"
        title="">提示框在右</button>
<!--通过js设置在下边出现-->
<button id="xia">提示框在下</button>

<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function(){

        $(".btn").click(function(){//模态框的触发
            $("#mot").modal("toggle");
        });
//        提示框设置
        $('[data-toggle="tooltip"]').tooltip();
        $('#xia').tooltip({//用js为id为xia的元素设置在下部显示提示框
            title:"我是一个提示框，我在下部出现",
            placement:'bottom'
        });
    });