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

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

Bootstrap 警告

可以在警告框中添加可选的关闭按钮。要创建内联的可取消警告框,请使用warnings jQuery插件。
可以通过创建一个<div>并添加一个来添加一个基本警告框。警报类和四个上下文类之一(即.Alert success、.Alert info、.Alert warning、.Alert danger)。

<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>

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

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

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

警告中的链接

在警报中创建链接的步骤如下:
通过创建一个<div>并添加一个.Alert类和四个上下文类之一,添加一个基本警告框。警报成功,。警报信息,。警报警告,。警惕危险。
使用。警报链接实体类以快速提供具有匹配颜色的链接。

<div class="alert alert-success">
    <a href="#" class="alert-link">成功!很好地完成了提交。</a>
</div>
<div class="alert alert-info">
    <a href="#" class="alert-link">信息!请注意这个信息。</a>
</div>
<div class="alert alert-warning">
    <a href="#" class="alert-link">警告!请不要提交。</a>
</div>
<div class="alert alert-danger">
    <a href="#" class="alert-link">错误!请进行一些更改。</a>
</div>

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

Bootstrap 轮播

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

<div id="myCarousel" class="carousel slide">
    <!-- 轮播(Carousel)指标 -->
    <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>   
    <!-- 轮播(Carousel)项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
            <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
            <div class="carousel-caption">标题 2</div>
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
            <div class="carousel-caption">标题 3</div>
        </div>
    </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Bootstrap 轮播运行截图如下:

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

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

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

在这里插入图片描述

相关文章
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
60 3
|
2天前
|
存储 前端开发 JavaScript
前端技术深度探索:从基础到现代框架的实践之旅
前端技术深度探索:从基础到现代框架的实践之旅
13 2
|
2天前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
4 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
11天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
16 2
|
14天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
30 4
|
14天前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
15 1
|
21天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
2天前
|
前端开发 JavaScript 编译器
前端技术探索:从基础到现代框架的跃迁
前端技术探索:从基础到现代框架的跃迁
5 0
|
1月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
120 3
|
2月前
|
前端开发 安全 测试技术
[译]一种基于模块联邦的插件前端
[译]一种基于模块联邦的插件前端