经理让我帮服务器开发人员开发一个上传文件功能界面，我就想着以前使用过bootstrap-fileinput插件进行文件上传，很不错。赶紧就撸起来了。 1、下载压缩包。插件地址https://github.com/kartik-v/bootstrap-fileinput/ ，下载压缩包解压之后，拿出fileinput.min.js、fileinput.min.css、和中文需要引用的插件zh.js，因为这款插件默认的语言是英语。把这几个文件引入进页面 2、文件的引入顺序 引入bootstrap.min.css引入fileinput.mi...
最近想写个项目，由于之前一直写后端，很少接触前端，所以这次来好好学一下前端。看了下Yii框架，它自带了Bootstrap框架，最开始想的是怎么快速写个页面，哪知道这个就像剥洋葱一样，就剥到了学习构建工具的阶段。 说个很沮丧的消息，等我把gulp这套工具调通了后，发现Github上居然有很多这样的模板了！废了我3天时间来搞这个东西。给个关键词：bootstrap 4 gulp boilerplate。额，以及还有一个网站，这是我读完bootstrap的文档后发...
1. 可用于<a>, <button>, 或 <input> 元素的按钮样式按钮样式使用： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title><link rel="stylesheet" href="./css/bootstrap.min.css" rel="external nofollow" > <script type="text/javascript" src="./js/bootstrap.min.js"></script> </head> <body><button type="button" class="btn btn-prima...
aria-label 正常情况下，form表单的input组件都有对应的label.当input组件获取到焦点时，屏幕阅读器会读出相应的label里的文本。 <!DOCTYPE html> <html> <head><meta charset = "utf-8"><title>demo</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossor...
1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下： 有疑问的可以在下面留言，欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.c...
模态框避免点击背景处关闭： 1、div初始化时添加属性 aria-hidden=”true” data-backdrop=”static” <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden=true data-backdrop=static>2、在需要显示模态框，初始化时 $(‘#myModal).modal({ backdrop: ‘static, //点击背景空白处不被关闭； keyboard: false //触发键盘esc事件时不关闭。 }); 自定义模态框显示和关闭触...
写在前面： 在这次的项目中，没有再使用liger-ui做为前端框架了，改为了Bootstrap,这次也好接触下新的技术，在学习的过程中发现，Bootstrap的一些组件基本都是采用class的形式，就是给一个它定义好的样式，就会给你展现出一个好看的组件出来，这个比liger-ui的界面做的要好，但是了解了Boostrap的基本语法后，发现在官方的文档中，并没有一些可以动态加载组件的demo,因为之前用的liger-ui，大多数组件都只需要写一行代码，就能很好...
本实例所做功能为发送带附件邮件，可以上传多个附件，操作为选择一个附件以后自动上传，然后继续选择附件，填写完表单其他信息，点击保存发送带附件邮件。 HTML标签 <input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/>js初始化，设置全局文件名参数 var fileName = []; function initFileInput(id, url) {$("#" + id).fileinput({language: zh, uploadAsync:false,uploadUrl:url,browseClass: "...
起步 我就是喜欢用新的，况且 bs4 出来也很久了，用了一段时间后发现它并不支持远程静态框了，查了一下这部分已经被移除了。 所以，以前的 <a data-toggle="modal" href="remote.html" rel="external nofollow" data-target="#modal">Click me</a> 这种写法就没法用了，因此这部分要手动处理下。 处理 处理的方式其实也比较简单，改成手动 load 而已，按照 bs3 的效果是远程结果取代静态框中的 modal-content 部分: <button data...
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。 1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别 ngroute是用AngularJS框架的路由的核心部分。ui-router是一个社区库，它是用来提高完善ngroute路由功能的。实例：使用ng-router：首先引入js文件<script src="js/angular.js"></script><script src="js/angular-route.js"></script> 然后在html中 <h2>示例...
daterangepicker是bootstrap的一个日历插件 主要用来选择时间段的插件 这个插件很好用 也很容易操作 引入相关插件 <!-- 需要引用的依赖库 --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/...
本文实例为大家分享了bootstrap响应式工具的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>响应式工具</title><link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css" rel="external nofollow" ><script src="../JS/jquery-3.2.1.min.js"></script><script src="../JS/bootstrap.js"></script><style type="text/css">.tips1{width: 30px;height: 300px...
前言：本篇推出“jfinal与bootstrap的登出实战”，旨在介绍如果通过a标签弹出登出确认框，然后发送退出请求到jfinal，然后再刷新页面的做法。主要难点在于1.如果通过a标签的内容弹出登出确认框，2.如何通过a标签刷新对应弹出的页面。 前端技术 1.构建a标签代码如下:<a href="${ctx}/mem/logout" target="ajaxTodo" callback="ajaxDone" atitle="你确定要退出吗？" id="user_login_out" style="padding: 0 6px;">退出</a>注意： 1....
bootstrap-select是boot的下拉搜索插件，使用的时候有时我们需要动态从后台 或者 直接加载动态数据。 下面是根据一级下拉菜单，动态加载二级联动方式。（不是ajax后台获取）首先引入js与css文件（一个css两个js）<link rel="stylesheet" href="css/bootstrap-select.css" rel="external nofollow" > js省略 一、下拉搜索（html）<select class="selectpicker" data-live-search="true" id="d1"><option value="-1">请选择</option>...
刚刚看了bootstrap的导航栏，发现有点弄混了，现在来整理一下； 导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 一、简单的ul,li组成的导航： <ul class="nav nav-pills justify-content-center bg-...