详解Bootstrap创建表单的三种格式（一）
作者：mrr 发布时间：2024-05-10 14:08:19
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。
垂直或基本表单(display:block;)
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
<div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3">
<form role = "form">
<div class = "form-group">
<label for = "name">姓名</label>
<input type = "text" class = "form-control" id = "name"
placeholder = "请输入姓名"></input>
</div>
<div class = "form-group">
<label for = "tel">电话号码</label>
<input type="text" class="form-control" id = "tel"
placeholder = "请输入您的电话号码"></input>
</div>
<div class = "form-group">
<label for = "idCard">请上传身份证</label>
<input type = "file" id = "idCard"></input>
</div>
<div class = "form-group">
<label for = "profession">选择职业</label>
<select id = "profession" class = "form-control">
<option>软件工程师</option>
<option>测试工程师</option>
<option>硬件工程师</option>
<option>质量分析师</option>
</select>
</div>
<div class="form-group">
<button type = "submit" class="btn-info btn-lg">提交</button>
</div>
</form>
</div>
</body>
</html>
效果如下：
如果我们将select的form-control去掉，并给input type = "file"加上form-control，看看效果如何。
是不是能看出和上面效果的区别了呢？这样您大概明白form-control的作用了，它是设置外围的边框效果，包括宽、高、获取
焦点时form的样式。
内联表单（全部在同一行，display为inline-block）
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。
因为head部分的内容都是一样的，所以我们只列出body部分的内容。
<body style="padding: 20px;">
<form role = "form" class="form-inline">
<div class = "form-group">
<label for = "name">姓名</label>
<input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input>
</div>
<div class = "form-group">
<label for = "tel">电话号码</label>
<input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input>
</div>
<div class = "form-group">
<label for = "idCard">请上传身份证</label>
<input type = "file" id = "idCard"></input>
</div>
<div class = "form-group">
<label for = "profession">选择职业</label>
<select id = "profession" class = "form-control">
<option>软件工程师</option>
<option>测试工程师</option>
<option>硬件工程师</option>
<option>质量分析师</option>
</select>
</div>
<div class="form-group">
<button type = "submit" class="btn-info btn-lg">提交</button>
</div>
</form>
</body>
显示效果：
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100％ 宽度。在使用水平表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，可以隐藏内联表单的标签。
注：sr-only是展示给屏幕阅读器，而非是普通的读者看的。
其它元素在form的class为form-inline时，display为inLine-block;但是input tyoe = "file"却仍是display:block，可以看出其布局是有问题的，此时可以单独设置其display为inline-block;
水平表单(label和input等表单元素在同一行)
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：
1、向父 <form> 元素添加 class .form-horizontal。
2、把标签和控件放在一个带有 class .form-group 的 <div> 中。
3、向标签添加 class .control-label。
4、设置label和其兄弟div的宽度（因为input等默认宽度是100％）。
<body style="padding: 20px;">
<form role = "form" class="form-horizontal">
<div class = "form-group">
<label class="col-sm-2 control-label" for = "name">姓名</label>
<div class="col-sm-2">
<input type = "text" class = "form-control" id = "name"
placeholder = "请输入姓名"></input>
</div>
</div>
<div class = "form-group">
<label class="col-sm-2 control-label" for = "tel">电话号码</label>
<div class="col-sm-2">
<input type="text" class="form-control" id = "tel"
placeholder = "请输入您的电话号码"></input>
</div>
</div>
<div class = "form-group">
<label class="col-sm-2 control-label" for = "idCard">请上传身份证</label>
<div class="col-sm-2">
<input type = "file" id = "idCard" style="display:inline-block;"></input>
</div>
</div>
<div class = "form-group">
<label class="col-sm-2 control-label" for = "profession">选择职业</label>
<div class="col-sm-2">
<select id = "profession" class = "form-control">
<option>软件工程师</option>
<option>测试工程师</option>
<option>硬件工程师</option>
<option>质量分析师</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<button type = "submit" class="btn-info btn-lg">提交</button>
</div>
</div>
</form>
</body>
效果：
以上内容给大家介绍了Bootstrap创建表单的相关内容，希望大家喜欢。
0
投稿猜你喜欢
基于OpenCV2.4.8和 python 2.7实现简单的手势识别。以下为基本步骤 1.去除背景，提取手的轮廓2. RGB->YUV- 1.前言JavaWeb Struts2的 * 我们都能很熟悉，在请求交给Action处理之前，先在 * 中处理，处理完之后再交给Action
- Sqlserver数据库分页查询一直是Sqlserver的短板，闲来无事，想出几种方法，假设有表ARTICLE,字段ID、YEAR...(其
- 不了解的同学先“点这里”看看什么是Firebug。简单来说，Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DO
- （1）选择最有效率的表名顺序(只在基于规则的优化器中有效)：Oracle的解析器按照从右到左的顺序处理FROM子句中的表名，FROM子句中写
- 前言首先来看一段代码x_list = [i for i in range(30)]y_list = [i for i in range(10
- 如下所示：import re# 过滤不了\\ \ 中文（）还有————r1 = u'[a-zA-Z0-9'!"#$
- 不同于以往为大家介绍的函数使用，我们利用pivot函数可以实现的方式，就是用来重塑数据使用的，在python的使用上并不常见，但是如果需要利
- 之前说过要聊聊 干职业设计经理的活 的问题，貌似有些朋友对这个事情还挺关心的，我理解为一方面是掌握对付猎头时候的标准答案，一方面是
- 本文实例讲述了Python实现文件按照日期命名的方法。分享给大家供大家参考。具体实现方法如下：这里实现文件按照创建的时期批量重命名的功能#
- 本文实例讲述了Python正则表达式实现截取成对括号的方法。分享给大家供大家参考，具体如下：strs = '1(2(3(4(5(67
- Windows中升级MySQL应采取的步骤：1. 进行升级前你应先备份当前的MySQL安装。2. 下载最新Windows版MySQL。3.
- 条形图（bar chart），也称为柱状图，是一种以长方形的长度为变量的统计图表，长方形的长度与它所对应的变量数值呈一定比例。1. 竖放条形
- 本文实例为大家分享了js省市县 * 级联特效的实现代码，供大家参考，具体内容如下主要思想1.省改变，市改变，并初始化县2.市改变，县改变htm
- 题目：解法一：比较元素是否相等思路说明：这种应该是普通人最先想到的解法，先获取到数组之后进行有小到大排序，然后初始化一个min=0（代表新数
- 本文实例讲述了php+jQuery实现的 * 导航栏下拉菜单显示效果。分享给大家供大家参考，具体如下：首先看看效果图：1.数据配置文件 db.
- 一般来说，我们会将自己写的Python模块与python自带的模块分开存放以达到便于维护的目的。那么如何在Python中添加自定义的模块呢？
- Python中打开文本使用的是with语句，比如打开一个文件并读取每一行with open(filename) as fp: f
- 一、前言使用过Python的同学们一定被她的各种编码问题缠绕过，因为平常维护的新老项目跨越 2、3两个版本，编码问题有时更是让我苦不堪言，遂
- Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Djang
