bootstrap (3) 插件列表

鹏重名了

2023-09-15 帮助1人

1. 模态框

概念： 模态框也叫模式对话框，是一种不支持嵌套的大型弹窗，模态框容器默认隐藏，我们设计时，可以通过 .show 将它显示出来，并作为 <body> 的直接子元素进行布局，以避免与其他组件互相影响：

父容器：模态框有三层父容器，形成固定搭配：
- .modal：模态框容器，最外层容器。
- .modal-dialog：对话框容器，内嵌于 .modal 容器。
- .modal-content：内容框容器，内嵌于 .modal-dialog 容器。
子容器：模态框有三个同级子容器：
- .modal-header：头容器，内嵌 .modal-title 标题容器。
- .modal-body：体容器。
- .modal-footer：脚容器。
开启模态框：
- 将.show 去掉，替换为 .fade 添加淡入淡出效果。
- 为模态框容器添加ID，如 id="my-modal-1"。
- 设计触发器，可以是一个 <a> 或者 <button> 等。
- 为触发器添加 data-target="#my-modal-1" 以绑定模态框ID。
- 为触发器添加 data-toggle="modal" 以添加展示模态框功能。
- 为触发器添加 href 可以将url指定的内容加载到 .modal-content 中，注意此时原 .modal-content 中的内容如关闭按钮代码等会被覆盖，此时建议将关闭按钮的代码移至远程加载的内容中。
模态框遮罩：模态框的 data-backdrop 属性支持三种值：
- true：产生黑灰透明遮罩，允许点击空白区域关闭模态框，默认值。
- false：禁止黑灰透明遮罩，禁止点击空白区域关闭模态框。
- static：产生黑灰透明遮罩，禁止点击空白区域关闭模态框。
模态框焦点：对模态框容器添加 tabindex="-1" 属性可使焦点永远在模态框上，此时支持使用 ESC 键来关闭模态框。
关闭模态框：建议在内容头容器首行布局一个拥有 data-dismiss="modal" 属性的关闭按钮。

<article id="my-modal-1" class="modal fade" tabindex="-1" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">模态框01标题</h3>
            </div>
            <div class="modal-body">模态框01正文</div>
            <div class="modal-footer">模态框01注脚</div>
        </div>
    </div>
</article>

<button data-target="#my-modal-1" data-toggle="modal" type="button" class="btn btn-info">弹出模态框01</button>

学新通

<article id="my-modal-2" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">模态框02标题</h3>
            </div>
            <div class="modal-body">模态框02正文</div>
            <div class="modal-footer">模态框02注脚</div>
        </div>
    </div>
</article>

<button data-target="#my-modal-2" data-toggle="modal" href="modal-remote-demo.html" class="btn btn-info">弹出模态框02</button>


//需要在创建个 modal-remote-demo.html内容如下

<section class="panel panel-default">
    <header class="panel-heading">
        <article class="panel-title">
            <span>面板标题</span>
            <!--模态框中的关闭按钮被移至这里-->
            <button class="close" data-dismiss="modal">&times;</button>
        </article>
    </header>
    <article class="panel-body">面板体</article>
    <footer class="panel-footer">面板脚</footer>
</section>

学新通

1.1 jquery操作模态框

概念： 可以使用jquery代码来完成模态框的动态功能：

开启模态框：
- 将.show 去掉，替换为 .fade 添加淡入淡出效果。
- 为模态框容器添加ID，如 id="my-modal-1"。
- 设计触发器，可以是一个 <a> 或者 <button> 等。
- 设计触发器点击事件：对模态框对象调用 modal() 方法。
modal()：负责开启模态框，参数是一个JSON，key值可选如下：
- show：true 为显示模态框，false 为隐藏模态框。
- backdrop：true，false，"static"，效果同 data-backdrop。
- keyboard：true 表示允许ESC关闭模态框，false 表示禁止。
- remote：值为url，效果同触发器的 href。
关闭模态框：使用jquery代码对模态框对象调用 modal("hide") 可以隐藏模态框，但此时模态框中的数据不会被重置，需要自理。
环绕事件：
- 模态框出现之前会触发 show.bs.modal 事件。
- 模态框出现之后会触发 shown.bs.modal 事件。
- 模态框消失之前会触发 hide.bs.modal 事件。
- 模态框消失之后会触发 hidden.bs.modal 事件。
- 从远程加载数据完毕后会触发 loaded.bs.modal 事件。

//点击关闭可以关闭
<article id="my-modal-1" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">模态框01标题</h3>
            </div>
            <div class="modal-body">模态框01正文</div>
            <div class="modal-footer">
                <button id="close-my-modal-1-btn" type="button" class="btn btn-danger">关闭模态框01</button>
            </div>
        </div>
    </div>
</article>


<button id="open-my-modal-1-btn" type="button" class="btn btn-danger">弹出模态框01</button>


<script type="text/javascript">
$(() => {
        $("#open-my-modal-1-btn").click(() => {
            $("#my-modal-1").modal({
                "show": true,
                "backdrop": "static",
                "keyboard": true
            });
        });

        $("#close-my-modal-1-btn").click(() => {
            $("#my-modal-1").modal("hide");
        });
 });
</script>

学新通

<article id="my-modal-2" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">模态框02标题</h3>
            </div>
            <div class="modal-body">模态框02正文</div>
            <div class="modal-footer">模态框02注脚</div>
        </div>
    </div>
</article>

<button id="open-my-modal-2-btn" type="button" class="btn btn-danger">弹出模态框02</button>

<script type="text/javascript">
    $(() => {
            $("#open-my-modal-2-btn").click(() => {
            $("#my-modal-2").modal({
                "show": true,
                "backdrop": "static",
                "keyboard": true,
                "remote": "modal-remote-demo.html"
            });
        });
        });
</script>

//需要在外部创建modal-remote-demo.html

<section class="panel panel-default">
    <header class="panel-heading">
        <article class="panel-title">
            <span>面板标题</span>
            <!--模态框中的关闭按钮被移至这里-->
            <button class="close" data-dismiss="modal">&times;</button>
        </article>
    </header>
    <article class="panel-body">面板体</article>
    <footer class="panel-footer">面板脚</footer>
</section>

学新通

//一顿弹窗
<article id="my-modal-3" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">模态框03标题</h3>
            </div>
            <div class="modal-body">模态框03正文</div>
            <div class="modal-footer">模态框03注脚</div>
        </div>
    </div>
</article>


<button id="open-my-modal-3-btn" type="button" class="btn btn-danger">弹出模态框03</button>


<script type="text/javascript">
    $(() => {
            $("#open-my-modal-3-btn").click(() => {
            let myModal = $("#my-modal-3");
            myModal.on("show.bs.modal", () => alert("出现之前..."));
            myModal.on("loaded.bs.modal", () => alert("加载完数据之后..."));
            myModal.on("shown.bs.modal", () => alert("出现之后..."));
            myModal.on("hide.bs.modal", () => alert("消失之前..."));
            myModal.on("hidden.bs.modal", () => alert("消失之后..."));

            myModal.modal({
                "show": true,
                "backdrop": "static",
                "keyboard": false,
                "remote": "modal-remote-demo.html"
            });
        });
        });
</script>

学新通

2. 标签页

概念： 标签页也叫选项卡，由选项列表和对应内容两部分组成：

选项列表：由有序或无序列表配合 <a> 来完成布局：
- 为 <ol> 添加 nav nav-tabs/pills 以设置水平/胶囊导航。
- 为 <a> 以锚链接的方式设置 href 属性值以关联对应内容的ID。
- 为 <a> 添加 data-toggle="tab" 属性以设置选项切换功能。
对应内容：由 .tab-content 容器内嵌多个 .tab-pane 容器来完成布局：
- 子元素必须设置ID值，以关联选项列表中 <a> 的 href 属性。
- 子元素可以添加 active 来设置首选项。
- 子元素可以添加 fade 来设置切换时的淡入淡出效果。
- 子元素可以添加 in 来设置默认显示效果。

    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
<section id="nav-tabs">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#home-1" data-toggle="tab">Home</a>
        </li>
        <li><a href="#profile-1" data-toggle="tab">Profile</a></li>
        <li><a href="#messages-1" data-toggle="tab">Messages</a></li>
        <li><a href="#settings-1" data-toggle="tab">Settings</a></li>
    </ul>

    <article class="tab-content">
        <div id="home-1" class="tab-pane fade in active">home</div>
        <div id="profile-1" class="tab-pane fade">profile</div>
        <div id="messages-1" class="tab-pane fade">messages</div>
        <div id="settings-1" class="tab-pane fade">settings</div>
    </article>
</section>



<section id="nav-pills">
    <ul class="nav nav-pills">
        <li class="active">
            <a href="#home-2" data-toggle="tab">Home</a>
        </li>
        <li><a href="#profile-2" data-toggle="tab">Profile</a></li>
        <li><a href="#messages-2" data-toggle="tab">Messages</a></li>
        <li><a href="#settings-2" data-toggle="tab">Settings</a></li>
    </ul>

    <article class="tab-content">
        <div id="home-2" class="tab-pane fade in active">home</div>
        <div id="profile-2" class="tab-pane fade">profile</div>
        <div id="messages-2" class="tab-pane fade">messages</div>
        <div id="settings-2" class="tab-pane fade">settings</div>
    </article>
</section>

学新通

3. 工具提示

概念： 工具提示用来设置当鼠标经过元素时显示的小提示条：

使用bootstrap设置工具提示：
- 为元素添加 data-toggle="tooltip" 以添加显示工具提示的功能。
- 为元素添加 data-placement="right" 设置工具提示出现的位置。
- 为元素添加 title="xxx"：设置工具提示的内容。
- JQ激活鼠标触发：$(() => $('[data-toggle="tooltip"]').tooltip());
使用jquery设置工具提示：对元素调用 tooltip() 方法，参数是一个JSON：
- animation：默认为 true，表示使用工具提示。
- placement：默认为 "top"，表示工具提示默认出现在元素正上方。
- trigger：默认为 focus hover，表示获取焦点和鼠标经过都触发工具提示。
- delay：默认无延迟，值为JSON，可设置 show 和 hide 效果的延迟毫秒数。
- title：设置提示内容。

        <style type="text/css">
        section {
            margin: 50px;
            outline: 1px solid red;
            padding: 50px;
        }

        p {
            display: inline-block;
            margin-right: 100px;
            text-align: center;
            width: 150px;
            height: 20px;
            outline: 1px solid black;
        }
    </style>
    
    
    
<section id="tooltip-bootstrap">
    <p data-toggle="tooltip" data-placement="left" title="left...">left</p>
    <p data-toggle="tooltip" data-placement="top" title="top...">top</p>
    <p data-toggle="tooltip" data-placement="bottom" title="bottom...">bottom</p>
    <p data-toggle="tooltip" data-placement="right" title="right...">right</p>
</section>



<section id="tooltip-jquery">
    <p id="tooltip-p">tooltip-jquery</p>
</section>



<section id="tooltip-event-around">
    <p id="tooltip-around-p">tooltip-around</p>
</section>


<script type="text/javascript">
    $(() => $(`[data-toggle="tooltip"]`).tooltip());



    $(() => {
        $('#tooltip-p').tooltip({
            "animation": true,
            "placement": "top",
            "trigger": "hover",
            "delay": {"show": 1000, "hide": 2000},
            "title": "通过JQ设定提示..."
        });



        let tooltipAroundP = $("#tooltip-around-p");
        tooltipAroundP.on("show.bs.tooltip", () => alert("出现之前..."));
        tooltipAroundP.on("shown.bs.tooltip", () => alert("出现之后..."));
        tooltipAroundP.on("hide.bs.tooltip", () => alert("消失之前..."));
        tooltipAroundP.on("hidden.bs.tooltip", () => alert("消失之后..."));
        tooltipAroundP.tooltip({
            "animation": true,
            "placement": "left",
            "trigger": "hover",
            "delay": {"show": 1000, "hide": 2000},
            "title": "环绕测试..."
        });
    });

学新通

4. 弹出框

概念： 弹出框是一个小浮层，用于存放非主要信息：

使用bootstrap设置工具提示：
- 为元素添加 data-toggle="popover" 以添加显示弹出框的功能。
- 为元素添加 data-placement="right" 设置弹出框出现的位置。
- 为元素添加 data-content="xxx"：设置弹出框的内容。
- JQ激活：$(() => $('[data-toggle="popover"]').popover());
使用jquery设置工具提示：对元素调用 popover() 方法，参数是一个JSON：
- animation：默认为 true，表示使用弹出框。
- placement：默认为 "top"，表示弹出框默认出现在元素正上方。
- trigger：默认为 click，表示点击元素时候触发弹出框。
- delay：默认无延迟，值为JSON，可设置 show 和 hide 效果的延迟毫秒数。
- title：设置弹出框内容的标题。
- content：设置弹出框内容的正文。

    <style type="text/css">
        section {
            margin: 50px;
            outline: 1px solid red;
            padding: 50px;
        }

        p {
            display: inline-block;
            margin-right: 100px;
            text-align: center;
            width: 150px;
            height: 20px;
            outline: 1px solid black;
        }
    </style>
    
    
    
<section id="popover">
    <p data-toggle="popover" data-placement="left" data-content="left...">左</p>
    <p data-toggle="popover" data-placement="top" data-content="top...">上</p>
    <p data-toggle="popover" data-placement="right" data-content="right...">右</p>
    <p data-toggle="popover" data-placement="bottom" data-content="bottom...">下</p>
</section>



<section id="popover-jquery">
    <p id="popover-p">popover-jquery</p>
</section>



<section id="popover-event-around">
    <p id="popover-around-p">popover-around</p>
</section>


<script type="text/javascript">
    $(() => $('[data-toggle="popover"]').popover());

    $(() => {
        $('#popover-p').popover({
            "animation": true,
            "placement": "top",
            "trigger": "hover",
            "delay": {"show": 1000, "hide": 2000},
            "title": "通过JQ设定提示-标题...",
            "content": "通过JQ设定提示-内容..."
        });

        let popoverAroundP = $("#popover-around-p");
        popoverAroundP.on("show.bs.popover", () => alert("出现之前..."));
        popoverAroundP.on("shown.bs.popover", () => alert("出现之后..."));
        popoverAroundP.on("hide.bs.popover", () => alert("消失之前..."));
        popoverAroundP.on("hidden.bs.popover", () => alert("消失之后..."));
        popoverAroundP.popover({
            "animation": true,
            "placement": "left",
            "trigger": "hover",
            "delay": {"show": 1000, "hide": 2000},
            "title": "环绕测试标题...",
            "content": "环绕测试内容..."
        });
    });
</script>

学新通

5. 折叠

概念： 折叠由触发器和内容容器两部分组成：

触发器：建议使用 <a> 或 <button> 布局：
- 为触发器添加 data-toggle="collapse" 以设置折叠功能。
- 为触发器添加 data-target 绑定折叠内容ID（<a> 标签使用 href 绑定）。
折叠内容容器：由 .collapse 修饰，其ID值要对应触发器。
面板组折叠：允许在面板组中使用折叠效果：
- 将多个面板放入 .panel-group 面板组容器中，并设置ID，如 items。
- 在每个面板标题中设置触发器，额外使用 data-parent="#items" 绑定面板组容器。
- 在每个面板中设置对应的折叠内容容器，额外添加 panel-collapse 以适配。
- 首选面板的折叠内容若想默认展开，添加 in 即可。

<style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
    
    
    
<section id="collapse-a">
    <a href="#collapse-sec-1" data-toggle="collapse">折叠</a>
    <article id="collapse-sec-1" class="collapse in">
        <div class="well">折叠内容</div>
    </article>
</section>



<section id="collapse-btn">
    <button data-target="#collapse-sec-2" data-toggle="collapse" class="btn btn-info">折叠</button>
    <article id="collapse-sec-2" class="collapse">
        <div class="well">折叠内容</div>
    </article>
</section>



<section id="collapse-panel">

    <article id="items" class="panel-group">
        <article class="panel panel-default">
            <header class="panel-heading">
                <h4 class="panel-title">
                    <a href="#msg-1" data-parent="#items" data-toggle="collapse">触发器01</a>
                </h4>
            </header>
            <div id="msg-1" class="panel-collapse collapse in">
                <div class="panel-body">第1部分的折叠内容...</div>
            </div>
        </article>

        <article class="panel panel-default">
            <header class="panel-heading">
                <h4 class="panel-title">
                    <a href="#msg-2" data-parent="#items" data-toggle="collapse">触发器02</a>
                </h4>
            </header>
            <div id="msg-2" class="panel-collapse collapse">
                <div class="panel-body">第2部分的折叠内容...</div>
            </div>
        </article>

        <article class="panel panel-default">
            <header class="panel-heading">
                <h4 class="panel-title">
                    <span href="#msg-3" data-parent="#items" data-toggle="collapse">触发器03</span>
                </h4>
            </header>
            <div id="msg-3" class="panel-collapse collapse">
                <div class="panel-body">第3部分的折叠内容...</div>
            </div>
        </article>
    </article>
</section>

学新通

6. 图片轮播

概念： 图片轮播插件由轮播容器，圆点标记，轮播内容和左右按钮组成：

轮播容器：由 carousel slide 修饰。
圆点标记容器：每个圆点指向一张图片，由有序或无序列表布局：
- <ol> / <ul> 由 carousel-indicators 修饰。
- <li> 使用 data-target 属性来绑定轮播容器。
- <li> 使用 data-slide-to 属性来绑定对应的轮播图片，值从0开始。
- <li> 添加 active 可以设置为首选项。
轮播内容容器：包含轮播图片和文字描述的内容项列表：
- .carousel-inner 容器是最外层容器，内嵌多个 .item 子容器。
- .item 子容器内嵌轮播图片对象和 .carousel-caption 文字描述容器。
左右控制按钮：均由 .carousel-control 修饰，并使用 href 属性绑定轮播容器：
- 左箭头添加 .left 和 data-slide="prev" 属性完成上翻功能。
- 右箭头添加 .right 和 data-slide="next" 属性完成下翻功能。
使用jquery设置自动轮播：对轮播容器对象调用 carousel() 方法，参数是一个JSON：
- interval：设置轮播间隔时间的毫秒数，默认为 5000。
- pause：设置轮播停止效果，默认为 null，改为 "hover" 表示鼠标悬停时停止。
- wrap：设置轮播是否无限循环，默认为 true。
环绕事件：
- slide.bs.carousel：在一次轮播开始前执行。
- slid.bs.carousel：在一次轮播结束后执行。

点击换图

 <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
            width: 1000px;
            height: 650px;
        }

        img {
            width: 100%;
        }
    </style>
    
    
    <section id="carousel">
    <article id="my-carousel-1" class="carousel slide">

        <ol class="carousel-indicators">
            <li data-target="#my-carousel-1" data-slide-to="0" class="active"></li>
            <li data-target="#my-carousel-1" data-slide-to="1"></li>
        </ol>

        <article class="carousel-inner">

            <div class="item active">
            //图片自己设置
                <img src="../../image/slide-1.png" alt="">
                <div class="carousel-caption">
                    <h3>图1标题</h3>
                    <p>图1内内内内容容容容</p>
                </div>
            </div>

            <div class="item">
                <img src="../../image/slide-2.png" alt="">
                <div class="carousel-caption">
                    <h3>图2标题</h3>
                    <p>图2内内内内容容容容</p>
                </div>
            </div>

        </article>

        <a href="#my-carousel-1" class="carousel-control left" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>

        <a href="#my-carousel-1" class="carousel-control right" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        
    </article>
</section>

学新通

自动换图

 <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
            width: 1000px;
            height: 650px;
        }

        img {
            width: 100%;
        }
    </style>
    
    
    <section id="carousel-jquery">
    <article id="my-carousel-1" class="carousel slide">

        <ol class="carousel-indicators">
            <li data-target="#my-carousel-1" data-slide-to="0" class="active"></li>
            <li data-target="#my-carousel-1" data-slide-to="1"></li>
        </ol>

        <article class="carousel-inner">

            <div class="item active">
                <img src="../../image/slide-1.png" alt="">
                <div class="carousel-caption">
                    <h3>图1标题</h3>
                    <p>图1内内内内容容容容</p>
                </div>
            </div>

            <div class="item">
                <img src="../../image/slide-2.png" alt="">
                <div class="carousel-caption">
                    <h3>图2标题</h3>
                    <p>图2内内内内容容容容</p>
                </div>
            </div>

        </article>

        <a href="#my-carousel-1" class="left carousel-control" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>

        <a href="#my-carousel-1" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

    </article>
</section>




<section id="carousel-around">
    <article id="my-carousel-2" class="carousel slide">

        <ol class="carousel-indicators">
            <li data-target="#my-carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#my-carousel-2" data-slide-to="1"></li>
        </ol>

        <article class="carousel-inner">

            <div class="item active">
                <img src="../../image/slide-1.png" alt="">
                <div class="carousel-caption">
                    <h3>图1标题</h3>
                    <p>图1内内内内容容容容</p>
                </div>
            </div>

            <div class="item">
                <img src="../../image/slide-2.png" alt="">
                <div class="carousel-caption">
                    <h3>图2标题</h3>
                    <p>图2内内内内容容容容</p>
                </div>
            </div>

        </article>

        <a href="#my-carousel-2" class="left carousel-control" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>

        <a href="#my-carousel-2" class="right carousel-control" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

    </article>
</section>


<script type="text/javascript">
    $(() => {
        $("#my-carousel-1").carousel({
            interval: 1000,
            pause: "hover",
            wrap: true
        });

        let myCarouse2 = $("#my-carousel-2");
        myCarouse2.carousel({
            interval: 3000,
            pause: "hover",
            wrap: true
        });

        let num = 1;
        myCarouse2.on("slide.bs.carousel", () => console.log(`第${num}次轮播马上开始...`));

        myCarouse2.on("slid.bs.carousel", () => {
            console.log(`第${num}次轮播已经结束...`);
            num  ;
        });
    });
</script>

学新通

这篇好文章是转载于：学新通技术网

bootstrap (3) 插件列表

1. 模态框

1.1 jquery操作模态框

2. 标签页

3. 工具提示

4. 弹出框

5. 折叠

6. 图片轮播

点击换图

自动换图

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

微信公众号没有声音提示怎么办

photoshop扩展功能面板显示灰色怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

photoshop蒙版画笔没反应怎么办