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

bootstrap入门【表单控件】

2015-02-28 18:31 369 查看

<link href="bootstrap.min.css" rel="stylesheet">  插入bootstrap的外部样式表

支持  输入框，文本域，多选按钮，单选按钮，下拉列表

name="optionsRadios"   其中，单选按钮必须指定name保证两个按钮是一组的。

class=" form-control"   意为给所有的控件加入css样式

multiple    下拉列表显示所有选项

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单所支持的控件</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>

<form role="form">
<p>输入框</p>
<input type="text" class="form-control">
<p>文本域</p>
<textarea class="form-control" rows="5"></textarea>
<p>多选按钮</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
吃橘子
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
吃苹果
</label>
</div>
<p>单选按钮</p>
<div class="radio">
<label>
<input  name="optionsRadios"   type="radio" checked>
男
</label>
</div>
<div class="radio">
<label>
<input  name="optionsRadios"   type="radio" checked>
女
</label>
</div>
<p>下拉列表</p>
<select multiple class=" form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航