首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
Bootstrap系列 -- 21. 表单提示信息
】的更多相关文章
Bootstrap系列 -- 21. 表单提示信息
平常在制作表单验证时,要提供不同的提示信息.在Bootstrap框架中也提供了这样的效果.使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部. <form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="input…
Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度.这两个类名是: 1. input-sm:让控件比正常大小更小 2. input-lg:让控件比正常大小更大 这两个类适用于表单中的input,textarea和select控件 <h1>案例1</h1> <form role="form"…
Bootstrap系列 -- 14. 表单控件输入框input
每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. <fo…
BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t…
BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-picker").datepicker({ format: 'yyyy-MM-dd', autoclose: true }).next("span.input-group-btn").bind("click", function () { $(this).prev(…
BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示 第一.二列占3格,第三列占6格子 自动布局代码如下所示(https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/for…
Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间…
bootstrap学习笔记(表单)
1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; co…
bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心…
bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错…
【SqlServer系列】表单查询
1 概述 如下几个问题,如果你能解决,请继续往下看,若不能解决,请先复习SQL基础知识,再来阅读本篇文章.本篇文章深度中等左右. Q1:表StudentScores如下,用一条SQL语句查询出每门课都大于80 分的学生姓名 Q2:表DEMO_DELTE如下,删除除了自动编号不同, 其他都相同的学生冗余信息 Q3:Team表如下,甲乙丙丁为四个球队,现在四个球对进行比赛,用一条sql 语句显示所有可能的比赛组合 Q4:请考虑如下SQL语句在Microsoft SQL Server 引擎中的逻辑…
BootStrap 智能表单系列 八 表单配置json详解
本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数量来自动使用不同的栅格, '1,2,2,4':使用指定的栅格来布局,如果配置的列数不足的情况将使用第一项(n,n 为一项) 2.hides的配置项 hides:[{id:'xxx',value:''}] 此项是可选的,主要用于编辑时存放一些不可见的列(如主键ID的值) 3.eles 表单元素的配置(…
Bootstrap_表单_表单提示信息
平常在制作表单验证时,要提供不同的提示信息.在Bootstrap框架中也提供了这样的效果.使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部. <form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="input…
Bootstrap学习-排版-表单
1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h1>主标题 <small>副标题</small> </h1> 3.Body样式 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px;…
04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包含电话号码的输入字段 2.url:用于应该包含 URL 地址的输入字段 - 提交表单时对 url 字段的值自动进行验证 <form action="/test.html" method="post"> url:<input type="url…
JS组件系列——Form表单验证神器: BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do…
Bootstrap学习(2)--表单
Bootstrap里的role属性,增强标签的语义化,提高识别力, 如:<form role="form"> input.select.textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素得到焦点之时…
黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do…
AngularJs 入门系列-2 表单验证
对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $scope 上下文对象上创建一个 model 来表示我们编辑的内容. $scope.model = { id : 8, name: "alice", email: "alice@open.com" }; angularjs 的验证需要表单的配合,为了能够访问表单,我们需要为表…
AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristine 字段是否 未更改 formName.inputField.$dirty 字段是否 更改 formName.inputField.$valid 字段 有效 formName.inputField.$invalid 字段 无效 formName.inputField.$error 字段 错误信息 问题…
bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table class="table"> 2. 响应式表格 <div class="table respoinsive"><talbe > 单独设立标题样式 标头样式 三.表单 第一种:常规样式(垂直) <form role="form&qu…
SpringMVC学习系列 之 表单标签
http://www.cnblogs.com/liukemng/p/3754211.html 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MVC表单表单标签的使用有一个大致的印象,然后再结合例子对各个标签介绍一下如何使用. 1.首先,在com.demo.web.models包中添加一个模型TagsModel内容如下: package com.de…
迈向angularjs2系列(7):表单
目录 一:校验表单的使用 1.搭建脚手架 2.校验表单的使用 3.select下拉列表的用法 一: 校验表单的使用 对于CRUD型的应用,表单是必备组件. 1.搭建脚手架 git clone https://github.com/mgechev/switching-to-angular2.git form1 npm install npm start app目录删掉所有内容后,新建form目录,form目录创建index.html和app.ts index.html是默认内容. <!DOCTY…
解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题
注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;"> <div class="form-group"> <la…
4.bootstrap的form表单的form-group和form-control的区别与联系
1. form-group一般用于div form-control一般用于置于div中的标签元素,为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如: <form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter…
Bootstrap内联表单
有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可. <form class="form-inline" role="form"> <div class="form-group"> <label class=&q…
Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do…
AnjularJS系列2 —— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控制多选 ng-readonly控制只读状态 以上指令的取值均为boolean类型,当值为true时相关状态生效,道理比较简单就不多做解释.注意: 上面的这些只是单向绑定,即只是从数据到模板,不能反作用于数据.要双向绑定,还是要使用 ng-model . 例如:点击[All]会改变All值,可全选,但…
HTML5学习系列之表单与文件
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或报刊中的文章.一篇论坛帖子.一段用户评论或独立的插件,或者其他任何独立的内容.例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head>…
如何写好CSS系列之表单(form)
表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一.表单布局的实现 表单布局分为:表单容器.行.表单元素组(包含元素标题.元素).并且实现根据屏幕进行自适应.示例效果如下: 从示例效果可以看出,布局会根据浏览器大小实现自适应.自适应代码如下: @import '../mixins/breakpoints'; .f-form-container{ @…