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。

时间: 2024-12-21 12:44:47

Bootstrap学习(2)--表单的相关文章

BootStrap学习之表单

本文和大家分享的主要是BootStrap的表单相关内容,一起来看看吧,希望对大家学习BootStrap有所帮助. 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input> . <textarea> 和 <select>元素都将被默认设置宽度属性为 width: 100% ;. 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列. 基本实例: <div class='container

bootstrap基础学习【表单含按钮】(二)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

Knockout学习之表单绑定器(上)

表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然其他可见的dom元素也是一样可以的.下面我们就简单的举一个例子: 1 <div> 2 你已经点击了<span data-bind="text:numberOfClicks" ></span> 3 <button data-bind="cl

Knockout学习之表单绑定器(下)

“hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下面的例子将会演示如何使用通过代码设置焦点,并且当关联的标签获得焦点后显示一段文本: 1 <div> 2 <input type="text" data-bind="hasfocus: focusState" /> 3 <button typ

Django学习之表单(forms)

我们的博客现在已经实现了博客列表的查看,博客的查看.现在该是我们实现创建和更新博客的时候了. 要实现博客的创建和更新,我们需要学习Django表单的相关知识. 在处理表单的过程中,Django表单功能做了哪些工作呢? 传递数据的准备和重建 为数据创建HTML表单 从客户端接收和处理提交的表单和数据 Django Form类是系统的核心组件.在django中, 模型描述的是一个对象的逻辑架构,这绵行为,它显现给我们的方式.与此类似,Form类描述的是一个表单和决定它是如何工作和显示的. 一个模型类

Bootstrap&lt;基础六&gt; 表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间

Bootstrap基础学习(二)&mdash;表单

一.表单 1.基本格式 <!-- 基本格式 --> <form> <div class="form-group"> <label>姓名 </label> <input type="text" class="form-control" placeholder="请输入您的姓名"/> </div> <div class="form-

[html5] 学习笔记-表单新增的元素与属性(续)

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

[jQuery学习系列五 ]5-Jquery学习五-表单验证

前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开始到jQuery的表单验证.这里的表单验证都是最简单最基础的方式去完成,当然jQuery还有一些比较好的验证框架,这里就不提及了. 一,字段验证:1.1 字段非空 <form action="" method="post" id ="myform&quo