bootstrap表单验证插件（使用bootstrapValidator验证时,提示信息一起出来了）

本文目录

• 使用bootstrapValidator验证时,提示信息一起出来了
• JAVA培训内容有哪些
• bootstrap框架里边的scrollspy怎么使用

使用bootstrapValidator验证时,提示信息一起出来了

BootstrapValidator是基于bootstrap3的jquery表单验证插件，是最适合bootstrap框架的表单验证插件，在工作中用到此框架就写下自己在使用中积累的一些心得当按钮的类型为submit时，使用bootstrapValidator的isValid()能够使验证表单正常则悄工作，但当button的type类型为button时，只调用bootstrapValidator的isValid()方法无法正常工作。这时候就需要使用bootstrapValidator的validate()方法进行激活。1、JSP中《span style="font-size:14px;"》《div id="addAdminDialog" class="modal fade" tabindex="-1"》 《div class="modal-dialog cy-modal-dialog-f"》 《div class="modal-content"》 《div class="modal-header"》 《button class="close" data-dismiss="modal"》《span》×《/span》《/button》 《h4 class="modal-title" id="myLargeModalLabel"闹扒》新增管理员《/h4》 《/div》 《div class="modal-body"》 《form id="addAdminForm" method="post" action="${ctx}/admin/operator/add.htm" class="form-horizontal"》 《液盯昌div class="form-group"》 《label class="form-label text-bold" for=""》登录名《/label》 《input class="form-control" placeholder="" type="text" name="loginName" id="addLoginName"/》 《/div》 《div class="form-group"》 《label class="form-label text-bold" for=""》用户名《/label》 《input class="form-control" placeholder="" type="text" name="userName" id="addUserName" /》 《/div》 《div class="form-group"》 《label class="form-label text-bold" for=""》密码《/label》 《input class="form-control" placeholder="" type="password" name="password" id="addPassword" /》 《/div》 《div class="form-group"》 《label class="form-label text-bold" for=""》角色《/label》 《div class="form-group"》 《div class="col-md-10 col-xs-10"》 《div class="checkbox cy-nopadding" id="addRoles"》 《c:forEach var="role" items="${roles}"》 《label name="addRoleLabel" class="form-checkbox form-icon form-text"》《input type="checkbox" id="addRole_${role.id}" name="roles" value="${role.id}"》 ${role.roleName}《/label》 《/c:forEach》 《/div》 《/div》 《/div》 《/div》 《/form》 《/div》 《!--Modal footer--》 《div class="modal-footer"》 《button class="btn btn-primary" onclick="addAdmin();"》确定《/button》 《button data-dismiss="modal" class="btn btn-default" type="button"》取消《/button》 《/div》 《/div》 《/div》 《/div》《/span》

JAVA培训内容有哪些

　　对于初学者来说，只要在学习过程中，掌握科学的学习方法，即使零基础的入行者也能充分掌握Java开发技术，那究竟如何才能学习Java呢?

第一阶段：企业入门级项目阶段，可掌握Java核心基础、面向对象、JavaSE API、MySQL数据库、JDBS、HTML+CSS、Servlet、JSP、JavaScript等，可以完成常见中小型互联网项目开发，达到初级Java开发工程师能力。

第二阶段企业框架级项目阶段是进阶阶段，增强Java基础、web基础、CSS/JavaScript进阶、Maven项目管理、Spring5、SpringMVC、Mybatis、SMM综合项目、学员项目等，完成本阶段学员可以胜任各行业企业级项亩宽目中高级工程师岗位。

第三阶段亿级大并发分布式项目阶段，掌握Linux、Docker、Vue、SpringBoot、项目整合Vue、分布式项目、Zookeepr、Dubbo、Springcloud、Redis、Elasticsearch、Quartz、RocketMQ、FastDFS、Mycat、CAS、分布式锁、分布式事务、微信开发、学生项目等，学员学完后可以胜任大型、超大型互联网项目开发高级工程师岗位。

初学Java虽然有一定的难度，但Java学习并不是不可逾越，磨掘只要你明确方瞎耐核向，找到有效的学习方法，坚持学习，一定能攻克Java难关，成为一名合格的Java开发工程师。

bootstrap框架里边的scrollspy怎么使用

1.框架1.1全局样式使用HTML5的doctype，scaffolding.less中定义全局样式，从2开始使用normalize.css，并使用reset.less进行简化1.2默认栅格系统940px宽12列栅格，使用row与span来控制偏移，于non-fluid可以直接嵌套，提供了配搜四种响应式方案1.3流动栅格系统基于百分比，将row改为row-fluid即可使用，内嵌注意宽度是按照父列的百分比进行计算的1.4自定义栅格于variables.css中改变变量，昌卖行默认列12，宽60px，间隔20px，要保证响应性还得修改responsive.less中内容1.5布局container为940px居中，container-fluid则为流体布局1.6 响应式设计responsive.less中提供了一组media query：智能手机《=480px；流式列，非固定宽度垂直平板《=767px；流式列，非固定宽度水平平板》=768px；42px 20px默认》=980px； ? ? ?60px ?20px大分辨率》=1200px；70px 30px要求添加meta标签，《meta name=”viewport” content=”width=device-width, initail-scale=1.0″》有诸如.visible-phone等支持类2.基础CSS2.1 排版整个排版单位基于variables.less中@baseFontSize与@baseLineHeight两个变量；强调：string加粗，em倾斜，abbr缩写【title属性存放显示信息，.initialism会减小缩略词字体】，address【使用br换行】引用：blockquote【cite属性存放来源URL，.pull-left或right决定内容居左右】，small用于引言作者【会在内容前加入破折号】列表：ul无序号有黑点，ul.unstyled无样式，ol有数字序号，dl描述，dl.dl-horizontal水平描述2.2代码code行级代码，pre块级【《》需要转义，.pre-scrollable可以设置350px最大高度】，应用.prettyprint和.linenums来美化代码【使用google prettify】2.3表格table thead【tr】 tbody【tr】tr【td或th】th【必须在thead之内】 caption；.table行之间有水平线分割【2.0开始为默认】 .table-borderd 【边角为圆角】.table-striped 奇偶分开【使用:nth-child ie7-8不支持】 .table-condensed 紧凑竖直方向padding减半 几个可以组合使用2.4表单四种表单：.form-vertical【2.0后默认，控件标签文字左对齐】.form-inline【左对齐，控件inline-block】 .form-search【文本框圆化】 .form-horizontal【左浮动，标签与控件居于同一行且文字右对齐】支持控件：文本输入框，单选，复选，下拉，多选，上传，文本域控件组：耐哗.control-group .control-label以及.controls【默认label应该与控件在同一行？】设计了各种控件状态【如focus，disabled，去除webkit的outline】，包含.error .warning .success验证样式扩张控件：.span*来指定输入框大小，使用.input-mini或small或medium或big来指定input和select控件大小，2.0开始对.checkbox或.radio应用.inline即可实现行级，用label.checkbox包含input即可罗列，前置或后置文本保证.add-on与input在同行, .help-inline与.help-block设置帮助文本2.5 按钮可以应用到a button及input标签上，.btn .btn-primary .btn-info等样式【ie9不兼容】，.btn-large small mini等尺寸，.disabled类或disabled属性可以禁用2.6 图标使用.icon-前缀设置，用《i》x显示图标，用.icon-white显示反白图标，图标定义在sprites.less中3.组件3.1按钮3.1.1按钮组建议一个组里只用一种元素《a》或《button》，使用.btn-group，组合.btn-toolbar包装.btn-group即可合成工具条组件3.1.2按钮下拉菜单下拉菜单也得嵌套在.btn-group中，使用dropdown-toggle与ul.dropdown-menu类，支持Bootstrap下拉插件，箭头使用.caret，.dropdown-menu最近父标签应用.dropup即可变为上弹菜单【会改变.caret箭头方向】3.2导航3.2.1默认项基类.nav，对齐使用.pull-left或.pull-right【依赖float】，标签页ul.nav-tabs，胶囊链接ul.nav-pills3.2.2叠放式导航指竖直叠放ul.nav-stacked3.2.3下拉项综合使用下拉按钮【js下拉项插件】，参考3.1.23.2.4导航列表《i》使用标签，.pider空表项显示为水平间隔，.active选中项，.nav-header列表头3.2.5 标签页切换导航用.tabbale的p嵌套.nav-tabs，存放容器为.tab-content，内容页使用.tab-pane，标签置底用.tabs-below，标签居左.tabs-left，居右.tabs-right3.2.6 导航条固定导航条div.navbar与.navbar-fixed-top【必须预留40px或更多padding】，导航项ul.nav，li.pider-vertical分隔条，项目名称a.brand，表单.navbar-form，对form.navbar-search中输入框使用.search-query得到搜索框，下拉菜单参考3.2.3，导航条文本使用《p》，响应式嵌套在.nav-collapse.collapse并对按钮都应有.btn-navbar【需要js切换插件】3.2.7面包屑导航ul.breadcrumb3.2.8页码div.pagination》ul，同样使用.active与.disabled，页码对齐使用.pagination-centered或.pagination-right，前后页ul.pager【居于左右端li.previous与li.next】3.3行内标签span.label默认样式，span.label.label-success成功等3.4 标号span.badge默认样式，span.badge.badge-success等3.5 排版主角单元div.hero-unit中嵌套，标题h1，可以嵌入small，3.6 缩略项ul.thumbnails》li.span*》a.thumbnail》img链接图像，div.thumbnail块状内容3.7通知基类div.alert【2.0开始替代.alert-message】，例子：div.alert》a.close+strong，加强.alert-block提供更大的padding而.alert-heading修饰标题，语义强化.alert-error或success或info3.8进度条基本div.progress》div.bar，条纹效果div.progress.progress-striped【动画效果加上.active，使用css3渐变动画，不支持ie】，语义加强.progress-info或success等3.9杂项消息墙div.well，关闭图标a.close4 jQuery插件4.1对话框【bootstrap-modal.js】$().modal({backdrop:true背景,keyboard:true支持ESC,show:true初始化显示}) ，触发设置data-toggle=”modal”然后data-target=”#foo”或href=“#foo”，对话框设置div.modal#foo即可：div.modal-header》a.close+div.modal-body+div.modal-footer【显示动画效果bootstrap-transition.js，对.modal应用.fade即可】，方法.modal(“toggle”)或.modal(“show”)或.modal(“hide”)，事件show,shown,hide,hidden4.2 下拉项【bootstrap-dropdown.js】样式应用导航栏与胶囊链接，方法$().dropdown()，设置data-toggle=”dropdown”【也可以使用data-target=”#foo”或href=“#foo”来关联下拉项与链接】4.3 滚动侦测【bootstrap-scrollspy.js】$(‘#navbar’).scrollspy()标记添加data-spy=”scroll”【导航链接必须有href=”#id”且对应有dom#id】，选项offset【默认为10】4.4 可切换的标签页【bootstrap-tab.js】方法$(‘#myTab’).tab(‘show’) 标签页需要设置data-target=’#id’或href=’#id’标记添加data-toggle=”tab”或data-toggle=”pill”，事件show与shown 【event.target指向激活标签，event.relatedTarget指向之前激活的标签】4.5 工具提示【bootstrap-tooltips.js】$(‘#example’).tooltip(options) 中选项animation:true，placement:’top’，selector，title，trigger:’hover’，delay:{show:num, hide:100}工具提示可以单独设置data-属性实现与js调用同样的功能，指定一个selector即可【设置rel=”tooltip”】方法：.tooltip(‘show’)?.tooltip(‘hide’)?.tooltip(‘toggle’)4.6 弹出提示【bootstrap-popover.js】$(‘#example’).popover(options)中选项animation:true，placement:’top’，selector，trigger:’hover’，title，content，delay同样可以单独设置data-属性，方法也相同4.7 通知消息【bootstrap-alert.js】$(“.alert”).alert()用在通知，对关闭按钮设置data-dismiss=”alert”即可定时关闭方法$(“.alert”).alert(‘close’)，事件close closed4.8 按钮【bootstrap-button.js】应用在btn与btn-group，设置data-toggle=”button”与data-toggle=”button-checkbox”与data-toggle=”button-radio”样式方法$().button(‘toggle’) 按下$().button(‘loading’) 载入文本data-loading-text属性中$().button(‘reset’)重置按钮状态4.9 折叠手风琴【bootstrap-collapse.js】$().collapse({toggle:false})，事件show，shown，hide，hidden设置data-toggle=“collapse”和data-target即可变为折叠式，data-target接收一个css选择器以选取元素添加，元素上需要添加.collapse，默认打开用.in4.10 轮播【bootstrap-carousel.js】$().carousel({interval:5000, pause:’hover’})标记用data-属性提供前后翻页，data-slide=”prev或next” 方法.carousel(‘cycle或pause或number或prev或next’) 事件slide，slid4.11 输入提醒【bootstrap-typeahead.js】$().typeahead({source:数据源, items:8列表显示个数, matcher:fn, sorter:fn, highlighter:fn})，设置data-provide=”typeahead”5. LESSmixins.less中保存所有混合，编译安装npm intall -g less uglify-js lessc ./lib/bootstrap.less 》 bootstrap.css压缩使用–compress，引用less.js 也可以重新编译.less文件并进行本地存储