详解Bootstrap创建表单的三种格式(一)

在本章中,我们将学习如何使用 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)

相关推荐

  • 全面解析Bootstrap表单使用方法(表单按钮)

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

  • 基于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每天必学之表单

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

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

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

  • 基于bootstrap插件实现autocomplete自动完成表单

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

  • 整理关于Bootstrap表单的慕课笔记

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

  • 全面解析Bootstrap表单使用方法(表单样式)

    一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la

  • 基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

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

  • Bootstrap实现登录校验表单(带验证码)

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

  • 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

随机推荐