详解Bootstrap创建表单的三种格式（一）

2024-10-01 19:55:33

在本章中，我们将学习如何使用 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创建表单的相关内容，希望大家喜欢。

实用又漂亮的BootstrapValidator表单验证插件

本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址二.资源引用下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"
全面解析Bootstrap表单使用方法（表单样式）

一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la
JS组件Form表单验证神器BootstrapValidator

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
全面解析Bootstrap表单使用方法（表单按钮）

一.多标签支持一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等. 同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名".btn". <button class="btn btn-default" type="button&
基于bootstrap插件实现autocomplete自动完成表单

基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(php), 原文有些没说清楚的地方,希望能帮助大家. 首先肯定还是加载bootstrap&jquery了,需要额外说明的是,后端返回的二维数组,和formatItem方法下面的调用保持一致即可; 另外,返回的数据要先parseJSON!切记. 相关参数说明: source:function(query,process){}.query表示当前文本输入框中的字符串,可在该方法中通过ajax向后台
基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
整理关于Bootstrap表单的慕课笔记

整理自慕课笔记基础表单表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制.主要将这些元素的margin.padding和border等进行了细化设置. 当
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val
Bootstrap每天必学之表单

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本基本案例单独的表单控件会被自动赋予一些全局样式.所有设置了.form-control的<input>.<textarea>和<select>元素都将被默认设置为width: 100%;.将label和前面提到的这些
Bootstrap实现登录校验表单(带验证码)

这个登陆窗口是双登陆窗口的,对IE8及早期版本不支持,可以根据自己的开发语言更换,我这个是asp的,其中的引用文件可以在网络上自行下载,如找不到可以留下邮箱~! 关键代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>scm登陆界面

详解Bootstrap创建表单的三种格式（一）

相关推荐

随机推荐