bootstrap表单示例代码分享
本文实例为大家分享了bootstrap表单的具体代码，供大家参考，具体内容如下
<!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, user-scalable=no">
<title>表单和图片</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" >
<link rel="stylesheet" href="css/main.css" rel="external nofollow" >
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form>
<label>用户名：</label>
<input type="text" placeholder="请输入用户名">
<label>密码：</label>
<input type="password" placeholder="请输入密码">
</form>
<form>
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</form>
<!--基本表单-->
<form>
<div class="form-group">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</form>
<!--内联表单-->
<form class="form-inline"><!--当屏幕小于768时，变为两行-->
<div class="form-group">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</form>
<!--加入input-group-addon-->
<form class="form-inline">
<div class="form-group">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="number" placeholder="请输入整数" class="form-control">
<div class="input-group-addon">元</div>
</div>
</form>
<!--水平表单-->
<form class="form-horizontal"><!--当屏幕小于768时，变为两行-->
<div class="form-group">
<div class="col-sm-2 control-label">
<label>用户名：</label>
</div>
<div class="col-sm-10">
<input type="text" placeholder="请输入用户名" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<label>密码：</label>
</div>
<div class="col-sm-10">
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</div>
</form>
<!--文本域-->
<form>
<textarea rows="3"></textarea>
</form>
<form>
<div class="form-group">
<label>文本域</label>
<textarea rows="3" class="form-control"></textarea>
</div>
</form>
<!--复选框-->
<form>
<input type="checkbox">体育
<input type="checkbox">音乐
<label>
<input type="checkbox">体育
</label>
<label>
<input type="checkbox">音乐
</label>
<!--基本复选框和复选框设置禁用-->
<div class="checkbox">
<label>
<input type="checkbox">体育
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">音乐
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled>爱好
</label>
</div>
<!--内联复选框--><!--复选框用法和单选框一样的-->
<label class="checkbox-inline">
<input type="checkbox">体育
</label>
<label class="checkbox-inline">
<input type="checkbox">音乐
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" disabled>爱好
</label>
</form>
<!--下拉框-->
<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
<!--校验状态-->
<form>
<div class="form-group has-success has-feedback">
<label class="control-label">用户名：</label>
<input type="text" placeholder="请输入用户名" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="请输入密码" class="form-control">
</div>
</form>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>
相关文章
Kita
2021-05-26
Fidelia
2021-03-30
Faith
2023-07-21
Chipo
2023-07-21
Jacinthe
2023-07-22
Winona
2023-07-22
Ophelia
2023-07-22
Agnes
2023-07-22
Aurora
2023-07-22
Glory
2023-07-22
Pelagia
2023-07-22
Ianthe
2023-07-22
Nafisa
2023-07-22
Nora
2023-07-28
Rhea
2023-08-08
Kara
2023-08-08
Oria
2023-08-08
Nissa
2023-08-08