zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    VS2010快捷键
    mvc 简单的分页扩展
    Asp.net(C#)给图片加上水印效果
    HTML特殊字符编码大全
    获取URL上的参数值
    json数据的时间格式转换如:/Date(2342561534)/
    js中文编码到C#后台解码
    获取浏览器滚动条高度
    使用js画图
    silverlight实时从Javascript获取json数据
  • 原文地址:https://www.cnblogs.com/melao2006/p/4987646.html
Copyright © 2011-2022 走看看