组件的使用

  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. 201871020225-牟星源 《面向对象程序设计（java）》第一周学习总结

    正文 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daiz ...

  2. 【python爬虫】cookie & session

    一.什么是cookie? cookie是指网站为了鉴别用户身份,进行会话跟踪而存储在客户端本地的数据. 二.什么是session? 本来的含义是指有始有终的一些列动作,而在web中,session对象 ...

  3. 乘积量化（Product Quantization）

    乘积量化 1.简介 乘积量化(PQ)算法是和VLAD算法是由法国INRIA实验室一同提出来的,为的是加快图像的检索速度,所以它是一种检索算法,在矢量量化(Vector Quantization,VQ) ...

  4. C#位运算实际作用之操作整型某一位

    1.前言 前几天写了两篇关于c#位运算的文章 c#位运算基本概念与计算过程 C#位运算实际运用 在文中也提到了位运算的实际作用之一就是合并整型,当时引用了一个问题: C# 用两个short,一个int ...

  5. celery生产者-消费者

    Celery是一个简单,灵活,可靠的分布式系统,用于处理大量消息,同时为操作提供维护此类系统所需的工具. 它是一个任务队列,专注于实时处理,同时还支持任务调度. celery解决了什么问题: 示例一: ...

  6. MQ的深入理解

    MQ的深入理解 MQ的作用: 解耦合,降低系统与系统之间的频繁改动 MQ的特点: 复杂的系统解耦合 (主系统将数据放入mq,子系统需要的时候直接从mq中取出数据)复杂链路的异步调用(将必要的链路执行完 ...

  7. 详解JAVA8Stream API {全}

    1: 概述 1.1 优势 1.2 与传统迭代器的区分 1.3 流的操作类型分为两种: 2:流的构造与转换 2:1 常见构造 2.2: 三大包装类型的构造 2.3 并行流的规则输出 2.4 流的转换 3 ...

  8. 易飞审核员调用DEMO-DELPHI

    作用:我已在其他文章里提过.直接调用易飞审核员程序,易飞9全版本全模块通用. 亮点:错误直接返回错误信息,并非错误代码. 最全.最优的易飞审核员接口开发,支持个案审核员接口开发.有需要的联系本人. 唯 ...

  9. 查询安装webpack4.0是否成功时提示无法找到的解决方法

        最近使用webpack -v 查询webpack版本时提示无法找到         然后我试着重新全局安装webpack,提示还需要安装webpack-cli 选择yes后虽能成功安装webp ...

  10. 点云3D 目标检测

    点云 点云是雷达采集到的信息. 关于点云基本介绍参考https://zhuanlan.zhihu.com/p/22581673 ros中的点云消息结构:http://docs.ros.org/jade ...