添加/移除边框

<span class="border"></span>        <!-- 四边 -->
<span class="border-top"></span>     <!-- 上 -->
<span class="border-right"></span>   <!-- 右 -->
<span class="border-bottom"></span>  <!-- 下 -->
<span class="border-left"></span>    <!-- 左 -->

移除边框：.border-0、.border-top-0、.border-right-0、.border-bottom-0、.border-left-0

边框颜色

基于主题色：

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

圆角（Border Radius）

<img class="rounded">        <!-- 默认圆角 -->
<img class="rounded-top">    <!-- 上圆角 -->
<img class="rounded-right">  <!-- 右圆角 -->
<img class="rounded-bottom"> <!-- 下圆角 -->
<img class="rounded-left">   <!-- 左圆角 -->
<img class="rounded-circle"> <!-- 圆形（裁剪成正圆） -->
<img class="rounded-pill">   <!-- 药丸形（大圆角） -->
<img class="rounded-0">      <!-- 无圆角 -->

尺寸：.rounded-sm（小）、.rounded-lg（大）

二、颜色（Color）

文本颜色

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50">.text-white-50</p>

链接自动带悬停变暗效果：

<a href="#" class="text-primary">Primary link</a>

背景颜色

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

注意：背景色类不设置 color，深色背景需配合 .text-white，浅色背景配合 .text-dark。

三、浮动（Float）

<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
<div class="float-none">Don't float</div>

响应式浮动（基于断点）：

注意：对 flex 子项无效。

四、溢出（Overflow）

<div class="overflow-auto">...</div>    <!-- 超出时显示滚动条 -->
<div class="overflow-hidden">...</div>  <!-- 超出时隐藏 -->

五、定位（Position）

基础类

<div class="position-static">...</div>    <!-- 默认，static -->
<div class="position-relative">...</div>  <!-- 相对定位 -->
<div class="position-absolute">...</div>  <!-- 绝对定位 -->
<div class="position-fixed">...</div>     <!-- 固定定位 -->
<div class="position-sticky">...</div>    <!-- 粘性定位（position: sticky） -->

固定位置

<div class="fixed-top">...</div>    <!-- 固定在视口顶部，左右撑满 -->
<div class="fixed-bottom">...</div> <!-- 固定在视口底部，左右撑满 -->

粘顶

<div class="sticky-top">...</div>

注意：position: sticky 在 IE11/10 中降级为 relative，需浏览器支持。

六、阴影（Box Shadow）

<div class="shadow-none p-3">No shadow</div>
<div class="shadow-sm p-3">Small shadow</div>
<div class="shadow p-3">Regular shadow</div>
<div class="shadow-lg p-3">Larger shadow</div>

七、尺寸（Width / Height）

宽度（相对于父容器）

<div class="w-25">25%</div>
<div class="w-50">50%</div>
<div class="w-75">75%</div>
<div class="w-100">100%</div>
<div class="w-auto">auto</div>

高度（相对于父容器）

<div class="h-25">25%</div>
<div class="h-50">50%</div>
<div class="h-75">75%</div>
<div class="h-100">100%</div>
<div class="h-auto">auto</div>

注意：高度类需要父容器有明确高度才生效。

八、文本工具类

对齐

<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>

响应式对齐：

换行

<div class="text-wrap" style="width: 6rem;">This text should wrap.</div>
<div class="text-nowrap" style="width: 8rem;">This text should overflow.</div>

文本转换

<p class="text-lowercase">LOWERCASED TEXT.</p>
<p class="text-uppercase">uppercased text.</p>
<p class="text-capitalize">capiTaliZed text.</p>

字体粗细与斜体

<p class="font-weight-bold">Bold</p>
<p class="font-weight-bolder">Bolder（相对父级）</p>
<p class="font-weight-normal">Normal</p>
<p class="font-weight-light">Light</p>
<p class="font-weight-lighter">Lighter（相对父级）</p>
<p class="font-italic">Italic text</p>

垂直对齐

仅影响 inline、inline-block、inline-table、table-cell 元素：

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

九、可见性（Visibility）

<div class="visible">...</div>    <!-- visibility: visible -->
<div class="invisible">...</div> <!-- visibility: hidden（仍占空间） -->

与 display: none 不同，.invisible 元素仍占据页面布局空间。

水平列表组

<ul class="list-group list-group-horizontal">
  <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>

响应式断点：.list-group-horizontal-sm / md / lg / xl。水平列表组不能与 list-group-flush 组合。

等宽：给每个 <li> 加 .flex-fill。

情境颜色

<li class="list-group-item list-group-item-primary">Primary</li>
<li class="list-group-item list-group-item-secondary">Secondary</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>

带徽章（未读计数）

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
</ul>

自定义内容（链接列表组）

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
</div>

二、媒体对象（Media Object）

用于构建评论、推文等重复组件。

基础

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero...
  </div>
</div>

嵌套

在 .media-body 内再放一个 .media：

<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Parent heading</h5>
    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Nested heading</h5>
        Nested content...
      </div>
    </div>
  </div>
</div>

对齐方式

<img src="..." class="align-self-start mr-3">   <!-- 顶部 -->
<img src="..." class="align-self-center mr-3"> <!-- 居中 -->
<img src="..." class="align-self-end mr-3">    <!-- 底部 -->

顺序反转

把文字放左边、图片放右边：

<div class="media">
  <div class="media-body">
    <h5 class="mt-0">Text on left</h5>
    Content here...
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

媒体列表

<ul class="list-unstyled">
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Content...
    </div>
  </li>
</ul>

三、模态（Modal）

基本结构

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body text goes here.
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

触发按钮：

<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch modal</button>

滚动长内容

模态自动独立于页面滚动。也可使用 .modal-dialog-scrollable 让仅 body 区域滚动：

<div class="modal-dialog modal-dialog-scrollable">...</div>

垂直居中

<div class="modal-dialog modal-dialog-centered">...</div>

模态内嵌工具提示/弹出框

工具提示和弹出框可放在模态内，关闭模态时自动关闭。

模态内使用网格

在 .modal-body 内嵌套 .container-fluid，然后使用标准网格类。

JavaScript 方法

四、导航（Nav）

基础导航

<ul class="nav">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1">Disabled</a></li>
</ul>

也可用 <nav> 标签直接包裹 <a>。

水平对齐

<ul class="nav justify-content-center">...</ul>  <!-- 居中 -->
<ul class="nav justify-content-end">...</ul>     <!-- 右对齐 -->

垂直堆叠

<ul class="nav flex-column">...</ul>

响应式：.flex-sm-column、.flex-md-column 等。

标签页（Tabs）

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

胶囊导航（Pills）

<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
</ul>

带下拉菜单的标签

<ul class="nav nav-tabs">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

切换内容（Tab Panes）

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel">Home content</div>
</div>

垂直标签

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" role="tablist">
      <a class="nav-link active" data-toggle="pill" href="#v-pills-home">Home</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="v-pills-home">Content</div>
    </div>
  </div>
</div>

五、导航栏（Navbar）

基本结构

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

品牌图片

<a class="navbar-brand" href="#">
  <img src="..." width="30" height="30" alt="">
</a>

配色方案

放置方式

六、分页（Pagination）

基本分页

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

尺寸

.pagination-lg / .pagination-sm

对齐

<ul class="pagination justify-content-center">...</ul>  <!-- 居中 -->
<ul class="pagination justify-content-end">...</ul>     <!-- 右对齐 -->

七、弹出框（Popover）

基本用法

<button class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="Content here">
  Click to toggle popover
</button>

初始化：$('[data-toggle="popover"]').popover()

四个方向

<button class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="Top">Top</button>
<button class="btn btn-secondary" data-toggle="popover" data-placement="right" data-content="Right">Right</button>
<button class="btn btn-secondary" data-toggle="popover" data-placement="bottom" data-content="Bottom">Bottom</button>
<button class="btn btn-secondary" data-toggle="popover" data-placement="left" data-content="Left">Left</button>

八、进度条（Progress）

基本进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

带标签

<div class="progress">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

高度

在 .progress 上设 height 即可。

背景色

.bg-success / .bg-info / .bg-warning / .bg-danger

堆叠

<div class="progress">
  <div class="progress-bar" style="width: 15%"></div>
  <div class="progress-bar bg-success" style="width: 30%"></div>
  <div class="progress-bar bg-info" style="width: 20%"></div>
</div>

条纹

添加 .progress-bar-striped：

<div class="progress-bar progress-bar-striped bg-success" style="width: 50%"></div>

九、微调器（Spinner）

边框微调器

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

颜色

.text-primary / .text-success / .text-danger 等。

增长微调器

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

十、Toast（轻量通知）

基本结构

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button class="ml-2 mb-1 close" data-dismiss="toast"><span>&times;</span></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

初始化

$('.toast').toast('show');

选项

注意事项

• 建议包裹在 aria-live 区域
• 重要消息用 role="alert" aria-live="assertive"
• 一般消息用 role="status" aria-live="polite"
• autohide: false 时必须提供关闭按钮

十一、工具提示（Tooltip）

基本用法

<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>

初始化：$('[data-toggle="tooltip"]').tooltip()

四个方向

data-placement="top" / "right" / "bottom" / "left"

注意事项

• 只应加在可聚焦的交互元素上
• 不要仅依赖 hover 触发
• disabled 元素需用包裹元素触发

通过 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>

也可以用在 <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>

拆分按钮下拉

主按钮 + 独立下拉箭头：

<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>

尺寸

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

方向

<div class="btn-group dropup">
  <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropup</button>
  <div class="dropdown-menu">...</div>
</div>

菜单项

• 可以用 <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>

对齐

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

<div class="dropdown-menu dropdown-menu-right">...</div>

分隔符

<div class="dropdown-divider"></div>

二、表单（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>

表单控件

<input class="form-control form-control-lg" placeholder="Large">
<input class="form-control" placeholder="Default">
<input class="form-control form-control-sm" placeholder="Small">

只读与禁用

<input class="form-control" readonly value="Readonly">
<input class="form-control" disabled value="Disabled">

复选框与单选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">Default checkbox</label>
</div>

水平排列：

<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>

布局方式

表单组（垂直堆叠）：

<div class="form-group">
  <label>Label</label>
  <input class="form-control">
</div>

网格布局：

<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>

水平表单：

<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>

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

帮助文本

<small id="help" class="form-text text-muted">Help text here.</small>

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

禁用整个表单

<fieldset disabled>
  <div class="form-group">
    <input class="form-control" placeholder="Disabled">
  </div>
</fieldset>

表单验证

客户端自定义验证：

<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>

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);
    });
  });
})();

服务器端验证：

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

<input class="form-control is-invalid" required>
<div class="invalid-feedback">Error message</div>

三、自定义表单组件

开关（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>

自定义选择菜单

<select class="custom-select">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

尺寸：.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>

四、输入组（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>

前后附加

<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>

尺寸

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

内嵌复选框/单选框

<div class="input-group-prepend">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
</div>

内嵌下拉按钮

<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>

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

<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>

五、巨幕（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>

全宽流体巨幕

<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>

六、列表组（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>

激活与禁用

<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>

链接和按钮

<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>

无边框（Flush）

<ul class="list-group list-group-flush">
  <li class="list-group-item">No borders</li>
</ul>

水平排列

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
</ul>

响应式：.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>

结合卡片使用

<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>

标题 <h1> 到 <h6> 和段落 <p> 在 Bootstrap 中被重置了默认样式：

• 所有标题的 margin-top 被移除
• 标题新增 margin-bottom: .5rem
• 段落新增 margin-bottom: 1rem

列表 <ul>、<ol>、<dl> 同样移除了 margin-top，设置了 margin-bottom: 1rem，嵌套列表没有 margin-bottom。

大多数 HTML 元素按原有方式使用即可，bootstrap.css 会自动为其附加样式。

警报（Alert）

用于向用户展示提示信息，支持 8 种上下文颜色。

基本用法

<div class="alert alert-primary" role="alert">A simple primary alert</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert</div>
<div class="alert alert-success" role="alert">A simple success alert</div>
<div class="alert alert-danger" role="alert">A simple danger alert</div>
<div class="alert alert-warning" role="alert">A simple warning alert</div>
<div class="alert alert-info" role="alert">A simple info alert</div>
<div class="alert alert-light" role="alert">A simple light alert</div>
<div class="alert alert-dark" role="alert">A simple dark alert</div>

8 种颜色对应不同语义：primary（主要）、secondary（次要）、success（成功）、danger（危险/错误）、warning（警告）、info（信息）、light（浅色）、dark（深色）。

带链接的警报

使用 .alert-link 让链接颜色与当前警报配色一致：

<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>.
</div>

包含其他内容

警报内部可以放标题、段落、分隔线等任意 HTML：

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities.</p>
</div>

可关闭的警报

添加 .alert-dismissible、.fade、.show，并放入关闭按钮：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> Check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

关闭后该元素会从 DOM 中移除。

JavaScript 控制

$('.alert').alert()              // 绑定关闭事件监听
$('.alert').alert('close')       // 关闭并移除
$('.alert').alert('dispose')     // 销毁

徽章（Badge）

小型计数或标签组件，大小随父元素字体变化。

基本用法

<h1>Example heading <span class="badge badge-secondary">New</span></h1>

作为按钮计数器

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

8 种情境颜色

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

药丸形状

添加 .badge-pill 获得更圆润的样式：

<span class="badge badge-pill badge-primary">Primary</span>

作为链接

<a href="#" class="badge badge-primary">Primary</a>

面包屑导航（Breadcrumb）

指示当前页面在导航层次结构中的位置：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

分隔符由 CSS 自动生成，不需要手动写。

按钮（Button）

预定义样式

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

适用元素

.btn 类可用于 <button>、<a>、<input>：

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">

轮廓按钮

使用 .btn-outline-* 替代实心背景：

<button type="button" class="btn btn-outline-primary">Primary</button>

尺寸

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>

块级按钮

添加 .btn-block 让按钮占满父容器宽度：

<button class="btn btn-primary btn-lg btn-block">Block level button</button>

活跃与禁用状态

<a href="#" class="btn btn-primary active">Active link</a>
<button class="btn btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">Disabled link</a>

切换状态

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

复选框和单选按钮样式

用 .btn-group-toggle + data-toggle="buttons" 将按钮组变为复选/单选组：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
</div>

按钮组（Button Group）

将多个按钮组合在一起：

<div class="btn-group" role="group">
  <button class="btn btn-secondary">Left</button>
  <button class="btn btn-secondary">Middle</button>
  <button class="btn btn-secondary">Right</button>
</div>

按钮工具栏

组合多个按钮组：

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group mr-2" role="group">
    <button class="btn btn-secondary">1</button>
    <button class="btn btn-secondary">2</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary">3</button>
  </div>
</div>

尺寸

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

嵌套下拉菜单

<div class="btn-group" role="group">
  <button class="btn btn-secondary">1</button>
  <button class="btn btn-secondary">2</button>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>

垂直排列

<div class="btn-group-vertical">...</div>

卡片（Card）

Bootstrap 4 中替代 Bootstrap 3 面板、well、缩略图的综合组件。

基础卡片

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

内容类型

卡片头部带导航

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
    </ul>
  </div>
  <div class="card-body">...</div>
</div>

图片处理

• 顶部图片：.card-img-top
• 底部图片：.card-img-top（放在 body 后）
• 图片叠加：.card-img-overlay 覆盖在图片上

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay title</h5>
    <p class="card-text">Overlay text.</p>
  </div>
</div>

水平卡片

<div class="row no-gutters">
  <div class="col-md-4">
    <img src="..." class="card-img">
  </div>
  <div class="col-md-8">
    <div class="card-body">...</div>
  </div>
</div>

背景色与边框

<div class="card text-white bg-primary">...</div>
<div class="card border-success">...</div>

卡片布局模式

轮播（Carousel）

幻灯片组件，用于循环播放图片或文本。

基础轮播

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

带指示器

<ol class="carousel-indicators">
  <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExample" data-slide-to="1"></li>
</ol>

带字幕

<div class="carousel-item">
  <img src="..." class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide label</h5>
    <p>Slide text.</p>
  </div>
</div>

淡入淡出效果

添加 .carousel-fade 到 .carousel 容器。

自动播放间隔

在 .carousel-item 上加 data-interval="毫秒数"。

折叠/手风琴（Collapse）

基本折叠

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">Toggle</a>
<div class="collapse" id="collapseExample">
  <div class="card card-body">Collapsed content</div>
</div>

多个目标

通过 class 选择器同时控制多个：

<button class="btn btn-primary" data-toggle="collapse" data-target=".multi-collapse">Toggle both</button>

手风琴

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
        Item #1
      </button>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
      <div class="card-body">Content 1</div>
    </div>
  </div>
</div>

data-parent 属性确保同一时间只展开一个面板。

容器是 Bootstrap 中最基本的布局元素，使用默认网格系统时必须用到。提供两种类型：

固定宽度容器（响应式，每个断点处 max-width 会变化）：

<div class="container">
  <!-- Content here -->
</div>

流体宽度容器（始终 100% 宽，横跨整个视口）：

<div class="container-fluid">
  ...
</div>

容器可以嵌套，但大多数布局不需要这么做。

断点体系

Bootstrap 的网格系统基于五个响应层级，对应不同的屏幕尺寸：

Sass 中的缩写写法：

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

sm、md、lg、xl 这四个单词在 Bootstrap 的网格、间距、显示隐藏、对齐等各个地方都会反复出现。

网格系统工作原理

Bootstrap 网格系统使用容器（container）→ 行（row）→ 列（col）三层结构，基于 flexbox 构建，完全响应式。

基础示例：

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上面这段代码在小屏及以上设备中创建三个等宽列，在父容器中居中。

自动布局列

等宽列

不指定具体数字，每个 col 自动均分宽度：

<div class="container">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>

无论屏幕多宽，col 都会均分可用空间。

强制换行（w-100）

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

w-100 设置 width: 100%，强制后面的列换到新行。

设置单列宽度，兄弟列自动调整

<div class="container">
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col-6">2 of 3 (wider)</div>
    <div class="col">3 of 3</div>
  </div>
</div>

中间列固定占 6 份，左右两列自动平分剩余空间。

可变宽度内容

使用 col-{breakpoint}-auto 让列根据内容自然宽度调整：

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">1 of 3</div>
    <div class="col-md-auto">Variable width content</div>
    <div class="col col-lg-2">3 of 3</div>
  </div>
</div>

响应式断点用法

所有断点统一（xs 到 xl 一致）

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

堆叠到水平（小屏堆叠，sm 及以上水平排列）

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>

在超小屏（< 576px）上两列各占 100% 垂直堆叠，sm 及以上并排。

混合断点组合

<div class="container">
  <!-- 手机上第一列全宽，第二列半宽；平板上分别 8 和 4 -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- 手机上半宽，平板以上三分之一宽 -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- 始终半宽 -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

间距调整（Gutter 定制）

通过 padding 和负 margin 工具类响应调整列间距：

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

对齐方式

垂直对齐

行级控制（影响所有列）：

<div class="row align-items-start">...</div>   <!-- 顶部对齐 -->
<div class="row align-items-center">...</div>  <!-- 垂直居中 -->
<div class="row align-items-end">...</div>     <!-- 底部对齐 -->

单列控制：

<div class="col align-self-start">...</div>    <!-- 顶部 -->
<div class="col align-self-center">...</div>   <!-- 居中 -->
<div class="col align-self-end">...</div>      <!-- 底部 -->

水平对齐

<div class="row justify-content-start">...</div>    <!-- 左对齐 -->
<div class="row justify-content-center">...</div>   <!-- 居中 -->
<div class="row justify-content-end">...</div>     <!-- 右对齐 -->
<div class="row justify-content-around">...</div>  <!-- 分散，首尾有间距 -->
<div class="row justify-content-between">...</div> <!-- 两端对齐，首尾贴边 -->

无间距（No Gutters）

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">...</div>
  <div class="col-6 col-md-4">...</div>
</div>

no-gutters 清除 row 的负 margin 和所有直接子 col 的左右 padding，实现列与列之间零间距。

列换行与列断裂

当一行中列的总份数超过 12，多余列自动换到新行：

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4（9+4=13 > 12，自动换行）</div>
  <div class="col-6">.col-6（继续在新行上）</div>
</div>

使用 w-100 在特定位置强制换行：

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="w-100"></div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

结合响应式显示工具在特定断点才换行：

<div class="w-100 d-none d-md-block"></div>

重新排序

使用 order 类控制视觉顺序：

<div class="row">
  <div class="col">First, but unordered</div>
  <div class="col order-12">Second, but last</div>
  <div class="col order-1">Third, but first</div>
</div>

order-first（order: -1）和 order-last（order: 13）：

<div class="row">
  <div class="col order-last">First, but last</div>
  <div class="col">Second, but unordered</div>
  <div class="col order-first">Third, but first</div>
</div>

偏移列

使用 offset 类将列向右推：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

使用 margin 工具类实现偏移（更灵活）：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>

ml-auto 将剩余空间推到左侧，实现右对齐效果。

嵌套

在已有列内部再放一组 row + col，实现嵌套布局：

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

嵌套行内的列总数同样最多 12 份，不需要用满。

Bootstrap 支持所有主流浏览器和平台的最新稳定版本。在 Windows 上支持 Internet Explorer 10-11 以及 Microsoft Edge。

具体版本要求：

说明：

• IE 10 和 IE 11 虽然支持，但部分 CSS 属性和 HTML5 元素在 IE 下表现不完整，Bootstrap 官方也注明某些特性在旧版 IE 中会有降级体验。
• IE 9 及以下的版本不在支持范围内。

移动设备

一般来说，Bootstrap 支持每个主流平台默认浏览器的最新版本。

明确不支持的浏览器：

• Opera Mini
• Opera Mobile 的 Turbo 模式
• UC Browser Mini
• Amazon Silk

这些代理浏览器会对页面内容进行服务端压缩和转码，导致 Bootstrap 的 CSS 和 JavaScript 无法正常工作，因此不在支持范围内。

下载并解压后，目录结构如下：

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

这是 Bootstrap 最基本的形式：预编译文件，几乎可以在任何 Web 项目中快速使用。提供编译版 CSS 和 JS（bootstrap.），以及编译并压缩后的 CSS 和 JS（bootstrap.min.）。

CSS 文件说明

Bootstrap 提供几种不同用途的 CSS 文件，按需选择：

说明：

• bootstrap.css / bootstrap.min.css：完整版，包含全部样式，日常开发直接用这个即可。
• bootstrap-grid.css：只包含网格系统和 flex 工具类，适合只需要布局、不需要组件样式的场景。
• bootstrap-reboot.css：只包含 Reboot（基于 normalize.css 的样式重置），适合在已有项目中统一浏览器默认样式。

JS 文件说明

说明：

• bootstrap.bundle.min.js：已内置 Popper.js，引用时不需要再单独引 Popper.js，但仍需单独引 jQuery。
• bootstrap.min.js：不含 Popper.js，需要手动引 jQuery + Popper.js。

实际项目中推荐直接用 bootstrap.bundle.min.js，少引一个文件。

Bootstrap 源代码

源代码下载包含预编译的 CSS 和 JS 资产，以及源 Sass、JavaScript 和文档。目录结构：

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └── docs/
│       └── 4.3/
│           └── examples/
├── js/
└── scss/

各目录说明：

• scss/：CSS 源码，基于 Sass 编写，可自定义变量后重新编译。
• js/：JavaScript 源码，插件按模块拆分。
• dist/：和预编译下载部分内容一致，已编译好的 CSS 和 JS。
• site/docs/：文档源码和官方示例。
• 其他文件：包配置、许可证、构建脚本等开发支持文件。

在 Visual Studio 的包管理器控制台执行：

Install-Package bootstrap -Version 4.3.1

安装完成后，文件会出现在：

wwwroot/lib/bootstrap/
├── css/
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

二、jQuery 和 Popper.js 的本地处理

Bootstrap 4 的 JS 组件依赖 jQuery 和 Popper.js，NuGet 里的 bootstrap 包不包含这两个文件，需要单独处理。

方式 A：NuGet 安装（推荐，纯内网可用）

Install-Package jQuery -Version 3.3.1
Install-Package Popper.js -Version 1.14.7

安装后路径通常是：

wwwroot/lib/jquery/dist/jquery.slim.min.js
wwwroot/lib/popper.js/dist/umd/popper.min.js

方式 B：手动下载放到 wwwroot/lib 下

如果 NuGet 版本不对，也可以手动把文件放到：

wwwroot/lib/jquery/jquery-3.3.1.slim.min.js
wwwroot/lib/popper/popper.min.js

三、在 ASP.NET Core MVC 视图中引用（本地路径）

布局页 _Layout.cshtml 示例

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>@ViewData["Title"] - 我的公众号后台</title>

    <!-- Bootstrap CSS（本地） -->
    <link rel="stylesheet"
          href="~/lib/bootstrap/css/bootstrap.min.css" />
</head>
<body>

    <div class="container">
        @RenderBody()
    </div>

    <!-- JS 引用顺序：jQuery → Popper.js → Bootstrap -->
    <script src="~/lib/jquery/dist/jquery.slim.min.js"></script>
    <script src="~/lib/popper.js/dist/umd/popper.min.js"></script>
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

四、最简启动页（对应你文档里的入门模板）

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css">
    <title>Hello, world!</title>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Hello, world!</h1>
        <button class="btn btn-primary">Bootstrap 按钮测试</button>
    </div>

    <script src="~/lib/jquery/dist/jquery.slim.min.js"></script>
    <script src="~/lib/popper.js/dist/umd/popper.min.js"></script>
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>