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 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
理解jquery事件冒泡
Jan 03 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vue路由权限校验功能的实现代码
Jun 07 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调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python的faker库用法
2019/11/28 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
学校宣传标语
2014/06/18 职场文书
2014年国庆节寄语
2014/09/19 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
清洁工个人工作总结
2015/03/05 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Python基础之元编程知识总结
2021/05/23 Python
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技