Bootstrap select(选择列表)
当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项,则使用选择框
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(选择列表)的更多相关文章
- select 选择列表传值问题
<select> <option value ="volvo">Volvo</option> <option value ="s ...
- 【MySQL作业】SELECT 数据查询——美和易思select 选择列表应用习题
点击打开所使用到的数据库>>> 1.查询所有客户的地址和电话号码. SELECT address, phone FROM customer 2.查询所有商品的名称.种类和单价信息. ...
- 选择列表中的列无效,因为该列没有包含在聚合函数或 GROUP BY 子句中
选择列表中的列无效,因为该列没有包含在聚合函数或 GROUP BY 子句中 T-SQL核心语句形式: SELECT --指定要选择的列或行及其限定 [INTO ] --INTO子句 ...
- bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)
h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 首先引入bootstrap和bootstrap-select的c ...
- 当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式。
当没有用 EXISTS 引入子查询时,在选择列表中只能指定一个表达式.比如 select * from T_Employee where FNumber not in ( select top 5* ...
- 类似 select 选择框效果及美化
网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...
- Bootstrap-风格的下拉按框:Bootstrap Select
Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...
- 智能文件选择列表—— bat 批处理
智能文件选择列表 *.wim @echo off setlocal enabledelayedexpansion title 智能文件选择列表 pushd %~dp0 & cd /d %~dp ...
- 在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句
在选择列表中无效,因为该列既不包含在聚合函数中,也不包含在 GROUP BY 子句 突然看到这个问题,脑袋一蒙,不知道啥意思,后来想想,试图把select里的选项放到后面,问题自然解决! 下面这 ...
随机推荐
- hdoj1253
一题简直模板的 BFS,只是三维遍历而已. #include <stdio.h> #include <iostream> #include <sstream> #i ...
- [Xcode 实际操作]一、博主领进门-(8)应用代理文件(AppDelegate.swift)详解
目录:[Swift]Xcode实际操作 本文将演示使用iOS模拟器,演示程序的生命周期. 在项目导航区,打开应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面 ...
- 渗透测试之无文件渗透简单使用-windows
无文件渗透测试工作原理:无文件恶意程序最初是由卡巴斯基在2014年发现的,一直不算是什么主流的攻击方式,直到此次事件的发生.说起来无文件恶意程序并不会为了执行而将文件或文件夹复制到硬盘上,反而是将pa ...
- spark sql 优化心得
本篇文章主要记录最近在使用spark sql 时遇到的问题已经使用心得. 1 spark 2.0.1 中,启动thriftserver 或者是spark-sql时,如果希望spark-sql run ...
- linux命令行挂载NTFS文件系统的移动硬盘
环境 ubuntu 12.04 桌面版 由于我的ubuntu 是安装在vmware 上,如果接入移动硬盘后,它没有办法自动识别ntfs 格式的文件系统,导致mount 盘失败 从网上找到一个方法 首先 ...
- echarts散点图重叠
今天做echarts图标,使用了散点图.很快实现,发现数据不对,应该是3个的企业,页面只显示了2个,查了半天才发现原来是有两个重叠了.想办法解决了,在网上费劲九牛二虎只力终于找到了解决的方法,下面来解 ...
- Cordova 系列之创建一个iOS项目
1.打开终端 2.输入命令 $ cd Desktop (PS:Desktop表示放在桌面,你可以选择放任意位置) 3.$ cordova create HelloWorld com.example. ...
- JSP && Servlet | AXIS 0配置 入门
Axis2是目前比较流行的WebService引擎.WebService被应用在很多不同的场景.例如,可以使用WebService来发布服务端 Java类的方法,以便使用不同的客户端进行调用.这样可以 ...
- JS的this原理
转载阮一峰博客: www.ruanyifeng.com/blog/2018/06/javascript-this.html 一.问题的由来 学懂 JavaScript 语言,一个标志就是理解下面两 ...
- 洛谷P3177||bzoj4033 [HAOI2015]树上染色
洛谷P3177 bzoj4033 根本不会做... 上网查了题解,发现只要在状态定义的时候就考虑每一条边全局的贡献就好了? 考虑边的贡献和修改状态定义我都想到了,然而并不能想到要结合起来 ans[i] ...