• Bootstrap警告和轮播插件详解【前端Bootstrap框架】


    Bootstrap 警告

    可以在警告框中添加可选的关闭按钮。要创建内联的可取消警告框,请使用warnings jQuery插件。
    可以通过创建一个

    并添加一个来添加一个基本警告框。警报类和四个上下文类之一(即.Alert success、.Alert info、.Alert warning、.Alert danger)。

    成功!很好地完成了提交。
    信息!请注意这个信息。
    警告!请不要提交。
    错误!请进行一些更改。
    • 1
    • 2
    • 3
    • 4

    Bootstrap 警告运行截图如下:
    在这里插入图片描述

    可取消的警告(解雇警报)

    创建可取消警告的步骤如下:
    通过创建一个

    并添加一个.Alert类和四个上下文类之一,添加一个基本警告框。警报成功。警报信息。警报警告,。警惕危险。
    同时,添加可选。警报对上述类不可用。
    添加关闭按钮。
    确保使用带有数据丢失=“警报”数据属性的元素。
    在这里插入图片描述

    警告中的链接

    在警报中创建链接的步骤如下:
    通过创建一个

    并添加一个.Alert类和四个上下文类之一,添加一个基本警告框。警报成功,。警报信息,。警报警告,。警惕危险。
    使用。警报链接实体类以快速提供具有匹配颜色的链接。

    
    
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    警告中的链接运行截图如下:
    在这里插入图片描述

    Bootstrap 轮播

    bootstrap carousel插件是一种灵活且响应迅速的方式,可以向站点添加滑块。此外,内容足够灵活,可以是图像、嵌入式框架、视频或任何其他类型的内容。
    如果要单独引用此插件的功能,则需要引用carousel js或者,如“bootstrap插件概述”一章所述,您可以参考bootstrap JS或bootstrap.min.JS的压缩版本。
    下面是一张简单的幻灯片,使用引导旋转木马插件来显示循环元素的公共组件。为了实现旋转,您只需要添加带有此标记的代码。不需要使用数据属性,只需要简单的基于类的开发。

    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    Bootstrap 轮播运行截图如下:

    在这里插入图片描述
    可以在中为幻灯片添加标题。.Item中的旋转木马标题元素。只要把任何可选的HTML放在那里,它就会自动对齐并格式化。

    通过数据属性:可以使用数据属性轻松控制旋转木马的位置。
    属性数据幻灯片接受关键字prev或next,用于更改幻灯片相对于当前位置的位置。
    使用数据滑动将原始滑动索引传递给旋转。数据滑动到=“2”将滑块移动到特定索引,索引从0开始计数。
    data ride=“carousel”属性用于标记加载页面时旋转开始动画播放。
    通过javascript:可以通过javascript手动调用carousel,如下所示:

    $(“.carousel”).carousel()
    
    • 1
    选项名称类型/默认值Data 属性名称描述
    intervalnumber
    默认值:5000
    data-interval自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。
    pausestring
    默认值:"hover"
    data-pause鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。
    wrapboolean
    默认值:true
    data-wrap轮播是否连续循环。

    在这里插入图片描述

  • 相关阅读:
    Linux学习笔记——系统文件与目录操作函数
    YOLOV7开源代码讲解--训练参数解释
    Python开发技术—文件和异常2
    从 1 开始被动态规划玩转 (上)
    Python实现并测试K-means聚类算法
    如何卸载干净 IDEA(图文讲解)windows和Mac教程
    【JavaEE初阶】 JavaScript基础语法——壹
    MATLAB——一维离散小波的单层分解
    【数据结构算法】小结
    JVM自定义类加载器在代码扩展性的实践
  • 原文地址:https://blog.csdn.net/weixin_57198749/article/details/126021317