Bootstrap学习(2)--表单
Bootstrap里的role属性,增强标签的语义化,提高识别力, 如:<form role="form">
input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
水平表单:(标签居左,表单控件居右)
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统
在<form>元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。
内联表单:(多个表单控件在一行显示)
在<form>元素中添加类名“form-inline”即可。
如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中。
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
</div>
label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了。
文本域(textarea):
设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
Bootstrap学习(2)--表单的更多相关文章
- bootstrap学习笔记(表单)
1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0 ...
- Bootstrap学习-排版-表单
1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...
- bootstrap基础学习【表单含按钮】(二)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- Bootstrap基础学习(二)—表单
一.表单 1.基本格式 <!-- 基本格式 --> <form> <div class="form-group"> <label>姓 ...
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
随机推荐
- css控制段落
<p></p>标签:一段话或者段落适宜于用p标签: 段落缩进:text-indent:50px: 文字方向:text-align:center居中.left往左显示.right ...
- 最新版CKEditor在线编辑器的配置方法
下载地址: http://ckeditor.com/download 使用方法: 在页面<head>中引入ckeditor核心文件ckeditor.js <script type=& ...
- SVN File Name Case Sensitivity--SVN大小写问题
from:http://www.visualsvn.com/support/topic/00019/ Windows has a case-insensitive file system. Unix ...
- shortcuts on Windows and MacOS
我现在使用Window 10与MacOS,发现各千秋,也发现Window向MacOS学习并借鉴了一些东西. MacOS有一点非常好的地方是,它可以不怎么使用鼠标,而通过TouchPad便可完成.体验起 ...
- lua下的简单OO实现
笔者学习了当前(文末各文献)lua下的各种OO实现方法.略作笔记. 也提出了一些自己的想法.主要还是记录供将来着之参考. 1.概述 首先[2]PIL第二版中给出了OO的基于table的实现方式 ...
- FORTRAN 90标准函数(一) (转)
符号约定: l I代表整型;R代表实型;C代表复型;CH代表字符型;S代表字符串;L代表逻辑型;A代表数组;P代表指针;T代表派生类型;AT为任意类型. l s:P表示s类型为P类型(任意kind ...
- mac上启动Java项目失败
解决办法参考地址:http://bbs.csdn.net/topics/390813742,感谢csdn账号为iwordword的大神
- web前端基础知识jQuery-补
一.JS正则 1.定义正则表达式 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串: 1)构造函数 var reg=new RegExp('< ...
- arrayToJson将数组转化为json格式的js代码 ///////////////////////zzzzzzzzzzzzzzzz
//去除空格 function trim(str) { return str.replace(/\s|\xA0/g,""); } /** *js数组转json * */ fun ...
- (一)NOR FALSH 讲解
nor flash 起始地址: 1F FFFF = 1 1111 1111 1111 1111 1111 = 2^20 *2 = 2^21=2M Nor Flash 采用了 A0- ...