Bootstrap 学习笔记 之表单(4 day)

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式。

我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了。

今天学习的是表单,

Bootstrap 提供了下列类型的表单布局:

  • 垂直表单(默认)
  • 内联表单
  • 水平表单

需要一提的就是表单的状态:

表单控件状态

除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow

禁用的输入框 input

如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

按钮这里就不提了。

时间: 2024-08-02 02:48:36

Bootstrap 学习笔记 之表单(4 day)的相关文章

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

Bootstrap学习笔记(四)表单input

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"](其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. <form role="form"> <div class=&quo

[学习笔记]--Jfinal 表单提交附件

最近,项目里面用到了Jfinal 里面的上传附件.Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单参数一起提交.页面类似下图: 这里form表单里面使用了 enctype="multipart/form-data" .先看看Jfinal手册的说明吧!大家看了就知道了 然后还有个问题 如果是表单提交 还不可以用ajax 提交,具体的原因呢也找到了 http://www.oschina.net/question/9410

Symfony2学习笔记之表单

对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单:假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所以你需要创建一个表单.在你开始之前,首先来看通用的Task类,用来表示和存储一个单

Codeigniter入门学习笔记14—表单的验证

很久很久以前学习Codeigniter的笔记记录,很随意,但都是自己记录的,希望对需要的人有所帮助. 本文使用word2013编辑并发布 Postbird | There I am , in the world more exciting! Postbird personal website : http://www.ptbird.cn 表单验证 1.add_user ????] 2.form_check() ???? 3. ? 1.加载 ????$this->load->library('f

Bootstrap3学习笔记:表单

<!DOCTYPE html> <html> <head> <meta charst="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) --> <meta name="viewport&q

HTML学习笔记20——表单form (用户注册表)

表单:用户注册,在线报名……时,需要把用户的相关信息填写并提交,这时就需使用到表单来收集用户信息. 基本格式: [action 用于控制提交的地方(默认为自己的页面,也可在其值定义其他的网站名),method(默认是将信息的内容直接显示在提交的页面网址上)当设置method=”post“时就不会将信息内容全部显示到提交的页面网址上]action控制往哪里发,method控制发送方式: <form action=""    > <p>信息1</p> &

AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

JS学习笔记7_表单脚本

1.获取表单及表单元素引用的方式 var mForm = document.forms[formName];获取表单引用 mForm.elements[elemName]获取表单元素,如有同名的,则得到一组元素(例如radio button) 2.表单元素的常用属性.方法和事件 属性: name:字段名 value:字段值 type:字段类型,例如button, radio等等 readOnly:设置只读 disabled:设置禁用 方法: focus():获得焦点 blur():取消焦点 事件