您的位置：首页 > Web前端 > BootStrap

Bootstrap输入框组件简单实现代码

2017-03-06 10:25 696 查看

Bootstrap输入框组件的学习代码，供大家参考，具体内容如下

<html>
<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>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- span的位置决定前后 -->
<!-- input-group-addon\input-group\form-control缺一不可 -->
<div class="input-group">
<!-- 前面 -->
<span class="input-group-addon">@
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">@
</span>
</div>
<br/>
<!-- 大号 -->
<div class="input-group input-group-lg">
<span class="input-group-addon">@
</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">qq
</span>
</div>
<br/>
<!-- form表单 form-control的效果-->
<form action="" method="post" role="form">
<div class="form-group">
<label for="username">username:</label>
<input class="form-control" id="username" name="username" type="text"><br>
</div>
<div class="form-group">
<label>password:</label>
<input class="form-control" name="password" type="text"><br>
</div>
<input type="submit" value="submit"><input type="reset" value="reset">
</form>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

结果：

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Bootstrap 输入框组件

相关文章推荐

新的分享

章节导航