BootStrap、jQuery UI、bxSlider组件使用
组件的使用
- 首先需要将组件下载下来放在统同级目录下
- 导入组件
- 使用组件
BootStrap
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
</head>
<body>
<div>
<!-- 使用表单组件-->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div style="clear: both;"></div>
</div>
<div>
<!-- 使用图标-->
<span class="glyphicon glyphicon-heart"></span>
</div>
<script src="jQuery-3.4.0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>
jQuery UI
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
</head>
<body>
<div id="slider"></div>
<script src="jQuery-3.4.0.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</body>
</html>
bxSlider
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bxslider-4-4.2.12/src/css/jquery.bxslider.css">
</head>
<body>
<div class="slider">
<div><img src="1.JPG" /></div>
<div><img src="2.JPG" /></div>
</div>
<script src="jQuery-3.4.0.js"></script>
<script src="bxslider-4-4.2.12/src/js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
pause: 2000,
// 其他参数
});
});
</script>
</body>
</html>
常用参数
|参数|描述|默认值|
|-|-|
|mode|设置滑动模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出|horizontal|
|speed|内容切换速度，数字，ms|500|
|startSlide|初始滑动位置，数字|0|
|randomStart|随机初始滑动位置|true|
|infiniteLoop|循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置|true|
|easing|切换动画扩展，可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果|null|
|captions|设置显示图片标题，当滑动内容为图片时并设置属性title，可以显示图片标题|false||video|支持视频，当设置为true时，需要jquery.fitvids.js支持|false||pager|设置是否显示分页，设置为true时，会在滑动内容下方显示分页图标|true|
|controls|设置是否显示上一副和下一幅按钮|true|
|auto|设置是否自动滑动|false|
|pause|自动滑动时停留时间，数字，ms|4000|
|autoHover|当鼠标滑向滑动内容上时，是否暂停滑动|false|
BootStrap、jQuery UI、bxSlider组件使用的更多相关文章
- 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器
一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...
- jQuery UI简单的讲解
我们先进入一下问答时间,你都知道多少呢? (1)什么是jQuery UI 呢? 解答:jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互. ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- jQuery UI 之 Bootstrap 快速入门
转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...
- 这 5 个前端组件库，可以让你放弃 jQuery UI
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的UI组件.无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么 ...
- 二：nodejs+express+redis+bootstrap table+jquery UI
介绍:做一个量化投资的实时系统. 综合: 添加记录,顺序改变的话,refresh之后,能正常刷新吗?可以正常刷新,只是顺序又变回去. express中用fs readfile 时,需要用path.jo ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
随机推荐
- 201871010102-常龙龙《面向对象程序设计（java）》第一周学习总结
博文正文开头:(3分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/p/11435127.html 这个作业的要求在哪里 https://e ...
- ORA-12505
tomcat 连不上 oracle,报: java.sql.SQLException: Listener refused the connection with the following error ...
- 设计模式-Composite(结构型模式) 用于 递归构建 树 状 的组合结构,与Decorator的区别是 Composite旨在通过构造子类而添加新操作，而Decorator直接添加新操作。
以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Component.h #pragma once class Component { public: Component( ...
- IT兄弟连 Java语法教程 赋值运算符
从本书之前的内容中就一直在使用赋值运算符.现在是正式介绍赋值运算符的时候了.赋值运算符是单个等号”=“.在Java中,赋值运算符的工作方式与所有其它计算机语言相同.它的一般形式如下: var = ex ...
- pytest执行用例时从conftest.py抛出ModuleNotFoundError：No module named 'XXX'异常的解决办法
一.问题描述 在项目根目录下执行整个测试用例,直接从conftest.py模块中抛出了ModuleNotFoundError:No module named 'TestDatas'的异常: 二.解决方 ...
- IntelliJ IDEA代码常用的快捷键（自查）
IntelliJ IDEA代码常用的快捷键有: Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O ...
- 解决ie下vue列表数据不能即时刷新的问题
项目上要兼容IE浏览器(客户要求),发现之前在谷歌浏览器下,操作(增删改查)列表后列表能即时刷新(双向绑定),IE下却不行. 自己调试一下发现,在IE11下,如果GET请求请求相同的URL,默认会使用 ...
- DVR登录绕过漏洞_CVE-2018-9995漏洞复现
DVR登录绕过漏洞_CVE-2018-9995漏洞复现 一.漏洞描述 此漏洞允许攻击者通过修改”Cookie:uid=admin”之后访问特定DVR的控制面板,返回此设备的明文管理员凭证. 二.影响软 ...
- SpringCloud的入门学习之Netflix-eureka（Eureka的集群版搭建）
1.Eureka单机版的话,可能会出现单点故障,所以要保障Eureka的高可用,那么可以进行搭建Eureka的集群版. 高可用的Eureka的注册中心,将注册中心服务部署到多台物理节点上,形成一个集群 ...
- Core源码（二） Linq的Distinct扩展
先贴源码地址 https://github.com/dotnet/corefx/tree/master/src/System.Linq/src .NET CORE很大一个好处就是代码的开源,你可以详细 ...