: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素， 支持回退等 jScrollPane: 自定义的滚动条，让所有浏览器都显示一样的滚动条 onepage-scroll: 提供类似于...，可以在滚动的过程中设置各种各样的动态效果 infinite-scroll: 滚动加载，滚动到最下到自动加载， Paul Irish 大神之作 animatable: 仅仅依靠 border-width...可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS jquery-qrcode: jQuery 插件，用来生成二维码 Wookmark-jQuery: jQuery 的一个插件，...的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器，简洁小巧 sensor.js: 在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。...: Bootstrap 的一款主题，简洁美观 iCheck: 一款漂亮的 Checkbox 插件 Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb
特点: 简单容易上手，开源产品，提高开发人员的工作效率 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。...CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。... 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 .pre-scrollable: 使 元素可滚动，代码块区域最大高度为340px 一旦超出这个高度,就会在Y轴出现滚动条...; 官方文档描述: Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。...Table 表格 描述:提供了一个清晰的创建表格的布局; 表格类BS样式: .table-responsive #任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备
该库的每个元素（颜色，导航样式，版式，视觉效果，布局）都可以自定义，这是此插件的真正优势。 针对移动设备进行优化的模式可确保您的内容在各个平台上完美展示。...页面在后台渲染，以确保流畅的阅读体验，智能平底锅会自动以最舒适的方向显示翻书，以便在任何设备上阅读。...这个WordPress画廊插件还提供YouTube支持。 该插件完全响应，并且不需要Flash，可在移动设备和台式机上可靠运行。...用户freschstudio说： “毫无疑问，在我们尝试的大约50个免费和高级插件中，这是最好的。 集成和使用非常容易。 模态画廊非常现代，针对响应和移动设备进行了很好的优化。”...您可以在Envato Market上找到更多很棒的WordPress画廊插件。
，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置...，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）width:视口的宽度initial-scale：初始化缩放user-scalable:是否允许用户自行缩放（值：yes/no; 1...，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置...，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale：初始化缩放 user-scalable:是否允许用户自行缩放（值：yes/no...JavaScript插件的依赖情况 如何使用Javascript插件 内置组件 模态对话框 下拉菜单 滚动监听 标签页 工具提示 弹出框 警告框 按钮 折叠面板 轮播图 吸顶效果 data-spy
二、知识点 2.1 滚动监听 滚动监听使用了 Bootstrap 的 JavaScript 插件，根据滚动条所处的位置自动更新选中导航栏。...并且给导航栏添加样式 navbar-fixed-top 使其固定在顶部不随滚动条移动而移动，但这样的话会遮住 body 上面的一部分内容，所以同时给 body 添加样式 padding-top: 60px...这时移到最顶部时不能合理定位到第一个导航部分，因为上面给了 body 元素一个 60px 的内边距，这里给 body 元素增加一个属性 data-offset="60"，使滚动监听在计算滚动位置是相对于顶部有一个偏移量...可以在官网定制页面设置自己需要的： 通用 CSS 组件 JavaScript 组件 jQuery 插件 例如：滚动监听只需要导航栏组件，基础 CSS 样式和 Scrollspy JavaScript 插件...三、实战 使用 Bootstrap 滚动监听和定制功能制作一个介绍豆瓣 App 的单页面。
二维码 jQuery qrcode：https://github.com/jeromeetienne/jquery-qrcode 是一个能够在客户端生成矩阵二维码的jQuery插件，使用它可以很方便的在页面上生成二维码...模版引擎 doT：https://github.com/olado/doT doT模板方便快捷的组织页面DOM，特点是快，小，无依赖其他插件。这也是我在项目中经常会使用的一个模版引擎。...滚动库 iScroll：https://github.com/cubiq/iscroll iScroll是一个高性能、小体积、零依赖、跨平台的js滚动库。它支持PC端、移动端甚至smart TV。...beter-scroll：https://github.com/ustbhuangyi/better-scroll 一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。...mescroll：https://github.com/mescroll/mescroll 精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器。
这是一款支持移动手机mobile设备的 jQuery全屏水平横向翻页效果插件。 该翻页插件能够使页面在水平方向上左右全屏翻动，它支持手机触摸屏，支持使用鼠标滚动页面。...整个页面过渡平滑，效果很不错。
Bootstrap在jQuery的基础工作，可以理解Bootstrap就是jQuery的一个插件。 Bootstrap 使得 Web 开发更加快捷，代码优雅，美观大方。...此概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。...视口的作用：在移动浏览器中，当页面宽度超出设备(device)，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 取值： width=device-width, 视口的宽度，大多手机浏览器视口的宽度是...-- 使IE8支持HTML5元素特性和CSS3媒体查询 注意：respond.js 不能本地运行（file://），必须放置在web服务器（http:// ,暂时不用掌握） --> <!...4.2.1 案例分析 当浏览器向下滚动到指定位置时，导航条悬浮在指定页面最顶端，保证整个浏览过程，都可以看到导航条。
: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素， 支持回退等 jScrollPane: 自定义的滚动条，让所有浏览器都显示一样的滚动条 onepage-scroll: 提供类似于...iPhone6 展示页类似的效果，适用于单页应用，兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等)，性能很好 ScrollMagic: 神奇的滚动交互效果插件...，可以在滚动的过程中设置各种各样的动态效果 infinite-scroll: 滚动加载，滚动到最下到自动加载， Paul Irish 大神之作 animatable: 仅仅依靠 border-width...可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS jquery-qrcode: jQuery 插件，用来生成二维码 Wookmark-jQuery: jQuery 的一个插件，...的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器，简洁小巧 sensor.js: 在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。
这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等 touchstart、touchmove、touchend 三个事件都会各自有事件对象。...案例：返回顶部 当页面滚动某个地方，就显示，否则隐藏 点击可以返回顶部 1.3.2.案例分析 滚动某个地方显示 事件：scroll页面滚动事件 如果被卷去的头部（window.pageYOffset ）...移动端视频插件 zy.media.js 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。...它能开发PC端，也能开发移动端 Bootstrap JS插件使用步骤： 1.引入相关js 文件 2.复制HTML 结构 3.修改对应样式 4.修改相应JS 参数 1.7....可以将对象JSON.stringify() 编码后存储 1.7.2.window.sessionStorage 1、生命周期为关闭浏览器窗口 2、在同一个窗口(页面)下数据可以共享 3、以键值对的形式存储使用
定宽容器，在不同大小的设备上提供不同的 width 固定值 ①. class: .container ②. lg : width:1170px ③. md : width:970px ④. sm : width...: 在 lg下，当前列向左移动n 列的距离 ⑦....Bootstrap 组件 － 图标字体.glyphicons 在页面中，显示为图标，本质上是文字，可以设置字体，颜色，大小，阴影等，Web程序中常用的图标字体： (1)....导航栏的固定，不会随着滚动条发生滚动，一直在可视化区域中 ①. 固定在页面顶端：.navbar-fixed-top ②....JS 插件.Bootstrap 基于 jQuery ，在 jQuery 基础上提供了十几个插件函数，每个都是一个独立的 JS 文件,可以一次性引入全部的 JS 操作 - bootstrap.js，每个插件函数都有两种调用方式
官网 joyride：基于 jQuery 的功能引导插件。官网 focusable：通过向页面其余部分添加遮罩层，使焦点聚集在特定 DOM 元素。...官网 幻灯片 Swiper：使用硬件加速过渡的移动设备触控滑块框架。官网 slick：你所需要的最后一个轮播插件。...官网 skrollr：独立（不依赖 jQuery） 的视差滚动库，适用于移动设备（Android + iOS）和桌面电脑。官网 parallax：面向智能设备的视差引擎。...官网 fullPage：简单和易于使用的、用于创建全屏滚动网站的插件（也被称为单页面网站）。官网 ScrollMenu：让老旧无聊的滚动条焕然一新。...官网 dropload.js：移动端下拉刷新，上拉加载更多。官网 touchslide.js：触屏滑动特效。官网 地图 Leaflet：对移动设备友好的、可交互的地图 JavaScript 库。
--初始化移动浏览显示——平时使用的移动设备是把页面放进一个虚拟的视图：viewport中，一般情况先，这个视口比屏幕宽，这样就不用把每个网页挤到很小的设备屏幕大小中，但是用户浏览需要缩放or左右平移页面才能看清楚...viewport可以让开发者控制在移动设备上显示时页面的大小或缩放，这里的宽度是控制viewport/视口的大小，可以指定一个值，width=device-width就是让视口宽度等于设备的宽度的意思，...总结，这句话的意思就是让视口的宽度等于物理设备上真是的分辨率，初始的缩放比例为1=不缩放。主要为了适配移动设备用的，都要加上。...--下面这段代码就是注释了的，因为bootStrap的3.0以后的版本不支持ie7以及以下的版本，如果ie的版本低于ie9的话，也就是针对ie8，在[if it IE 9]之后的两句script中，第一个表示为使...-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
与underscore比其优势是，效率高；可自定义构建 Sugar 在原生对象上增加一些工具方法 functional.js 提够了一些Curry的支持 bacon.js 函数式编程，cool...该组件依赖Twitter Bootstrap, Moment.js和jQuery. 自定义滚动条 perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。...iscroll 在移动设备上用不错 表格组件 datatables 表格可交互（对内容进行排序，删除等） backgrid 各种功能，带分页，可编辑表格内容。很棒。...选取颜色 Spectrum 编辑器 ace 代码编辑器，可以用来做demo演示 ckeditor ueditor 百度做的 tinymce 对html内容进行实时的编辑 summernote 在移动设备上用不错...scrolldeck flash swfobj 能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。
Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js — 滚动时展现动画 Scrolline.js... — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画 Handlebars.js — Javascript...模板 jInvertScroll — 视差滚动 One page scroll — 又一个页面滚动库 Parallax.js — 对智能设备方向变化做出响应的视差引擎 Typeahead.js — 搜索补全...Flexdatalist — 自动补全 Slideout.js — 移动应用侧滑导航 Jquerymy — 使用 jQuery 实现双向数据绑定 Cleave.js — 实时格式化输入内容 Page
最重要的是，它提供了最新的JavaScript插件，使模板更加高效和强大。 你要知道，一个具有启发性的令人惊叹的免费HTML5网页模板可以大大减少耗时并提高生产力。 2. ... jQuery＆Javascript插件 l YouTube和Vimeo Player插件 AweSplash非常适合作为欢迎页面或任何其他着陆页来推出新产品或宣布即将举办的活动。...兼容所有设备，显示在所有屏幕尺寸上。它完全建立在Bootstrap框架中，HTML5，CSS3和JQuery.你可以轻松的将这个模板与任何其他类型的生意相结合。 4. ...由于Bootstrap 4为开发人员和用户提供了更多的舒适性和灵活性，Vex模板在小屏幕上可以发挥出色的效果。 2. ...艺术作品和创意项目在模板正面和中心位置展示，非常吸引人。引人注目的黑白媒体以及视差滚动为丰富多彩的独特风格提供了完美的背景。
最重要的是，它提供了最新的JavaScript插件，使模板更加高效和强大。 你要知道，一个具有启发性的令人惊叹的免费HTML5网页模板可以大大减少耗时并提高生产力。 2. ...开发技术：HTML 5, CSS 3, JS, jQuery 网站特色： l 滑块 l 响应式视网膜菜单 l 幽灵按钮 l SEO友好 l 设备响应 l jQuery＆Javascript插件 l YouTube...兼容所有设备，显示在所有屏幕尺寸上。它完全建立在Bootstrap框架中，HTML5，CSS3和JQuery.你可以轻松的将这个模板与任何其他类型的生意相结合。 4. ...由于Bootstrap 4为开发人员和用户提供了更多的舒适性和灵活性，Vex模板在小屏幕上可以发挥出色的效果。 2. Conceit - 企业类Bootstrap响应式Web模板 ?...艺术作品和创意项目在模板正面和中心位置展示，非常吸引人。引人注目的黑白媒体以及视差滚动为丰富多彩的独特风格提供了完美的背景。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。 Bootstrap的历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。...Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么要用Bootstrap 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。... 在移动设备浏览器上，通过为视口（viewport）设置 meta...因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？...在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。...我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。...随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。 什么是响应式？...JavaScript插件 常用的Bootstrap自带插件 其他常用插件 Bootstrap实例精选： 封面图 Carousel 博客页面 控制台 登录页 Offcanvas
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
