下拉菜单、表单、输入组、巨幕、列表组

Posted on 9 月 28, 2026 by

一、下拉菜单（Dropdown）

通过 Bootstrap 下拉插件实现可切换的上下文叠加菜单。点击触发，而非悬停。

基本用法

单按钮下拉，包裹在 .dropdown 中：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else</a>
  </div>
</div>Code language: HTML, XML (xml)

也可以用在 <a> 标签上，添加 .dropdown-toggle 和 data-toggle="dropdown" 即可。

所有按钮变体都支持：

<div class="btn-group">
  <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Action</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>Code language: HTML, XML (xml)

拆分按钮下拉

主按钮 + 独立下拉箭头：

<div class="btn-group">
  <button class="btn btn-danger">Action</button>
  <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>Code language: HTML, XML (xml)

尺寸

在 .btn 上加 .btn-lg 或 .btn-sm，下拉菜单自动适配。

方向

类名方向
.dropup向上弹出
.dropright向右弹出
.dropleft向左弹出
<div class="btn-group dropup">
  <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropup</button>
  <div class="dropdown-menu">...</div>
</div>Code language: HTML, XML (xml)

菜单项

  • 可以用 <a> 或 <button> 作为菜单项
  • .active 标记当前激活项
  • .disabled 标记禁用项
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
</div>Code language: HTML, XML (xml)

对齐

添加 .dropdown-menu-right 实现右对齐：

<div class="dropdown-menu dropdown-menu-right">...</div>Code language: HTML, XML (xml)

分隔符

<div class="dropdown-divider"></div>Code language: HTML, XML (xml)

二、表单（Forms）

基本结构

每个表单控件包裹在 .form-group 中：

<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
    <small class="form-text text-muted">We'll never share your email.</small>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>Code language: HTML, XML (xml)

表单控件

类名用途
.form-control文本输入、select、textarea
.form-control-file文件输入
.form-control-lg / .form-control-sm大/小尺寸
.form-control-plaintext只读纯文本样式
.form-control-range范围滑块
<input class="form-control form-control-lg" placeholder="Large">
<input class="form-control" placeholder="Default">
<input class="form-control form-control-sm" placeholder="Small">Code language: HTML, XML (xml)

只读与禁用

<input class="form-control" readonly value="Readonly">
<input class="form-control" disabled value="Disabled">Code language: JavaScript (javascript)

复选框与单选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">Default checkbox</label>
</div>Code language: JavaScript (javascript)

水平排列：

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="opt" id="r1">
  <label class="form-check-label" for="r1">Option 1</label>
</div>Code language: JavaScript (javascript)

布局方式

表单组（垂直堆叠）：

<div class="form-group">
  <label>Label</label>
  <input class="form-control">
</div>Code language: JavaScript (javascript)

网格布局：

<div class="form-row">
  <div class="col">
    <input class="form-control" placeholder="First name">
  </div>
  <div class="col">
    <input class="form-control" placeholder="Last name">
  </div>
</div>Code language: JavaScript (javascript)

水平表单：

<form>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control">
    </div>
  </div>
</form>Code language: HTML, XML (xml)

col-form-label 用于垂直居中对齐。

帮助文本

<small id="help" class="form-text text-muted">Help text here.</small>Code language: HTML, XML (xml)

关联：aria-describedby="help" 加到 input 上。

禁用整个表单

<fieldset disabled>
  <div class="form-group">
    <input class="form-control" placeholder="Disabled">
  </div>
</fieldset>Code language: HTML, XML (xml)

表单验证

客户端自定义验证：

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label>First name</label>
      <input type="text" class="form-control" required>
      <div class="valid-feedback">Looks good!</div>
      <div class="invalid-feedback">Please provide a name.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>Code language: JavaScript (javascript)

JS 触发验证：

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  });
})();Code language: JavaScript (javascript)

服务器端验证：

使用 .is-valid 和 .is-invalid 类，不需要 was-validated 父级：

<input class="form-control is-invalid" required>
<div class="invalid-feedback">Error message</div>Code language: JavaScript (javascript)

三、自定义表单组件

开关（Switch）

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="switch1">
  <label class="custom-control-label" for="switch1">Toggle this switch</label>
</div>Code language: JavaScript (javascript)

自定义选择菜单

<select class="custom-select">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>Code language: HTML, XML (xml)

尺寸：.custom-select-lg / .custom-select-sm

自定义文件输入

<div class="custom-file">
  <input type="file" class="custom-file-input" id="file1">
  <label class="custom-file-label" for="file1">Choose file</label>
</div>Code language: JavaScript (javascript)

四、输入组（Input Group）

在输入框两侧添加文本、按钮或下拉菜单。

基本用法

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>Code language: JavaScript (javascript)

前后附加

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>Code language: JavaScript (javascript)

尺寸

在 .input-group 上加 .input-group-sm 或 .input-group-lg。

内嵌复选框/单选框

<div class="input-group-prepend">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
</div>Code language: JavaScript (javascript)

内嵌下拉按钮

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </div>
  <input type="text" class="form-control">
</div>Code language: JavaScript (javascript)

自定义选择/文件输入嵌入

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="select1">Options</label>
  </div>
  <select class="custom-select" id="select1">
    <option>Choose...</option>
  </select>
</div>Code language: HTML, XML (xml)

五、巨幕（Jumbotron）

用于展示关键营销信息的大面积内容块。

基本巨幕

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit.</p>
  <hr class="my-4">
  <p>Some more text.</p>
  <a class="btn btn-primary btn-lg" href="#">Learn more</a>
</div>Code language: JavaScript (javascript)

全宽流体巨幕

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">Occupies entire horizontal space.</p>
  </div>
</div>Code language: HTML, XML (xml)

六、列表组（List Group）

基本列表组

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>Code language: HTML, XML (xml)

激活与禁用

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item disabled" aria-disabled="true">Disabled item</li>
</ul>Code language: HTML, XML (xml)

链接和按钮

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Active link</a>
  <a href="#" class="list-group-item list-group-item-action">Regular link</a>
  <button class="list-group-item list-group-item-action" disabled>Disabled button</button>
</div>Code language: HTML, XML (xml)

无边框（Flush）

<ul class="list-group list-group-flush">
  <li class="list-group-item">No borders</li>
</ul>Code language: HTML, XML (xml)

水平排列

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
</ul>Code language: HTML, XML (xml)

响应式：.list-group-horizontal-sm / md / lg / xl

情境颜色

<li class="list-group-item list-group-item-primary">Primary</li>
<li class="list-group-item list-group-item-success">Success</li>
<li class="list-group-item list-group-item-danger">Danger</li>
<li class="list-group-item list-group-item-warning">Warning</li>
<li class="list-group-item list-group-item-info">Info</li>
<li class="list-group-item list-group-item-light">Light</li>
<li class="list-group-item list-group-item-dark">Dark</li>Code language: HTML, XML (xml)

结合卡片使用

<div class="card">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
  </ul>
</div>Code language: HTML, XML (xml)

Posted in Bootstrap4 教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注