ylbtech-Bootstrap-CSS：表单

1、

Bootstrap 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单布局

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

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

垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

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

实例

<form role="form">

  <div class="form-group">

    <label for="name">名称</label>

    <input type="text" class="form-control" id="name" placeholder="请输入名称">

  </div>

  <div class="form-group">

    <label for="inputfile">文件输入</label>

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

    <p class="help-block">这里是块级帮助文本的实例。</p>

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox">请打勾

    </label>

  </div>

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

</form>

尝试一下 »

结果如下所示：

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <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>

尝试一下 »

结果如下所示：

支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

实例

<form role="form">

  <div class="form-group">

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

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

  </div>

 </form>

尝试一下 »

结果如下所示：

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

实例

<form role="form">

  <div class="form-group">

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

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

  </div>

</form>

尝试一下 »

结果如下所示：

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

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

下面的实例演示了这两种类型（默认和内联）：

实例

<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="radio-inline">

        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1

    </label>

    <label class="radio-inline">

        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2

    </label>

</div>

尝试一下 »

结果如下所示：

选择框（Select）

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
使用 multiple="multiple" 允许用户选择多个选项。

下面的实例演示了这两种类型（select 和 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-10">

      <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-10">

      <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-2">

      <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 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。下面的实例演示了这点：

实例

<form role="form">

  <span>帮助文本实例</span>

  <input class="form-control" type="text" placeholder="">

  <span class="help-block">一个较长的帮助文本块，超过一行，

  需要扩展到下一行。本实例中的帮助文本总共有两行。</span>

</form>

尝试一下 »

结果如下所示：

2、

1、

http://www.runoob.com/bootstrap/bootstrap-forms.html

2、

11.返回顶部

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

Bootstrap-CSS：表单的更多相关文章

bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...
Bootstrap CSS 表单
表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单水平表单垂直或基本表单基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...
bootstrap CSS表单、按钮和字体图标
基础表单 <form role="form"> <div class="form-group"> <l ...
Bootstrap之表单控件状态
Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态. 一.焦点状态:该状态告诉用户可输入或选择东西焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...
BootStrap 智能表单系列六表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
BootStrap 智能表单系列七验证的支持
但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性该插件也为您支持到 ...
BootStrap 智能表单系列四表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局自动以布局就是 ...
BootStrap 智能表单系列三分块表单配置的介绍
相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
BootStrap 智能表单系列二 BootStrap支持的类型简介
代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <! ...
bootstrap 基础表单内联表单横向表单
bootstrap 基础表单内联表单横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

随机推荐

【深入Java虚拟机】之三：类初始化
类初始化是类加载过程的最后一个阶段,到初始化阶段,才真正开始执行类中的Java程序代码.虚拟机规范严格规定了有且只有四种情况必须立即对类进行初始化: 遇到new.getstatic.putstatic ...
使用Reveal 调试iOS应用程序
Itty Bitty Apps发布了一款实用工具——Reveal,它能够在运行时调试和修改iOS应用程序.Reveal能连接到应用程序,并允许开发者编辑各种用户界面参数,这反过来会立即反应在程序的UI ...
Hijacking FM Radio with a Raspberry Pi & Wire
转载:https://null-byte.wonderhowto.com/how-to/hack-radio-frequencies-hijacking-fm-radio-with-raspberry ...
NBUT 1457 Sona （莫队算法）
题目大意: 求一段区间内出现的数字的次数的三次方的和思路分析: 这要水过去的题目真是难,各种优化. 不能用map , 要离散化之后先处理lowerbound. 优化输入. . . 时间卡的非常紧 ...
SolidEdge 如何绘制断裂剖视图局部剖视图
1 点击局部放大图,然后点击绘制按钮,然后点击选择要绘制的视图 2 绘制封闭的局部剖视图的剖面线(必须封闭,点击最后一个点封闭之后会变成蓝色虚线) 3 修改深度(不一定要在下图的右下角修改深度 ...
cocos2dx3.0 2048多功能版
1.2048项目描写叙述 1.1.2048功能描写叙述实现手机上2048的功能,同一时候具备能够删除随意一个方块的功能,悔棋功能,退出自己主动保存,启动自己主动载入功能. 1.2.2048所需技术 ...
CMS - tabBar
Tips:如果网页图片(文字)看不清,请按CTRL+鼠标滚轮 1.建议使用阿里图库或者 easyicon 2.建议使用81*81且低于40KB的图片(建议jpg) 3.如需查看脑图结构,请点击:ta ...
【整理】nand相关
记录nand相关知识.主要是mtd和ubi 什么是UBI 它是一种flash管理方式 flash是一系列连续的物理擦除块组成的. UBI卷是一系列连续的逻辑擦除块(eraseblock),每一块都能够 ...
POJ训练计划1035_Spell checker(串处理/暴力)
Spell checker Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 18418 Accepted: 6759 De ...
MongoDB与MySQL的插入性能测试【转】
1.1 MongoDB的简单介绍在当今的数据库市场上,MySQL无疑是占有一席之地的.作为一个开源的关系型数据库,MySQL被大量应用在各大网站后台中,承担着信息存储的重要作用.2009年,甲骨文 ...

Bootstrap-CSS：表单

Bootstrap 表单

表单布局

垂直或基本表单

实例

内联表单

实例

水平表单

实例

支持的表单控件

输入框（Input）

实例

文本框（Textarea）

实例

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

实例

选择框（Select）

实例

静态控件

实例

表单控件状态

输入框焦点

禁用的输入框 input

禁用的字段集 fieldset

验证状态

实例

表单控件大小

实例

表单帮助文本

实例

Bootstrap-CSS：表单的更多相关文章

随机推荐

热门专题