Bootstrap的的输入框下拉选择框和文本域
一 输入框
1 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件——输入框input</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
</body>
</html>2 效果
二 下拉选择框
1 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件——下拉选择框select元素</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</body>
</html>2 效果
三 文本框
1 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件——文本域textarea元素</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
</body>
</html>2 效果