- 浏览: 1112753 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
效果图:
代码:
引用:
http://formvalidation.io/examples/bootstrap-select/
-
代码:
<!-- Include Bootstrap-select CSS, JS --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> <style type="text/css"> #bootstrapSelectForm .selectContainer .form-control-feedback { /* Adjust feedback icon position */ right: -15px; } </style> <form id="bootstrapSelectForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Favorite color</label> <div class="col-xs-5 selectContainer"> <select name="colors" class="form-control" multiple title="Choose 2-4 colors"> <option value="black">Black</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="orange">Orange</option> <option value="red">Red</option> <option value="yellow">Yellow</option> <option value="white">White</option> </select> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Language</label> <div class="col-xs-5 selectContainer"> <select name="language" class="form-control"> <option value=""></option> <option value="arabic">Arabic</option> <option value="english">English</option> <option value="french">French</option> <option value="german">German</option> <option value="other">Other</option> </select> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-3"> <button type="submit" class="btn btn-default">Validate</button> </div> </div> </form> <script> $(document).ready(function() { $('#bootstrapSelectForm') .find('[name="colors"]') .selectpicker() .change(function(e) { /* Revalidate the color when it is changed */ $('#bootstrapSelectForm').formValidation('revalidateField', 'colors'); }) .end() .find('[name="language"]') .selectpicker() .change(function(e) { /* Revalidate the language when it is changed */ $('#bootstrapSelectForm').formValidation('revalidateField', 'language'); }) .end() .formValidation({ framework: 'bootstrap', excluded: ':disabled', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { colors: { validators: { callback: { message: 'Please choose 2-4 colors you like most', callback: function(value, validator, $field) { /* Get the selected options */ var options = validator.getFieldElements('colors').val(); return (options != null && options.length >= 2 && options.length <= 4); } } } }, language: { validators: { notEmpty: { message: 'Please select your native language.' } } } } }); }); </script>
引用:
http://formvalidation.io/examples/bootstrap-select/
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 402flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 764效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 445css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8284Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1468效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2416在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1323HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1964效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1248Responsive Web Design(自响 ... -
css 之 linear-gradient 之 进度条(progress bar)
2017-05-25 18:14 2193CSS 的 linear-gradient() 函数会创建 ... -
在 css 中使用 @font-face
2017-05-24 14:15 558@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 655Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 931A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 684导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2913效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16775- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 1001在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2219原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4562效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3731如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
Select2 Bootstrap CSS 是一个简单的 CSS,它能使 select2 部件更加适应 Bootstrap。 标签:Select2
下面将详细介绍 Bootstrap Select 的使用方法、核心功能以及与 JavaScript(js)和 CSS 的关联。 1. **安装与引入** 要使用 Bootstrap Select,首先确保你已经在项目中引入了 Bootstrap 的 CSS 和 JS 文件,以及 ...
另一方面,`bootstrap-select.css` 和 `bootstrap-select.min.css` 是该插件的样式表文件,它们负责下拉选择框的视觉呈现。`bootstrap-select.css` 是原始的 CSS 文件,对于开发者来说,查看和修改这些样式更加方便...
1. `bootstrap-select.css`: 主要的 CSS 样式文件,定义了 Bootstrap Select 的视觉样式。 2. `bootstrap-select.min.css`: 压缩版的 CSS 文件,用于生产环境,减少页面加载时间。 3. `bootstrap-select.js`: 主要的...
要使用Bootstrap Select树形下拉框,首先确保已经引入了Bootstrap和Bootstrap Select的CSS和JavaScript文件。这些文件可以从Bootstrap官网或者CDN获取。同时,可能还需要引入一个专门处理树形结构的库,如jQuery ...
在实际使用中,开发者可以通过引入相应的 CSS 和 JavaScript 文件,以及必要的初始化代码,将 Bootstrap Select 集成到项目中。例如: ```html <link rel="stylesheet" href="path/to/bootstrap.min.css"> ...
<link rel="stylesheet" type="text/css" href="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.css"> ${basePath}/js/silviomoreto-bootstrap/bootstrap.min.css" rel="stylesheet"> ${basePath}/js/...
在实际应用中,为了使这两者完美结合,你需要在HTML中正确地引入BootstrapValidator和select2的CSS及JavaScript文件,然后在JavaScript代码中初始化并配置这两个插件。BootstrapValidator通常在表单元素上添加验证...
在实际开发中,你可以通过在HTML中引入Bootstrap Select的相关CSS和JS文件,然后使用特定的类名和属性来初始化和操作这个插件。例如: ```html <select class="selectpicker"> <option>Option 1 <option>Option 2...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <!-- jQuery (required for Bootstrap's JavaScript plugins) --> ...
Bootstrap Select是一款基于Bootstrap...<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <!-- jQuery (required for Bootstrap JS) --> ...
1. **引入库**:首先,你需要在HTML文件中引入Bootstrap、Select2 和 ZTree 相关的CSS和JS文件。确保正确放置这些文件,以保证正常加载。 2. **HTML结构**:创建一个基本的HTML结构,包含一个Bootstrap的`<select>`...
Bootstrap Select2插件是一款强大...通常,你需要在页面的`<head>`部分引入Bootstrap CSS和Select2 CSS,然后在`<body>`的底部引入jQuery(因为Select2依赖jQuery),接着是Bootstrap JS和Select2 JS。例如: ```html ...
在实际项目中,Bootstrap Select的灵活性和易用性使其成为开发人员的首选工具之一,尤其是在选项众多的场景下,它的搜索功能能极大地提高用户体验。通过深入理解这个插件的用法和配置,我们可以轻松地将其集成到各种...
Bootstrap Select是一款...<link rel="stylesheet" href="bootstrap-select-1.10.0/css/bootstrap-select.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> ...
在压缩包文件`bootstrap-select-1.12.4`中,你应该能够找到Bootstrap Select的完整源代码,包括CSS、JavaScript和示例。通过查看这些文件,你可以更深入地理解其工作原理,并根据需要自定义或扩展功能。同时,不要...
1. **基本使用**:首先,需要在项目中引入Bootstrap和Bootstrap Select的CSS及JS文件。然后,通过添加特定的类名(如`selectpicker`)到HTML的选择器元素上,就可以激活Bootstrap Select的功能。 2. **多选支持**:...
在这个场景中,我们关注的是"bootstrap-select.js"和"bootstrap-select.css",这两个文件是Bootstrap框架的一个扩展,专门用于增强其原生下拉菜单的功能。 Bootstrap Select是一个流行的插件,它将Bootstrap的下拉...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> ...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <select class="selectpicker"> 选项1 选项2 ... </select> ...