小白教程
所有教程
关于
Search
172.69.59.206
172.69.59.206
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Bootstrap5 下拉菜单”的源代码
本页内容
上一节:
Bootstrap5_表单
下一节:
Bootstrap5_复选框与单选框
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:Bootstrap5 下拉菜单}}[[Category:Bootstrap 5 教程|32]] = Bootstrap5 下拉菜单 = 下拉菜单可以是单选下拉菜单,也可以是多选的下拉菜单。 '''单选下拉菜单:''' '''多选下拉菜单:''' 在 Bootstrap5 中下拉菜单 '''<select>''' 元素可以使用 .form-select 类来渲染 : <sample title="" desc="" lang="html" hererun="1"> <select class="form-select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>在 Bootstrap5 中下拉菜单 select 元素可以使用 .form-select 类来渲染 :</p> <form action=""> <label for="sel1" class="form-label">单选下拉菜单:</label> <select class="form-select" id="sel1" name="sellist1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br> <label for="sel2" class="form-label">多选下拉菜单:</label> <select multiple class="form-select" id="sel2" name="sellist2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> 下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小: <sample title="" desc="" lang="html" hererun="1"> <select class="form-select form-select-lg"> <select class="form-select"> <select class="form-select form-select-sm"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>下拉菜单</h2> <p>下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小:</p> <form action=""> <label for="sel1" class="form-label">大号下拉菜单:</label> <select class="form-select form-select-lg" id="sel1" name="sellist1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <br> <label for="sel2" class="form-label">正常下拉菜单:</label> <select class="form-select" id="sel2" name="sellist2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <label for="sel3" class="form-label">小号下拉菜单:</label> <select class="form-select form-select-sm" id="sel3" name="sellist3"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> 效果如下图: disabled 属性可以禁止下拉菜单被选择: <sample title="" desc="" lang="html" hererun="1"> <select class="form-select" disabled> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>禁用下拉菜单</h2> <p>disabled 属性可以禁止下拉菜单被选择:</p> <form action=""> <label for="sel" class="form-label">禁用下拉菜单:</label> <select class="form-select" id="sel" name="sellist" disabled> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> == 数据列表 == Bootstrap 也可以通过 datalist 标签为 <input> 元素设置下拉菜单: 以下实例从列表中选择一个网站: <sample title="" desc="" lang="html" hererun="1"> <label for="browser" class="form-label">选择你喜欢的网站:</label> <input class="form-control" list="sites" name="site" id="site"> <datalist id="sites"> <option value="Google"> <option value="xiaoBai"> <option value="Taobao"> <option value="Wiki"> <option value="Zhihu"> </datalist> </sample> <run name=""> <!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>数据列表</h2> <form action="/action_page.php"> <label for="browser" class="form-label">选择你喜欢的网站:</label> <input class="form-control" list="sites" name="site" id="site"> <datalist id="sites"> <option value="Google"> <option value="xiaoBai"> <option value="Taobao"> <option value="Wiki"> <option value="Zhihu"> </datalist> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form> </div> </body> </html> </run> 效果如下图:
返回至“
Bootstrap5 下拉菜单
”。
上一节:
Bootstrap5_表单
下一节:
Bootstrap5_复选框与单选框