BOOTSTRAP 代码 技术教程文章
BootstrapValidator不触发校验的实现代码【图】
一、前言 BootstrapValidator是基于bootstrap3的jquery表单验证插件，是最适合bootstrap框架的表单验证插件，在工作中用到此框架就写下自己在使用中积累的一些心得 二、问题描述 当按钮的类型为submit时，使用bootstrapValidator的isValid()能够使验证表单正常工作，但当button的type类型为button时，只调用bootstrapValidator的isValid()方法无法正常工作。这时候就需要使用bootstrapValidator的validate()方法进行激活。 三、项目...
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
1.引入css与jsbootstrapValidator.min.cssbootstrapValidator.min.js 2.html中的modal代码 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" > <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title" id="...
BootStrap下拉菜单和滚动监听插件实现代码
废话不多说了，直接给大家贴代码了，具体代码如下所述： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>下拉菜单和滚动监听插件</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> </style> </head> <body data-spy="scroll" data-target="#nav"> <nav id="nav" clas...
Bootstrap中点击按钮后变灰并显示加载中实例代码
Bootstrap插件非常的好用了，我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了，具体的如下所示． 1.在按钮中加入data-loading-text，即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮后禁用按钮，并显示文字。如需绑定其他事件请自行更改。 第二三行为重要内容。 $(".btn-check").click(function ...
使用bootstrap validator的remote验证代码经验分享(推荐)【图】
这里需要说一下，bootstrapvalidator的帮助文档写的比较简单，对于remote验证器的说明更是如此，在经历多方测试之后才明白如何使用这个验证器。一个典型的ajax验证代码如下:服务端验证代码(使用spring mvc)如下:/* * 返回String类型的结果 * 检查用户名的合法性,如果用户已经存在，返回false，否则返回true(返回json数据，格式为{"valid",true}) */ @RequestMapping(value = "/checkNameExistsMethod1", produces = "application/j...
AngularJS bootstrap启动详解及实例代码
对于一般的使用者来说，AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中，这样就显得很不方便了。 绑定初始化通过绑定来进行angular的初始化，会把js代码侵入到html中，但是对于新手使用来说，还是足够了！ <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body ng-app="myApp...
AngularJs bootstrap详解及示例代码
AngularJs学习笔记系列第一篇，希望我可以坚持写下去。本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容，但也加入些许自己的理解与尝试结果。 一、总括 本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular，实现自动初始化。 <!doctype html><html xmlns:ng="http://angularjs.org" ng-app><body>...<scri...
Bootstrap和Angularjs配合自制弹框的实例代码
指令 directive(bsPopup, function ($parse) { return { require: ngModel, restrict: A, link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem).modal(hide); return; } if (newValue == 1) { $(elem).modal(show); return; } }); } } }); <button class="btn btn-xs btn-warning" data-target="#myModal" dat...
BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说，直接给大家贴代码了。 关键代码如下所示： <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script src="iscroll.js"></script> </head...
BootStrap Typeahead自动补全插件实例代码
关键代码如下所示： $(#Sale).typeahead({ ajax: { url: @Url.Action("../Contract/GetSale"), //timeout: 300, method: post, triggerLength: 1, loadingClass: null, preProcess: function (result) { return result; } }, display: "Value", val: "ID", items: 10, itemSelected: function (item, val, text) { $("#SalesID").val(val); } }); 这种 typeahead自动补全不是bootstrap常用的typeahead.js。 以下是typeahead.js代码...
AngularJS Bootstrap详细介绍及实例代码【图】
AngularJS BootstrapAngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。查看 Bootstrap教程。Bootstrap你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：<link rel="styles...
Bootstrap表单布局样式源代码【图】
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单 创建垂直或基本表单： ?向父 <form> 元素添加 role="form"。 ?把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 ?向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control内联表单： 内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline水平表单:和其它两种表单...
Bootstrap下拉菜单效果实例代码分享【图】
下拉菜单Dropdown不是表单中<select><option value=></option></select>那种啊，而是导航条中常见的那种。 Bootstrap官方网站对下拉菜单Dropdown的解释很少，即使是他们的英文官方网站。 对于如何更改下拉菜单的背景颜色、如果对下拉菜单默认的黑色超级链接进行修改，如何把下拉菜单更改成普通的超级链接而不是文字的样式，官方网站是完全没有具体的解释。 而且，官方网站的超级链接代码杂糅着许多没有用的参数。 笔者研究了很...
Bootstrap弹出带合法性检查的登录框实例代码【推荐】【图】
最近做了一个项目其中有项目需求涉及到访问控制，在访问需要登录才能使用的页面或功能时，会弹出登录框： 效果如下： 图 1-点击用户名时，如未登录弹出登录框 对这个功能的详细描述： 不涉及到登录时，登录框隐藏涉及到登录时，登录框弹出到页面左上角登陆成功后登录框隐藏 实现思路： 在body结束标签之前插入登录的div,设其定位方式为absolute，位置在左上角。 登录框默认的display属性为none。触发登录时，将该属性改为block 附...
第七篇Bootstrap表单布局实例代码详解(三种表单布局)【图】
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单。下面逐一给大家介绍，有兴趣的朋友一起学习吧。创建垂直或基本表单： ?向父 <form> 元素添加 role="form"。 ?把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 ?向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control<form role="form"> <div class="form-group"> <label for="name">名称</label> <input ...
BootStrap实现树形目录组件代码详解【图】
需求描述产品添加页面，需要选择车型。在bootStrap的modal上弹出子modal来使用。车型一共有4级目录。要使用目录树。然后分活动和商品两种，需要能够通过不通参数来调用该组件。车型品牌要使用字母导航。技术实现数据都是后端传json过来，我们ajax获取然后操作。由于车型总数据有几万条以上，不可能一次性请求过来。这里我们使用异步的方式，每点击一次目录节点，加载它的下一级。这里我们用两个参数来控制活动和商品的不同加载。_s...
bootstrap输入框组代码分享
Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 向输入域添加前缀和后缀的内容 <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="t...
BootStrap创建响应式导航条实例代码【图】
首先你得引入bootstrap与jquery推荐一个CDN:http://cdn.gbtags.com/index.html然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 ?导航条 ?按钮 ?表单 ?下拉菜单实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www.gbtags.com/a...
Bootstrap表单布局样式代码【图】
废话不多说了，直接给大家贴代码了。<form class="form-horizontal" role="form"> <fieldset> <legend>配置数据源</legend> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_host">主机名</label> <div class="col-sm-4"> <input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/> </div> <label class="col-sm-2 control-label" for="ds_name">数据库名</label> <div class...
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码【图】
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJs 就是一个函数库，算不上一个框架，源码2万2千多行，提供了前端MVC的开发方式，有双向绑定，指令等特性，这是具有革命性的。我是多么反感jQuery 用选择器 选择元素 ，绑定事件，进行一大堆DOM操作，一旦代码过多，非常不好维护，html结构改变，又要重写js代码,不过 jQu...