BOOTSTRAP 表单 技术教程文章
Bootstrap如何创建表单【图】
Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加 role="form"。 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。<!doct...
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题【图】
为了让标签更加语义化，在表单项中，我们往往会使用label进行包裹 <label for="label-input"> <input type="text" class="" id="label-input"><br> <button>button</button> </label> 在移动平台页面的开发中，为了让表单项的可点区域变大而更好的操作，label可提供相应的便利。 但有时，我们只是需要label标签，却不希望可点区域无故增大。而Bootstrap的引入，自动增大了可点区域如上图所示，只是希望点击input项才产生效果，但点...
使用bootstrapValidator插件进行动态添加表单元素并校验【图】
一、前言 实际工作中，要实现表单元素的动态增加，并使用bootstrapValidator插件对动态添加的表单元素进行前台校验。在以前的工作中也使用过bootstrapValidator对表单元素进行校验，但涉及到的表单元素都是固定的，所以在页面载入时，对表单元素进行初始化就可以实现。虽然思路很明确，但由于对bootstrapValidator的用法不熟悉，在这个问题上还是浪费了很多时间，现在就把解决方法和功能效果图贴出来，希望对大家有所帮助。 思路：...
全面解析Bootstrap表单样式的使用【图】
本文主要给大家介绍了bootstrap表单样式的使用知识，非常不错，一起看看吧！ 表单 <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱：</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="examp...
BootStrap中的表单大全
表单基础表单对于表单中的input、textarea、select，一般我都会加上类”form-control”,它设置元素的默认宽度为100%（并不是绝对，比如下述的内联表单）。并且每个元素（包括label和待输入元素）都会加上”form-group”。它的样式只有一个。margin-bottom:15px。 <form action=""> <div class="form-group"> <label for="">用户名：</label> <input type="text" class="form-control"/> </div> <div class="form-group"> <lab...
妙用Bootstrap的 popover插件实现校验表单提示功能【图】
最近的项目，用Bootstrap比较多。浏览Bootstrap文档，发现 popover 插件特别适合做表单校验出错的提示。 因为使的非常频繁，最近把它封住下，做成 jQuery的插件。 通过 本插件，在 html标签中 定义好 data-vaild=”校验正则” data-errmsg=”错误信息即可”。为什么 要把 校验规则 写到 html 标签中呢？因为 我还用它做了 后台 的校验规则（后台没用Node，现在用的ASP，忙完专门再发文写下原理）。 <input class="form-control" id...
Bootstrap中表单控件状态(验证状态)【图】
在制作表单时，难免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。 1、.has-warning:警告状态（黄色） 2、.has-error：错误状态（红色） 3、.has-success：成功状态（绿色） 使用的时候只需要在form-group容器上对应添加状态类名。 <form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="fo...
第一次接触神奇的Bootstrap表单【图】
本篇将主要介绍Bootstrap表单的使用技巧。 1.Bootstrap基础表单 表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 我们先来看一个基础表单： <!DOCTYPE HTML> <html lang="en"> <head><meta charset="UTF-8"><title>基础表单</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body><form role="form"><div class=...
Bootstrap Validator 表单验证【图】
在线演示地址：http://www.shouce.ren/study/api/s/jq--BootstrapValidator--index.html 使用方法，代码如下所示： 1.<form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 2. <div class="form-group"> 3. <label class="col-lg-3 control-label">用户名</label> 4. <div class="col-lg-5"> 5. <input type="text" class="form-control" name="username" /> 6. </div> 7. </div> 8. 9. <d...
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)【图】
效果图如下所示：实现代码如下： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>导航条</title> <link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-...
Bootstrap表单布局【图】
Bootstrap 提供了下列类型的表单布局： ?垂直表单（默认） -> 这个不好看，都是手机版了，PC版占一排不好看； ?内联表单 -> 我相信这个才是你想要的，PC版响应横排，手机版响应竖排。 ?水平表单 -> 用栅格系统控制显示一、垂直表单垂直表单使用的标准步骤 1.<form> 元素添加 role="form"。 2.把标签和控件放在一个带有"form-group"的<div> 中，获取最佳间距。 3.向所有的文本元素 <input>、<textarea> 和 <select> 添加"form-contr...
Bootstrap表单布局样式源代码【图】
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单 创建垂直或基本表单： ?向父 <form> 元素添加 role="form"。 ?把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 ?向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control内联表单： 内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline水平表单:和其它两种表单...
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...
第七篇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 ...
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）【图】
本文给大家介绍如何判断表单验证的实例代码，在没给大家介绍正文之前，先给大家介绍下插件。 插件介绍先上一个图：下载地址：https://github.com/nghuuphuoc/bootstrapvalidator使用提示中文化：下载插件后，将\js\bootstrapValidator\language\zh_CN.js 引入文件，即实现中文化提交前验证表单： 更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码：<!DOCTYPE html> <html> <head> <title>BootstrapValidator ...
BootStrap智能表单实战系列(四)表单布局介绍【图】
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 表单的布局分为自动布局和自定义布局两种：自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格，通过设置autoLayout为true可以实现自动布局自动以布局就是根据autoLayout来决定使用的栅格，通过设置autoLayout:1,2,1,2,2,4 表示 第一、二列占3格，第三列占6格子自动布局...
BootStrap 智能表单实战系列(五) 表单依赖插件处理
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 Bootstrap 包的内容 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSS：Bootstrap 自带以下特性：...
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定【图】
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 Bootstrap 包的内容 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSS：Bootstrap 自带以下特性：...
BootStrap智能表单实战系列(八)表单配置json详解【图】
本章属于该系列的高级部分，将介绍表单中一些列的配置1、config列的配置：主要用于控制布局 ：config:{autoLayout:true|1,2,2,4}true:根据配置项最里层的数量来自动使用不同的栅格，1,2,2,4:使用指定的栅格来布局，如果配置的列数不足的情况将使用第一项(n,n 为一项)2、hides的配置项hides:[{id:xxx,value:}]此项是可选的，主要用于编辑时存放一些不可见的列(如主键ID的值)3、eles 表单元素的配置(重点)eles的配置支持2中情况，一种...
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介【图】
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 Bootstrap 包的内容 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSS：Bootstrap 自带以下特性：...