bootstrap为水平排列的表单和内联表单设置可选的图标

2024-07-29 10:27:54

说明

为水平排列的表单和内联表单设置可选的图标.

示例

<!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">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
 <div class="container">
  <form class="form-horizontal">
  <div class="form-group has-success has-feedback">
  <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
  <div class="col-sm-9">
   <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputSuccess3Status" class="sr-only">(success)</span>
  </div>
 </div>
 <div class="form-group has-success has-feedback">
  <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
  <div class="col-sm-9">
   <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
   </div>
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
  </div>
 </div>
  </form>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </body>
</html>

输出

以上所述是小编给大家介绍的bootstrap为水平排列的表单和内联表单设置可选的图标，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Bootstrap实现水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局.这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了. 水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同.如需创建一个水平布局的表单,请按下面的几个步骤进行: 1.向父 <form> 元素添加 class .form-horizontal. 2.把标签和控件放在一个带有
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+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 创建表单.Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. Bootstrap表单类型分为三种格式:垂直或基本表单.内联表单.水平表单. 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 cla
全面解析Bootstrap表单使用方法（表单控件）

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con
全面解析Bootstrap表单使用方法（表单样式）

一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la
Bootstrap导航栏各元素操作方法(表单、按钮、文本)

本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单导航栏中的表单不是使用 Bootstrap 表单章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
bootstrap为水平排列的表单和内联表单设置可选的图标

说明为水平排列的表单和内联表单设置可选的图标. 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
Django模型层实现多表关系创建和多表操作

目录前言创建表关系多表数据操作 - 增删改一对多&一对一关系 - 增删改增加数据删除数据修改数据多对多关系 - 增删改增加多对多关系 - add() 删除多对多关系 - remove() 修改多对多关系 - set() 清空第三张表某个对象的绑定关系 - clear() 多表查询子查询正向查询反向查询联表查询正向查询反向查询聚合查询分组查询 F与Q查询 F查询 Q查询 django开启事务前言继续上面一篇文章的内容,本文介绍多表操作.使用django ORM
BootStrap 表单控件之单选按钮水平排列

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--单选按钮水平排列</title> <!-- 最新版本的 Bootstrap 核心
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst
BootStrap智能表单实战系列(四)表单布局介绍

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示第一.二列占3格
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 表单元素的配置(

bootstrap为水平排列的表单和内联表单设置可选的图标

相关推荐

随机推荐