95后带你学bootstrap——表单

最新推荐文章于 2024-04-22 10:35:30 发布

Prince先生

最新推荐文章于 2024-04-22 10:35:30 发布

阅读量532

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap html css

本文链接：https://blog.csdn.net/princeme1/article/details/110102012

版权

bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本次分享文字内容较多，大家可以挑重点的看

一、基础表单：

1、表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。form表单属性，类似与辅助工具，转换角色使用；
role="form"定义form表单元素为form功能角色使用；

Eg1:<div role=“button” ></div> ，把div元素转换为button按钮功能使用；
Eg2:<div role=“navigation” ></div>，把div元素转换为navigation导航功能使用；
Eg3:<div role=“checkbox” aria-checked=“checked”></div>，把div元素转换为checkbox复选框功能使用；
Eg4:<a role=“button” class=“btn btn-default” href="#" >链接</a>，把a链接元素转换为button按钮功能使用。

二、水平表单

Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。
在这里插入图片描述

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

在元素上使用类名“form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。

三、.垂直表单

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统(后面会有讲解)。
在<form>元素上使用类名“form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。
“sr-only”，标签没显示，这个样式将标签隐藏了。

四、内联表单

有时候我们需要将表单的控件都在一行内显示，类似这样的：
在这里插入图片描述

在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在< form>元素中添加类名“form-inline”即可。
内联表单实现原理非常简单，欲将表单控件在一行显示，就需要将表单控件设置成内联块元素（display:inline-block）。
内联表单：通过form-inline设置表单控件为内联块

五、表单控件

单行输入框，
常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过

input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])

的形式来定义样式的。
为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

六、下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple
有时候，为了布局的需要，将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑：
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>表单控件——下拉选择框select元素</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <div class="form-group">
    <select class="form-control"> 
      <option>踢足球</option> 
      <option>游泳</option> 
      <option>慢跑</option> 
      <option>跳舞</option> 
      <option>5</option> 
      </select>
  </div>
  <div class="form-group">
      <select multiple class="form-control"> 
        <option>踢足球</option> 
      <option>游泳</option> 
      <option>慢跑</option> 
      <option>跳舞</option> 
      <option>5</option> 
      </select>
  </div>

</form>   
</body>
</html>

文本域textarea

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

复选框checkbox和单选按钮radio

1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。
复选框和单选框的水平排列
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

七、表单控件大小

控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件

（一）表单控件状态（焦点状态）

焦点状态是通过伪类“:focus”来实现
但需要给控件添加类名“form-control”
file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样

（二）表单控件状态（禁用状态）

在相应的表单控件上添加属性“disabled”
在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。
如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
如果legend中有输入框的话，这个输入框是无法被禁用的。

（三）表单控件状态（验证状态）

在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：