95后带你学bootstrap——表单

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

一、基础表单:

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”在一起:

表单提示信息

使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部
<span class=“help-block”>请输入正确信息</span>
Bootstrap V2.x版本中还提供了一个行内提示信息,其使用了类名“help-inline

已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页