组件的使用

  1. 首先需要将组件下载下来放在统同级目录下
  2. 导入组件
  3. 使用组件

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组件使用的更多相关文章

  1. 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  2. jQuery UI简单的讲解

    我们先进入一下问答时间,你都知道多少呢? (1)什么是jQuery UI 呢? 解答:jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互. ...

  3. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  4. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  5. jQuery UI 之 Bootstrap 快速入门

    转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...

  6. 这 5 个前端组件库，可以让你放弃 jQuery UI

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的UI组件.无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么 ...

  7. 二：nodejs+express+redis+bootstrap table+jquery UI

    介绍:做一个量化投资的实时系统. 综合: 添加记录,顺序改变的话,refresh之后,能正常刷新吗?可以正常刷新,只是顺序又变回去. express中用fs readfile 时,需要用path.jo ...

  8. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...

随机推荐

  1. JVM的类加载过程以及双亲委派模型详解

    JVM的类加载过程以及双亲委派模型详解 这篇文章主要介绍了JVM的类加载过程以及双亲委派模型详解,类加载器就是根据指定全限定名称将 class 文件加载到 JVM 内存,然后再转化为 class 对象 ...

  2. R语言-记号体系

    安装xlsx包 #装之前先装jdk,配置环境变量 install.packages("xlsx") 代表安装成功 必须先加载包然后再使用包library() $提取符号 当一个函数 ...

  3. CSP 2019 游记

    Day -32 开坑. 没什么好说的,等个 5 天等初赛(应该叫第一轮认证)挂掉之后就能弃坑了. 今天开始停课,虽然每天只停半天,但是感觉还是特别的舒服~ 然而得等初赛过了才能全天停课-- 没关系,熬 ...

  4. 数据结构与算法-Python/C（目录）

    第一篇 基本概念 01 什么是数据结构 02 什么是算法 03 应用实例-最大子列和问题 第二篇 线性结构 01 线性表及其实现 02 堆栈 03 队列 04 应用实例-多项式加法运算 05 小白专场 ...

  5. Map拼接URL地址

    import java.util.HashMap; import java.util.Iterator; import java.util.Map; /** * @Author: hoje * Des ...

  6. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  7. 一个Web前端工程师或程序员的发展方向，未来困境及穷途末路

    如果你刚好是一个Web前端工程师,或者你将要从事web前端工作.你应该和我有同样的感慨,web前端技术到了自己的天花板,前端工作我能做多少年?3年或5年?自己的职业规划应该怎么样?收入为什么没有增长? ...

  8. ASP.NET Core使用Nacos作为配置中心的多环境问题

    前言 双11那天离职后,这段时间都待在家里,看看书,写写代码,逛逛招聘网站 周一去Gworld面试的时候,有听到面试官说他们用到了配置中心Apollo,聊下来,听他的意思,大概是处理了多环境这个比较方 ...

  9. GO　基本语法——变量

    基本语法--变量 一.变量的使用 1.1 什么是变量 变量是为存储特定类型的值而提供给内存位置的名称.在go中声明变量有多种语法. 所以变量的本质就是一小块内存,用于存储数据,在程序运行过程中数值可以 ...

  10. Elasticsearch Query DSL 语言介绍

    目录 0. 引言 1. 组合查询 2. 全文搜索 2.1 Match 2.2 Match Phase 2.3 Multi Match 2.4 Query String 2.5 Simple Query ...