class="bar bar6"> css...部分主要使用了css3中的animation和transform属性。...transform属性允许我们对元素进行旋转、缩放、移动或倾斜 body{ margin: 0; padding: 0; box-sizing: border-box;
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。...其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。...2、visual viewport（视觉视口）和物理像素 visual viewport（视觉视口）物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。...dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式： 逻辑像素宽度*倍率 = 物理像素宽度 而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是
what jQuery Mobile是jQuery 在手机上和平板设备上的版本。它不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。...使用 要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容： CSS文件jquery.mobile-1.4.5.min.css jQuery类库文件 jquery.min.js...中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。... 我是嵌套的可折叠块中被展开的内容。 panel ? jQuery Mobile中的面板会在屏幕的左侧向右侧划出。...如果想让面板出现在屏幕的右侧，可以指定 data-position="right" 属性。
2、特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些...端和移动端 4.Bootstrap是依赖于jQuery库的，所以使用BootStrap时必须导入jQuery库 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口...1.媒体查询 2.jQuery的屏幕监听 总结 在BootStrap的学习中，大部分都是依赖于使用API，利用里面的框架和案例来实现自己想要的功能和布局，所以学会看文档很重要...这是我第一次学习和使用响应式布局的框架，多加摸索，就是在学习，以后自己使用属于自己的一套框架。 下一篇博客，我用BootStrap基础来实现一整个响应式网页的布局。
Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；为什么使用Bootstarp？...生态圈火，不断地更新迭代；提供一套美观大方地界面组件；提供一套优雅的 HTML+CSS 编码规范；让我们的 Web 开发更简单，更快捷；注意：使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式准备下载...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件的依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发； 为什么使用Bootstarp？...媒体对象 进度条 Glyphicons 标签 徽章 缩略图 大屏幕 嵌入内容 内嵌 JavaScript插件 JavaScript插件的依赖情况 如何使用Javascript插件 内置组件 模态对话框
eruda与腾讯推出的vconsole很相似，都是用于移动端的调试，让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。...手机端显示异常，可是在PC端显示却是好好的，完全搞不懂是哪个CSS编写有问题 遇到上述情况的你，心情就像下面的样子 ?...Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie...3.Elements面板：查看标签内容及属性；查看应用在Dom上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看Dom上绑定的各类事件。 ?...8.Snippets面板：页面元素添加边框；加时间戳刷新页面；支持自定义代码片段。 如何使用 通过CDN使用： ? 通过npm安装： ? 在页面中加载脚本： ?
······················ 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ········...依赖jQuery，那就应该先引用jQuery.js然后引用bootstrap.js CSS约定： 除了公共级别样式，其余样式全部有模块前缀 尽量使用直接子代选择器，少用简介子代，避免错杀 2、Bootstrap...； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...--html5shiv让浏览器可以识别HTML5的新标签--> 10 使用CSS3的媒体查询--> 11 屏幕——嵌入内容——内嵌 将日常使用的一些功能块，提前写好，我们使用时，直接找到对应的demo，做相应调整，就可以了。
文字使用相对尺寸(em,rem)，尽量不用绝对尺寸(px) CSS 中的 1px 并不代表真实物理设备的 1px，如：iPhone4 以后，屏幕为 Retina 屏幕，屏幕大小没有变化，但分辨率提升一倍...栅格布局 好处：效率高，容易控制，实现响应式 不足：没有 栅格布局实际上就是由 div 组成的 table 样式的响应式结构 使用方法： ①....列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离 B、col-lg-pull-n...JS 插件.Bootstrap 基于 jQuery ，在 jQuery 基础上提供了十几个插件函数，每个都是一个独立的 JS 文件,可以一次性引入全部的 JS 操作 - bootstrap.js，每个插件函数都有两种调用方式...特殊效果：手风琴(Accordion)，此效果分为面板组(panel-group)和折叠插件两部分 ? (4).
ISUX团队（社交用户体验设计团队）根据最新的手机QQ设计规范制作的移动端Web框架，包括CSS基础样式和组件、JavaScript基础组件和一些动画效果库。...Amaze UI Amaze UI 采用业内先进的 Mobile first 理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。...Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。...CardKit CardKit 是来自豆瓣的一个移动 UI 框架，使用 Card\Unit\Component 概念快速构建移动 Web 应用。应用外观跟原生应用无异。...UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。
你是否使用过智能手机浏览真正的网页? 你是否因为自己作为后端程序员而不能开发出较漂亮的页面? 你是否开发过能够同时适应不同分辨率的屏幕的页面?...Bootstrap 是什么 随着互联网技术的发展，以及现在的移动互联网风靡全球，现在的网页已经不是过去那么的简单和纯粹。除了追求功能业务的实现外，现在的网页更多的是追求页面的美观、人性化、便捷等。...随着移动设备的普及，CSS 3 大行其道，HTML 5 标准的制定使得前端技术更加受人重视，这几年出现了很多优秀的前端框架，极大地方便了程序的开发，其中Bootstrap 就是其中一个非常优秀的前端框架...Bootstrap 使用HTML 5 和CSS 3 开发，在IE 9 以下版本是不支持HTML 5 特性的，而jQuery 最近版本已经无情的抛弃了IE 9 以下版本。...简单模板 在使用Bootstrap 时，需要在页面中引用Bootstrap.css 样式。如果要使用到相应的组件，还要引入jQuery.js 以及Bootstrap.js 文件。
网页在手机上的比平板上要小，比pc上要小，之前都是针对的是pc设计，现在要考虑到平板，手机，手表，固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放，以适应屏幕。...2.1 引入文件 bootStrap.min.css jquery.min.js bootStrap.min.js 2.2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口...CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。...站点引用 Bootstrap 插件的方式有两种： 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。...无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。**** 创建可折叠的分组或折叠面板（accordion）*
2：移动端适配，移动端的高速发展，各种屏幕大小的适配，以及不同系统的兼容问题，以及市面上各种眼花缭乱的适配方案，让我们头晕目眩，在加上less，sass，scss的出现，多了些许逻辑在里面，让我们写css...前端的CSS框架 但是现在有两个主要的动态css语言，LESS和SASS，给css提供了变量，mixin，运算符等功能，让写出模块化的css框架成为可能。...UI库（UI组件库) bootstrap - Twitter推出的一个用于前端开发的开源工具包，jQuery 生态。据说马上的 v5 版本会脱离 jQuery 生产。...Vue 2.0 的桌面端组件库 Element-React Element Angular Bootstrap (CSS框架) Bootstrap是在jquery时代的UI组件库，而且Bootstrap...大部分组件是依赖css的，依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等。
1.UI.Layout jQuery UI布局插件 官方网站：http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。...布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏，菜单，帮助面板，状态栏，子表单等的复杂应用程序。集成并增强其他UI小部件，如选项卡，手风琴和对话框，以创建丰富的界面。 ?...resources/jquery-masonry 所有项目的大小和样式都由您自己的CSS处理。项目大小可以用响应式布局的百分比来设置 ?...一个组件是一个抽象; 它可以通过多种方式实现，例如HTML5 Canvas绘图中的项目或HTML元素。jLayout库允许您专注于绘制各个组件，而不是如何将其排列在屏幕上。...您可以指定列宽或列的静态数量。而且，当然，这很容易使用！Columnizer会将CSS类添加到它创建的列中。每列将有一个“列”类名。第一列将有“第一”，最后一列将有“最后”。
HTML、CSS HTML（超文本标记语言）和CSS（层叠样式表）是Web编码的最基本构建块。没有这两件事，你就无法创建一个网站设计，而你最终得到的只是屏幕上没有格式化的纯文本。...响应式设计意味着网站的布局（有时功能和内容）会根据用户使用的屏幕尺寸和设备而发生变化。 例如，当从具有大显示器的台式计算机访问网站时，用户将获得专门为鼠标和键盘用户创建的多列，大图形和交互。...在移动设备上，同一网站将显示为针对触摸交互进行优化的单个列，但使用相同的基本文件。 移动设计可以包括响应式设计，但也包括创建单独的移动专用设计。...例如，拥有网上银行的银行网站将受益于一个单独的移动网站，该网站允许用户查看最近的银行位置和简化的帐户视图（因为移动屏幕较小）。...所以，假设您添加了一个自定义的jQuery插件，突然有一半的其他代码中断了。您可以回滚到以前的版本，然后使用其他解决方案再次尝试，而不是必须加密手动撤消它并修复所有错误。
官网：http://jui.org/ 下载：https://github.com/dwzteam/ 三、HUI H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT...最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.4)，当然，也集成了很多功能强大...八、Admin LTE AdminLTE 是一个基于Bootstrap 3.x的免费主题，它是一个完全响应式管理模板。高度可定制的，易于使用。适合从小型移动设备到大的台式机很多的屏幕分辨率。...它是充分响应的由Bootstrap3 +框架开发的模板,HTML5和CSS3。它有很多可重用的UI组件和集成了最新的jQuery插件。...想来想去还是拿不定主意，不过有点想法： 1、使用HUI和bootstrap 2、使用EasyUI的框架，内容页使用HUI+BootStrap，iframe选项卡 3、从各个功能强大的页面中拿一些插件过来
1）touches：当前位于屏幕上的所有手指的列表。...console.log("用户手指触摸到屏幕..."); }); //手指在屏幕上移动时触发 $('body').on('touchmove...', function (even) { $('p').css({'color': '#0f0'}); console.log("用户手指在屏幕上移动...3、上面是使用 JQuery 的写法，推荐使用如下所示的 JavaScript 方式，因为在获取回调函数的 事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。 JQuery 获取触摸对象的class属性值 } /** * 手指在触摸屏上移动时——函数调用
draggable： 设置窗口是否可拖拽移动。closable： 设置窗口是否可关闭。3.3.2 使用示例的形式展示在网页上，并且提供了丰富的功能，如排序、分页、筛选、编辑等，使用户能够轻松地浏览和操作数据。...3.5 Tree 树形菜单组件Tree 树形菜单组件可以将数据以树状结构展示在网页上，并且提供了丰富的功能，如节点展开、折叠、选中、勾选等，使用户能够轻松地浏览和管理信息。...我们还设置了分页按钮的布局，包括列表、分隔符、首页、上一页、页码链接、下一页、尾页、分隔符和刷新按钮。...4.1.1 主要属性content： 设置提示信息的内容。position： 设置提示框的位置。trackMouse： 设置是否跟随鼠标移动。4.1.2 使用示例<!
draggable： 设置窗口是否可拖拽移动。 closable： 设置窗口是否可关闭。 3.3.2 使用示例 <!...3.4 Datagrid 数据表格组件 Datagrid 数据表格组件可以将数据以表格的形式展示在网页上，并且提供了丰富的功能，如排序、分页、筛选、编辑等，使用户能够轻松地浏览和操作数据。...3.5 Tree 树形菜单组件 Tree 树形菜单组件可以将数据以树状结构展示在网页上，并且提供了丰富的功能，如节点展开、折叠、选中、勾选等，使用户能够轻松地浏览和管理信息。...我们还设置了分页按钮的布局，包括列表、分隔符、首页、上一页、页码链接、下一页、尾页、分隔符和刷新按钮。...4.1.1 主要属性 content： 设置提示信息的内容。 position： 设置提示框的位置。 trackMouse： 设置是否跟随鼠标移动。 4.1.2 使用示例 <!
调试移动端的三种方法 vConsole ——开源的前端 console 调试面板 Eruda chrome://inspect/ 一、vConsole vConsole 是一款由微信公众平台前端团队打造的前端调试面板...二、Eruda Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和...Elements面板：查看标签内容及属性；查看应用在Dom上的样式；支持页面元素高亮；支持屏幕直接点击选取；查看Dom上绑定的各类事件。 ?...Sources面板：查看页面源码；格式化html，css，js代码及json数据。 Info面板：输出URL及User Agent；支持自定义输出内容。...三、安卓机调试 —— chrome://inspect/#devices 第一步：首先在移动设备上开启USB调试模式并下载一个手机端的chrome。
5.3 扩展 可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。..., height 当面板调整大小之后触发width: 新的宽度;height: 新的高度 onMove left,top 当面板移动之后触发left: 新的左侧位置top: 新的顶部位置 onMaximize...当设置了href值时，刷新面板来加载远程数据 resize options 设置面板的大小和布局，这些选项包含以下的属性：width: 新面板的宽度; height: 新面板的高度; left: 新面板的左侧位置...; top: 新面板的顶部位置 move options 移动面板到一个新的位置，这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置 11 Tabs（标签） 11.1 实例...标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同 onSelect title 当用户选择一个标签面板时被触发 onClose title 当用户关闭一个标签面板时被触发
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
