首页 > 其他 > 详细

Bootstrap select(选择列表)

时间:2015-11-23 11:19:24      阅读:286      评论:0      收藏:0      [点我收藏+]

当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项,则使用选择框

1、使用<select>展示列表选项

2、使用multiple="multiple"允许用户选择多个选项

实例:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例:Select选择框</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<label>单选择列表</label>
<select class="form-control">
<optgroup label="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Pear</option>
<option>Grade</option>
<option>Leman</option>
<option>Magao</option>
</optgroup>
<optgroup label="cars">
<option>路虎</option>
<option>奔驰</option>
<option>宝马</option>
<option>大众</option>
<option>起亚</option>
<option>现代</option>
</optgroup>
</select>
<br />
<label>多选择列表</label>
<select class="form-control" multiple="multiple">
<optgroup label="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Pear</option>
<option>Grade</option>
<option>Leman</option>
<option>Magao</option>
</optgroup>
<optgroup label="cars">
<option>路虎</option>
<option>奔驰</option>
<option>宝马</option>
<option>大众</option>
<option>起亚</option>
<option>现代</option>
</optgroup>
</select>
</div>

</form>
</div>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap select(选择列表)

原文:http://www.cnblogs.com/melao2006/p/4987646.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!