文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Jump Start Bootstrap 第4章

Bootstrap使用JQuery库来完成全部和JavaScript相关的操作；因此，在Bootstrap中自定义JavaScript相关操作，导入JQuery.js是必须的。...你可以看到，我在调用了.myDropdownHandle之后，使用了dropdown()方法。下拉插件的默认状态是关闭的；然而你刷新页面后它将切换状态并使菜单可见。...在这里，请求是打开和关闭下拉菜单。 让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态，并打印每个事件触发时的状态。 的,不是吗?我们已经创建了一个强大的响应式幻灯片，不需要编写一个JavaScript或CSS。..." data-target="#myModal">Launch modal 在这段代码中，我使用了一个按钮来触发模式对话框。

35K40

为Vue2集成UIkit

这是个比拼开发速度的年代，我们已经没有时间重复发明轮子了，最正确的选择是使用界面框架，例如Bootstrap、UIkit、Foundation等来代替这种大量的重复性极强的界面样式开发工作。...UIkit Bootstrap已经有很多年历史了，在业界的应用也相当普遍，无论是前端开发或者后端开发，为了能快速做一个不算太难看的界面，它自然成为众多工程师的选择，包括我。...安装 虽然在AngularJS、React和Vue的项目中jQuery从来都是一个不受欢迎的库。...我们得同时安装jQuery、UIkit两个库： $ npm i jquery uikit -D 配置 我们需要将jQuery和UIkit的引用以及一些字体的引用配置添加到webpack中（UIkit内置引用了...UIkit的运行主要依赖于一个主样式文件uikit.css、一个主题文件uikit.almost-flat.css（主题文件内置有三个可选项）和一个脚本文件uikit.js。

1.7K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    基于vue.js的渐进式组件尝试

    我们有个内部运营系统，是基于keenthemes的一个主题进行开发的，而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制主题，用于显示各种图表和曲线。...可是，动态加载CSS和JS的难点其实是，如何判断已经资源加载完成？兼容性仍然是个问题。...所以，我又假设了，我们就只使用chrome吧~~ 理想的情况是，加载的资源并行请求，然后渲染执行的时候则按先后顺序，这明显没那么完美的事情。...visd.loadCSS和visd.cachedScript分别只是普通的加载CSS和JS的函数包装。...kee-modal中使用 了slot 标签，叫做内容分发，是web components spec的一个proposal（不会翻译），用于组件中的组合，也就是说我可以这样子用keen-modal: modal

    2.2K100

    基于vue.js的渐进式组件尝试

    我们有个内部运营系统，是基于keenthemes的一个主题进行开发的，而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制主题，用于显示各种图表和曲线。...可是，动态加载CSS和JS的难点其实是，如何判断已经资源加载完成？兼容性仍然是个问题。...所以，我又假设了，我们就只使用chrome吧~~ 理想的情况是，加载的资源并行请求，然后渲染执行的时候则按先后顺序，这明显没那么完美的事情。...visd.loadCSS和visd.cachedScript分别只是普通的加载CSS和JS的函数包装。...kee-modal中使用 了slot 标签，叫做内容分发，是web components spec的一个proposal（不会翻译），用于组件中的组合，也就是说我可以这样子用keen-modal: modal

    1.8K10

    「jQuery」基础 - 03

    1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，使开发人员易于操作，优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。...（jQuery 文件 和 插件文件） 复制相关html、css、js (调用插件)。 1.4.1. 瀑布流插件（重点讲解） 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。...所以下面只演示js的引入，html和css引入根据自己实际 项目需要使用哪种风格引入对应的HTML和CSS。...Bootstrap组件使用非常方便： 引入bootstrap相关css和js 去官网复制html 代码演示 引入bootstrap相关css和js <link rel="stylesheet" href...之后保存数据到本地存储 重新渲染加载数据列表 load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面 如果当前数据的done 为false

    4.1K30

    前端成神之路-03_jQuery

    （jQuery 文件 和 插件文件） 复制相关html、css、js (调用插件)。 1.4.1. 瀑布流插件（重点讲解） ​ 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。...所以下面只演示js的引入，html和css引入根据自己实际 项目需要使用哪种风格引入对应的HTML和CSS。...Bootstrap组件使 用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html 代码演示 引入bootstrap相关css和js <link rel="stylesheet"...// 4.之后保存数据到本地存储 // 5.重新渲染加载数据列表 // 6.load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面 //...7.如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面 1.7.7 案例：toDoList 统计正在进行个数和已经完成个数 // 1.在我们load 函数里面操作 //

    3.8K20

    jQuery 插件

    jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤：...（jQuery 文件 和 插件文件） 复制相关html、css、js (调用插件)。 1.1. 瀑布流插件（重点讲解） 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。...所以下面只演示js的引入，html和css引入根据自己实际 项目需要使用哪种风格引入对应的HTML和CSS。...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...Bootstrap组件使 用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html 代码演示 引入bootstrap相关css和js <link rel="stylesheet

    9.4K30

    jQuery 插件

    （jQuery 文件 和 插件文件）  复制相关html、css、js (调用插件)。 1.1.  瀑布流插件（重点讲解） ​ 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。...我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。 下载位置 代码演示 ​ 插件的使用三点：   1....所以下面只演示js的引入，html和css引入根据自己实际 项目需要使用哪种风格引入对应的HTML和CSS。...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...Bootstrap组件使 用非常方便:  1.引入bootstrap相关css和js        2.去官网复制html 代码演示 1.引入bootstrap相关css和js <link rel="stylesheet

    9.7K10

    手撸的一个快递查询系统，竟然阅读量过1.8w

    ORM框架的作用是把持久化对象的保存、修改、删除等操作，转换成对数据库的操作。 Jquery:一个轻量级的写的少，做的多的 JavaScript 函数库。...Bootstrap:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。...这里我做过很多尝试，想直接调用一些快递公司的快递信息查询接口，但是都发现接口都有session，当session失效后就无法查询到数据或者就查询到的数据不正确。...我已经购买了100块大洋的接口使用权，大家可直接调用快递查询接口。 controller代码 快递信息增删查改的controller就不在列了，这里主要看下我对查询快递的接口进行了一次包装处理。...html页面 html页面引入了jQuery和Bootstrap，jQuery已经过时了，但是使用起来还是很方便的。

    1.8K40

    springboot 入门教程（5） 基于ssm框架的crud操作（前端部分-附源码）

    2、整合前端Bootstap Table + jquery 前端其实很简单，只有一个核心的html页面和一个js，有很多细节这里就不做过多介绍，比如表单中包括附件，处理方式肯定不同了哈。...多选删除我本来已经实现了，但是为了简化又删了。...分页是借助了BootStrap分页的参数（这个参数会自动带到后台，Bootstap table源码的参数和后台我用PageInfo属性名不一致，我改过Bootstap源码，目的就是为了不改pagehelper...注意：直接在官网下载的BootStrap Table分页和这个例子的后台不能兼容） 直接贴出html和js，懂点前端的朋友都能看懂，BootStrap Table不好理解的地方全部加了注释，我的前端很烂的...', '', '' ] .join(''); } // 新增用户 function addUser() { $("#sid").val(""); // 情况信息编辑窗口（编辑和新增公用了一个窗口需要清空

    1.9K80

    设计模式之单例模式

    比如，我要在页面中创建一个唯一的div节点。同样也可以使用 new关键字。...在这段看似炫技的代码中，解决了不透明的问题。但又带来了新的问题。 为了把instance封装，上述采用匿名函数自执行和闭包。并且用使此函数返回了真正的构造函数。增加了复杂度，读起来也不舒服。...全局变量就是一个单例。js中声明全局变量还是非常简单的。比如在jquery中时 $。然而全局变量是js最广受诟病的缺点之一。如何避免？ 命名空间 用属性来取代全局变量，比如用 a.b来取代 b。...它把所有的代码装在一个自执行的函数中。只暴露一些和外界通讯的接口。...有用的程度超过了想象。 使用bootstrap做modal模态框时。我们总是会在html页面全局写段又臭又长的弹框： <!

    79110

    JavaScript Alert 函数执行顺序问题

    问题 ---- 前几天使用 JavaScript 写 HTML 页面时遇到了一个奇怪的问题： 我想实现的功能是通过 confirm() 弹窗让用户选择不同的需求，每次选择后都将选择结果暂时输出到页面上，...此时，还有更诡异的情况，我们给某一个 div 里赋值后，立刻 alert 此 div 里的内容，会发现 alert 显示正确的内容，而 div 里的内容却没有更新，并且会一直阻塞到我们点击确定。...其实大多数情况下我们替换掉 alert 并不是它不符合我们期待的执行顺序，而是因为它实在是太丑了，而且也不支持各种美化，可以想像在一个某一特定主题的网站上忽然弹出来一个灰色单调的对话框是多么不和谐。...这个我们可以考虑 Bootstrap 的 modal 模块，Bootstrap 在绝大多数网站上都在应用，而多引入一个 modal 模块也不会有多大影响。...setTimeOut函数 当然，并不是所有人都愿意使用新的对话框替换 alert 函数的对话框，总感觉上面的方法不是特别的优雅，对此，我们可以采用另外的方法解决这个问题。

    3.8K40

    Vue Loader 篇（下）：编写一个单文件 Vue 组件

    引入 Bootstrap 框架 开始之前，需要添加 Bootstrap 到 Vue CLI 项目，由于目前所有前端资源都已经通过 NPM 进行管理，所以需要安装对应的依赖包： npm install bootstrap...jquery popper.js 然后在 src/main.js 中引入 Bootstrap 的脚本和样式文件： import Vue from 'vue' import App from '..../src/components 目录下新建一个单文件组件 ModalExample.vue，将 modal-example 组件代码按照 Vue Loader 指定的格式填充到对应位置： 已经不是什么难事。...我们将之前的 HelloWorld 组件调整为 ModalExample 组件，可以看到，这里只是按照 Vue Loader 单文件组件规范重新编排了代码，主体逻辑和之前混合在 HTML 文档中的组件注册并没有什么差别

    58130

    常用的CSS框架

    当然是不能面面俱到的… jquery-easyUI 其实这个已经是比较早的了，只是之前学过了一点，做过笔记才拿到这里来。毕竟可能以后还是会用到的?...这里写图片描述 easyUI就是一个在Jquery的基础上封装了一些组件….我们在编写页面的时候，就可以直接使用这些组件…非常方便…easyUI多用于在后台的页面上… 在学习easyUI之前，我已经学过了...，现在已经更新到了BootStrap4了，我在个人网站中也有用到它。...中文教程：http://w3schools.wang/bootstrap/bootstrap_tutorial.html 下面我就截取以慕课网的案例的代码了： 最近在学bootStrap，在慕课网中有这么一个例子...Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。

    3.9K80

    ABP入门系列（5）——展现层实现增删改查

    1，引入js文件 使用异步提交需要引入jquery.validate.unobtrusive.min.js和jquery.unobtrusive-ajax.min.js，其中jquery.unobtrusive-ajax.min.js...("~/Bundles/unobtrusive/js") 2，创建分部视图 其中用到了Bootstrap-Modal，Ajax.BeginForm，对此不了解的可以参考 Ajax.BeginForm()...知多少 Bootstrap-Modal的用法介绍 该Partial View绑定CreateTaskInput模型。...为了使用ASP.NET MVC强视图带给我们的好处（模型绑定、输入校验等等），我们需要创建一个ViewModel来进行模型绑定。...展现层主要用到了Asp.net mvc的强类型视图、Bootstrap-Modal、Ajax异步提交技术。 其中需要注意的是，在异步加载表单时，需要添加以下js代码，jquery方能进行前端验证。

    4.6K50

    【应用】在线文件管理

    + bootstrap写的一个在线文件管理系统， 这里是github地址， 后台作者已经给出了php和servlet的实现， 之所以使用Spring MVC重写后台，主要是为了熟悉一下Spring MVC...， 同时精简了该管理系统的一些功能，因为主要目的是在linux系统下为手机和电脑之间的文件传输提供一个中介，当然也可以在windows系统下使用，也可以将该应用作为一个局域网中的一个文件共享系统。...Jquery-upload-file 进行文件上传的插件有很多，比如bootstrap-fileinput 和 jQuery-File-Upload，不过这里使用的是jquery-upload-file...": "value"} onSuccess - 文件上传成功的回调函数 更多的选项和参数可以参考官方文档 Angularjs 集成 jquery-upload-file 我们使用jquery-upload-file...插件代替了系统中原来的上传界面，关于angularjs和jquery插件的整合可以参考Angularjs集成第三方js插件之Uploadify，下面说明如何讲angularjs和jquery-upload-file

    2.4K50
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券