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


Posted in Javascript onFebruary 15, 2017

说明

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

示例

<!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为水平排列的表单和内联表单设置可选的图标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
js实现模糊匹配功能
Feb 15 #Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
微信小程序 基础知识css样式media标签
Feb 15 #Javascript
js 性能优化之快速响应的用户界面
Feb 15 #Javascript
You might like
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
List Installed Hot Fixes
2007/06/12 Javascript
JS array 数组详解
2009/03/22 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python实现简单温度转换的方法
2015/03/13 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
工商技校毕业生自荐信
2013/11/15 职场文书
陈欧的广告词
2014/03/18 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
开工典礼策划方案
2014/05/23 职场文书
信息管理专业自荐书
2014/06/05 职场文书
名人演讲稿范文
2014/09/16 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android