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>

  • 相关阅读:
    STM32启动BOOT0 BOOT1设置方法
    端口映射
    端口映射
    静态路由配置
    静态路由配置
    NETGEAR路由器登录不上 重新获取ip
    NETGEAR路由器登录不上 重新获取ip
    GSM AT指令 SIM900A TC35
    GSM AT指令 SIM900A TC35
    TTP223 触摸按键
  • 原文地址:https://www.cnblogs.com/melao2006/p/4987646.html
Copyright © 2011-2022 走看看