bootstrap为水平排列的表单和内联表单设置可选的图标
作者：mrr 时间：2024-05-05 09:16:06
说明
为水平排列的表单和内联表单设置可选的图标.
示例
<!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为水平排列的表单和内联表单设置可选的图标网站的支持！
来源：http://suyanzhu.blog.51cto.com/8050189/1897909
标签：bootstrap,水平表单,内联表单
0
投稿猜你喜欢
asp.net TreeView与XML三步生成列表树
2024-06-05 09:32:31
python实现批量命名照片
2021-11-03 18:07:42
laravel执行php artisan migrate报错的解决方法
2024-06-05 09:44:39
面试官问订单ID是如何生成的?难道不是MySQL自增主键
2024-01-24 00:36:24
Web设计师的出路问题
2009-06-08 13:07:00
浅谈Python实时检测CPU和GPU的功耗
2021-06-11 17:05:58
Javascript获取background属性中url的值
2024-04-10 13:59:10
详解Django+Uwsgi+Nginx 实现生产环境部署
2022-11-10 10:37:41
PyQt5+QtChart实现绘制区域图
2021-08-15 01:00:05
Python字符串转换成浮点数函数分享
2022-10-04 01:04:37
Python基础教程之异常详解
2022-02-08 05:48:49
python pycharm中使用opencv时没有代码自动补全提示的解决方案
2022-05-10 14:34:15
python实现员工管理系统
2022-01-03 05:20:15
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2024-04-16 09:24:09
ChatGPT如何写好Prompt编程示例详解
2022-06-30 03:55:24
Mysql开启慢SQL并分析原因
2024-01-24 12:03:30
详细介绍基于MySQL的搜索引擎MySQL-Fullltext
2024-01-27 16:30:30
MySQL日期时间函数知识汇总
2024-01-17 04:02:56
用Python编写一个每天都在系统下新建一个文件夹的脚本
2021-11-08 22:39:16
vue基础语法之插值表达式详解
2024-05-10 14:10:48
