菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 5 选择


选择菜单


如果想允许用户从多个选项中进行选择,则使用选择菜单。

要在 Bootstrap 5 中设置选择菜单的样式,请向 <select> 元素添加 .form-select 类。

示例

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
自己动手试一试 »

选择菜单尺寸



使用 .form-select-lg.form-select-sm 类来更改选择菜单的尺寸。

示例

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">
自己动手试一试 »


禁用选择菜单

使用 disabled 属性来禁用选择菜单。

示例

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
自己动手试一试 »

数据列表

Bootstrap 也会为数据列表设置样式,这是一个为 <input> 元素预定义选项的列表。

示例

<label for="browser" class="form-label">从列表中选择您的浏览器:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持