这是一个很酷jQuery实现Bootstrap小工具,输入用户同意的字符数.它可以让你显示字符用户插入的最大长度. 1.引入jquery.js及bootstrap-maxlength.js 2.给页面的input或textarea加上maxlength属性 <input type="text" maxlength="10" id="name"> 3.配置选项 $(function(){ $('#name').maxlength({ a

Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2)分页 2.3)新增 2.4)修改 3.技术考虑: 3.1)考虑到页面的美观大气,在没有美工的情况下,Bootstrap的确是一个很好的选择 3.2)前端框架选择了MVVM的Knockout.JS,

导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"></script> 单独导入,可到github去下载 动画过渡(Transitions): transition.js 模态弹窗(Modal): modal.js 下拉菜单(Dropdown): dropdown.js 滚动侦测(Scrollspy): scrollspy.js 选项卡(Tab):

在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅能大幅减轻工作量,而且能让我们的代码更简明和优雅. 今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 a. 引入全部JS插件 我们在使

1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/ja

本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" /> <script type="text/javascri

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaSc

Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡. CSS 过渡 CSS 过渡是指在 CSS 属性发生改变时在一段时间内平滑地过渡,使用 CSS 伪类可以很方便地使用: a { color: #333; transition: color 1s linear; } a:hover { color: #36f; } 这里给链接设

原理是使用bootstrap的Modal插件实现. 一.在前端模板合适的地方,加入Modal展现div元素. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!-- system modal start --> <div id="ycf-alert" class="modal">     <div class="modal-dialog modal-sm">  

先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype = {} //构造器的原型 $.fn.typeahead = function ( option ){} //jQuery原型上自定义方法 $.fn.typeahead.defaults ={} //默认参数 $.fn.typeahead.Constructor = Typeahead //重写j

先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = {} // 构造器原型 $.fn.carousel = function ( option ) {} //jQuery原型上自定义的方法 $.fn.carousel.defaults ={} //默认参数 $.fn.carousel.Constructor = Carousel // 重写jQuery

先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype = {} //构造器的原型 $.fn.collapse = function ( option ){} //jQuery原型上自定义的方法 $.fn.collapse.defaults = {} // 默认参数 $.fn.collapse.Constructor = Collapse // 重写jQ

我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ( el ){} // 构造器 Alert.prototype ={} // 构造器的原型 $.fn.alert = function ( option ){} //jQuery原型上自定义的方法 $.fn.alert.Constructor = Alert // 重写jQuery原型方法popover的构造

先看bootstrap.button.js的结构 var Button = function ( element, options ){} //构造器 Button.prototype = {} //构造器的原型 $.fn.button = function ( option ){} //jQuery原型上的自定义方法 $.fn.button.defaults = {} //默认参数 $.fn.button.Constructor = Button //重写jQuery原型自定义方法的构造器名

先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} // 构造器的原型 $.fn.popover = function ( option ){} //jQuery原型上的自定义方法 $.fn.popover.Constructor = Popover //重写jQuery原型方法popover的构造器名 $.fn.popover.defaults

先看bootstrap.dropdown.js的结构 function ScrollSpy(){} //构造函数 ScrollSpy.prototype = {} //构造器的原型 $.fn.scrollspy = function ( option ){} //jQuery原型上的自定义方法 $.fn.scrollspy.Constructor = ScrollSpy // jQuery原型上的自定义方法 $.fn.scrollspy.defaults = {} //默认参数 $(functi

日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表中的内容,这样就是要给这三个列表加"点击事件"onclick <select id="nian" onclick="biantian()"></select>年 <select id="yue" on

Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡. CSS 过渡 CSS 过渡是指在 CSS 属性发生改变时在一段时间内平滑地过渡,使用 CSS 伪类可以很方便地使用: a { color: #333; transition: color 1s linear; }

bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="dropdown"]'//属性标记 Dropdown = function(){} //构造器 Dropdown.prototype = {} // 构造器的原型 function clearMenus() // 自定义方法 $.fn.dropdown = function ( option ){}//jQ

bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} //构造器 Modal.prototype = function(){} //构造器的原型 function ..(){} //自定义方法 $.fn.modal = function(){} //在jQuery对象上自定方法 $.fn.modal.defaults = {} //设置默认属性 $.fn.

最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要求,百度查找相关资料,看到masonry.js.个人认为这是一个非常好用的瀑布流插件.下面说一下我在引用的过程中遇到的问题,一开始我用bootstrap栅格系统布局,代码如下 <div class="row masonry"> <div class="col-x