Bootstrap 提供了下列类型的表单布局：

  • 垂直表单（默认）
  • 内联表单
  • 水平表单

吹着表单或基本表单

  • 向父 <form> 元素添加 role="form"。
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
  • 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

例子：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 内联表单</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

效果图：

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

<form class="form-inline" role="form">

   <div class="form-group">

      <label class="sr-only" for="name">名称</label>

      <input type="text" class="form-control" id="name"

         placeholder="请输入名称">

   </div>

   <div class="form-group">

      <label class="sr-only" for="inputfile">文件输入</label>

      <input type="file" id="inputfile">

   </div>

   <div class="checkbox">

      <label>

      <input type="checkbox"> 请打勾

      </label>

   </div>

   <button type="submit" class="btn btn-default">提交</button>

</form>
  • 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
  • 使用 class .sr-only，您可以隐藏内联表单的标签。

效果图：

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

  • 向父 <form> 元素添加 class .form-horizontal。
  • 把标签和控件放在一个带有 class .form-group 的 <div> 中。
  • 向标签添加 class .control-label。
<form class="form-horizontal" role="form">

   <div class="form-group">

      <label for="firstname" class="col-sm-2 control-label">名字</label>

      <div class="col-sm-10">

         <input type="text" class="form-control" id="firstname"

            placeholder="请输入名字">

      </div>

   </div>

   <div class="form-group">

      <label for="lastname" class="col-sm-2 control-label">姓</label>

      <div class="col-sm-10">

         <input type="text" class="form-control" id="lastname"

            placeholder="请输入姓">

      </div>

   </div>

   <div class="form-group">

      <div class="col-sm-offset-2 col-sm-10">

         <div class="checkbox">

            <label>

               <input type="checkbox"> 请记住我

            </label>

         </div>

      </div>

   </div>

   <div class="form-group">

      <div class="col-sm-offset-2 col-sm-10">

         <button type="submit" class="btn btn-default">登录</button>

      </div>

   </div>

</form>

效果图：

输入框（Input）

<form role="form">

  <div class="form-group">

    <label for="name">标签</label>

    <input type="text" class="form-control" placeholder="文本输入">

  </div>

 </form>

文本框（Textarea）

<form role="form">

  <div class="form-group">

    <label for="name">文本框</label>

    <textarea class="form-control" rows="3"></textarea>

  </div>

</form>

复选框（（Checkbox）和单选框（Radio）

<label for="name">默认的复选框和单选按钮的实例</label>

<div class="checkbox">

   <label><input type="checkbox" value="">选项 1</label>

</div>

<div class="checkbox">

   <label><input type="checkbox" value="">选项 2</label>

</div>

<div class="radio">

   <label>

      <input type="radio" name="optionsRadios" id="optionsRadios1"

         value="option1" checked> 选项 1

   </label>

</div>

<div class="radio">

   <label>

      <input type="radio" name="optionsRadios" id="optionsRadios2"

         value="option2">

         选项 2 - 选择它将会取消选择选项 1

   </label>

</div>

<label for="name">内联的复选框和单选按钮的实例</label>

<div>

   <label class="checkbox-inline">

      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1

   </label>

   <label class="checkbox-inline">

      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2

   </label>

   <label class="checkbox-inline">

      <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3

   </label>

   <label class="checkbox-inline">

      <input type="radio" name="optionsRadiosinline" id="optionsRadios3"

         value="option1" checked> 选项 1

   </label>

   <label class="checkbox-inline">

      <input type="radio" name="optionsRadiosinline" id="optionsRadios4"

         value="option2"> 选项 2

   </label>

</div>

选择框（Select）

  • 使用 multiple="multiple" 允许用户选择多个选项。
<form role="form">

   <div class="form-group">

      <label for="name">选择列表</label>

      <select class="form-control">

         <option>1</option>

         <option>2</option>

         <option>3</option>

         <option>4</option>

         <option>5</option>

      </select>

      <label for="name">可多选的选择列表</label>

      <select multiple class="form-control">

         <option>1</option>

         <option>2</option>

         <option>3</option>

         <option>4</option>

         <option>5</option>

      </select>

   </div>

</form>

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <p class="form-control-static">email@example.com</p>

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword" class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword"

         placeholder="请输入密码">

    </div>

  </div>

</form>

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">聚焦</label>
<div class="col-sm-9">
<input class="form-control" id="focusedInput" type="text"
value="该输入框获得焦点...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">
禁用
</label>
<div class="col-sm-9">
<input class="form-control" id="disabledInput" type="text"
placeholder="该输入框禁止输入..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">
禁用输入（Fieldset disabled）
</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control"
placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">
禁用选择菜单（Fieldset disabled）
</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">
输入成功
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">
输入警告
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">
输入错误
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>

表单控件大小

您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text"
placeholder=".input-lg">
</div>

<div class="form-group">
<input class="form-control" type="text" placeholder="默认输入">
</div>

<div class="form-group">
<input class="form-control input-sm" type="text"
placeholder=".input-sm">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">默认选择</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>

<div class="row">
<div class="col-lg-5">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>





 




												


											
【原创】bootstrap框架的学习 第八课 -[bootstrap表单]的更多相关文章
	

    
								
  1. 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
		
    Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...
    
		
    2. 
						
  2. 【原创】bootstrap框架的学习 第六课[bootstrap代码]
		
    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
    
		
    3. 
						
  3. Asp.net MVC4高级编程学习笔记-模型学习第五课MVC表单和HTML辅助方法20171101
		
    MVC表单和HTML辅助方法 一.表单的使用. 表单中的action与method特性.Action表示表单要提交往那里,因此这里就有一个URL.这个URL可以是相对或绝对地址.表单默认的method ...
    
		
    4. 
						
  4. 【原创】bootstrap框架的学习 第五课
		
    一.Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式. <!DOCTYPE html> <html> <head> <title&g ...
    
		
    5. 
						
  5. Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板
		
    原文:Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
    
		
    6. 
						
  6. go微服务框架kratos学习笔记八 (kratos的依赖注入)
		
    目录 go微服务框架kratos学习笔记八(kratos的依赖注入) 什么是依赖注入 google wire kratos中的wire Providers injector(注入器) Binding  ...
    
		
    7. 
						
  7. ng2 学习笔记（二）表单及表单验证
		
    在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...
    
		
    8. 
						
  8. Django学习笔记（五）—— 表单
		
    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...
    
		
    9. 
						
  9. Bootstrap历练实例：响应式导航(带有表单)
		
    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 2929: [Poi1999]洞穴攀行
			
    2929: [Poi1999]洞穴攀行 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 80  Solved: 41[Submit][Status][Di ...
    
			
    2. 
						
  2. [lua] 游戏客户端逻辑使用lua协程
			
    我们的游戏有这样一种情景:客户端中角色需要用到一些公会的数据,但服务器不会在玩家(创角后)一进入到游戏里就推送给玩家,而是需要客户端自己在需要的时候向服务器请求公会的数据,之前的实现就是在请求消息的时 ...
    
			
    3. 
						
  3. Linux系统常用命令总结
			
    1. 最关键的命令 manecho 2. 目录文件操作命令 ls: 查看目录下的文件信息或文件信息dir:pwd: 打印当前路径cd:改变路径mkdir:创建路径rmdir:删除路径cp:拷贝文件或目 ...
    
			
    4. 
						
  4. jump堡垒机配置使用
			
    一.用户管理 1)添加用户 点击用户管理 —> 查看用户 —> 添加用户 输入要添加的用户名,姓名,权限,Mail,并且发送邮件 —> 保存 查看添加的用户 查看用户邮件 邮件中包含 ...
    
			
    5. 
						
  5. PHP的简单易懂文件管理，可实现基本功能
			
    我们利用的是嵌入PHP代码和ajax结合的方式,首相想到的是利用遍历文件的方式找出分件下的目录和文件,并且找到它们的路径,使用 dirname取上级目录, basename从完整路径中取文件名,其中最 ...
    
			
    6. 
						
  6. java根据HashMap中的值将其元素排序
			
    思路:HashMap或Map本身没有排序功能,若要进行较轻松的排序,可利用ArrayList中的sort方法 例子: import java.util.ArrayList; import java.u ...
    
			
    7. 
						
  7. 用async 解放你的大脑
			
    在js中,代码嵌套和代码回调非常常见,不仅编写麻烦而且异常反人类.让我等码农很是头痛 function () {     function () {         function () {     ...
    
			
    8. 
						
  8. angular替代Jquery，常用方法支持
			
    1.angular.bind(self,fn.args);   切换作用域执行 2.angular.copy(source,[destination]);   拷贝和深度拷贝 3.angular.eq ...
    
			
    9. 
						
  9. Excel图表-创意雷达图-原创图表
			
    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%;  ...
    
			
    10. 
						
  10. 记录一次raid数据恢复及回迁成功的案例
			
    故障发生在两块盘组成的一个raid0上,其中的一块盘亮黄灯,被raid卡踢出后,raid崩溃,下面就把当时抢救数据的整个过程进行介绍. 由于硬盘是两块SAS 300G的硬盘,先把硬盘从机器中拔出来,然 ...
    
			
    11.