Bootstrap5笔记(二十八)——下拉菜单

下拉菜单可以是单选下拉菜单,也可以是多选的下拉菜单。

单选下拉菜单:

img
多选下拉菜单:

img

在 Bootstrap5 中下拉菜单 <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">

img

disabled 属性可以禁止下拉菜单被选择:

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

24

数据列表

Bootstrap 也可以通过 datalist 标签为 <input> 元素设置下拉菜单:

以下实例从列表中选择一个网站:

<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="Runoob">
  <option value="Taobao">
  <option value="Wiki">
  <option value="Zhihu">
</datalist>

241

知识共享许可协议
Bootstrap5笔记(二十八)——下拉菜单Wantz 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
上一篇
下一篇