Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速，移动优先的网站和Web应用程序。
我是引导程序的初学者，我试图将一个容器移动到另一个容器的左侧，但它不起作用。 在这张照片中，我试图让里面有一个复选框的 div 移动......
我有以下引导代码，使用 w-100 显示图片以跨越页面的整个宽度。问题是我希望图像对用户可见并且足够小，这样他们就不会......
我想使用按钮 onclick 使用引导类创建元素选择。元素插入到正文中，但在页面上不可见。 我想使用按钮 onclick 使用引导类创建元素选择。元素插入到正文中，但在页面上不可见。 <html> <head> <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css" /> <script src="../jquery-3.7.1.min.js"></script> <script src="../popper.min.js" ></script><!--https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js--> <script src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script> <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js"></script> <script> function addElement(){ //normal document.body.innerHTML += '<select>'+ '<option>Mustard</option>'+ '<option>Ketchup</option>'+ '</select>'; //using boostrap class document.body.innerHTML+= '<select class="selectpicker" multiple data-live-search="true">'+ '<option>Mustard</option>'+ '<option>Ketchup</option>'+ '</select>'; } </script> </head> <body> <button type="button" id="addRowBottom" onclick='addElement()'>add row</button> </body> 如果直接放在 html 上，则所有样式都可见。 <html> <head> <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css" /> <script src="../jquery-3.7.1.min.js"></script> <script src="../popper.min.js" ></script><!--https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js--> <script src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script> <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js"></script> </head> <body> <select class="selectpicker" multiple data-live-search="true"> <option>Mustard</option> <option>Ketchup</option> </select> </body> 正如 @CBroe 所说，我们通过 javascript 进行初始化，以便在动态添加元素时在元素上应用引导类函数。 <html> <head> <link rel="stylesheet" href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css" /> <script src="../jquery-3.7.1.min.js"></script> <script src="../popper.min.js" ></script><!--https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js--> <script src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script> <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.min.js"></script> <script> function addElement(){ //normal document.body.innerHTML += '<select>'+ '<option>Mustard</option>'+ '<option>Ketchup</option>'+ '</select>'; //using boostrap class document.body.innerHTML+= '<select class="selectpicker" multiple data-live-search="true">'+ '<option>Mustard</option>'+ '<option>Ketchup</option>'+ '</select>'; $('.selectpicker').selectpicker(); } </script> </head> <body> <button type="button" id="addRowBottom" onclick='addElement()'>add row</button> </body> </html>
我正在使用 bootstrap 4。我正在尝试创建一个类似于 Google 的 Bard 的桌面聊天机器人。这将使用一个与屏幕高度相同的容器，文本输入位于屏幕的底部...
我正在使用基于 Bootstrap 4 和 5 构建的模板。已经有一个折线图，其中显示了硬编码值。 硬编码值： 我正在使用基于 Bootstrap 4 和 5 构建的模板。已经有一个折线图，并显示硬编码值。 硬编码值： <div class="sparkline" data-type="line" data-spot-Radius="0" data-offset="90" data-width="100%" data-height="50px" data-line-Width="1" data-line-Color="#604a7b" data-fill-Color="#a092b0">1,4,2,3,6,2</div> </div> 视觉上看起来像这样： 现在，我有一个 MySQL 数据库，我想检索数据并将其显示在折线图上。 我删除了硬编码值并添加了 MySQL 查询。请告诉我我做错了什么，因为检索到的数据没有显示。我的数据库连接正常。 <div class="sparkline" data-type="line" data-spot-Radius="0" data-offset="90" data-width="100%" data-height="50px" data-line-Width="1" data-line-Color="#604a7b" data-fill-Color="#a092b0"> <?php $sql2 = "SELECT water_level as water_level FROM `tbl_water_level` WHERE `date` > SUBDATE( NOW(), INTERVAL 2 HOUR)"; $result2 = mysqli_query($conn, $sql2); $data = ''; while($data=mysqli_fetch_array($result2)){ echo '.$row["water_level"].'; } ?> </div> 您的 PHP 代码中可能存在一个小错误。您应该使用 echo $data["water_level"];.，而不是 echo '.$row["water_level"].'; <div class="sparkline" data-type="line" data-spot-Radius="0" data-offset="90" data-width="100%" data-height="50px" data-line-Width="1" data-line-Color="#604a7b" data-fill-Color="#a092b0"> <?php $sql2 = "SELECT water_level as water_level FROM `tbl_water_level` WHERE `date` > SUBDATE( NOW(), INTERVAL 2 HOUR)"; $result2 = mysqli_query($conn, $sql2); while($data = mysqli_fetch_array($result2)){ echo $data["water_level"]; } ?> </div> 此外，请确保您的 MySQL 查询确实返回一些数据。您可能需要添加一些错误处理，以防查询失败或没有结果。 :)
我正在尝试将 Bootstrap 属性应用到我的 和 。我不确定我做错了什么。我在 stackoverflow 中搜索了这个问题，但所有建议都说 我正在尝试将 Bootstrap 属性应用到我的 <span> 和 <button>。我不确定我做错了什么。我在 stackoverflow 中搜索了这个问题，但所有建议都说将类更改为 className。我已经做到了这一点，但我仍然看不到我的风格发生变化。 index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; import Counter from './components/counter'; ReactDOM.render(<Counter/>, document.getElementById('root')); registerServiceWorker(); counter.jsx import React, { Component } from 'react'; class Counter extends Component { state = { count: 0 }; render() { return ( <div> <span className="badge badge-primary m-2"> {this.formatCount()} </span> <button className="btn btn-secondaty btn- sm">Increment</button> </div> ); } formatCount() { const { count } = this.state; return count === 0 ? 'Zero' : count; } } export default Counter; 任何对此问题的见解将不胜感激。 在 bootstrap v5 中，它已更改为 "bg-primary" 和 "bg-secondary" 等，所以请尝试 className="badge bg-primary m-2"。 假设您已经安装了 Bootstrap，然后将以下 import 语句添加到您的代码中： import 'bootstrap/dist/css/bootstrap.min.css'; 我遇到了类似的问题。不知怎的，我发现引导程序版本给我带来了麻烦！ 所以我卸载当前版本，然后安装特定版本。 npm remove bootstrap npm install [email protected] 然后在 App.js 文件中导入必要的引导脚本。 import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; 或 import "bootstrap/dist/css/bootstrap.min.css"; 请检查bootstrap的版本，徽章类有一些变化。 根据Bootstrap v5.0及以上版本，Badge类使用以下代码。 渲染（）{ 返回 （ {this.formatCount()} 增量 ); npm install react-bootstrap bootstrap 安装此依赖项，所有样式都可以工作 将类名替换为 className="badge bg-primary m-2", https://getbootstrap.com/docs/5.0/components/badge/
我需要将展开-折叠切换图标从 fa- 减号更改为 fa-插入符向上。 我需要将展开/折叠切换图标从 fa-minus 更改为 fa-caret-up。 <div class="content-wrapper"> <section class="content"> <div class="container-fluid"> <div class="row"> <section class="col-lg-5 connectedSortable"> <div class="card bg-gradient-primary"> <div class="card-header border-0"> <h3 class="card-title">Title</h3> <div class="card-tools"> <button type="button" class="btn btn-primary btn-sm" data-card-widget="collapse" title="Collapse"> <i class="fas fa-minus"></i> </button> </div> </div> <div class="card-body"> <div id="world-map" style="height: 250px; width: 100%;"></div> </div> </div> </div> </section> </div> </div> </section> </div> 我尝试过简单地将 fa-minus 更改为 fa-caret-up 但我不知道在哪里设置 fa-caret-down 来替换 fa-plus。 注意：此解决方案适用于 Bootstrap v4.x，因为更高版本有一个带图标的 Accordion 组件。 如何切换图标状态 当 Bootstrap data-toggle 用于打开和关闭 Collapse 组件 时，它会在按钮上设置 .collapsed 类。该类也可用于更改按钮图标的状态。 虽然可以在两个不同的图标之间切换，但在本例中不需要这样做。我们只需旋转单个插入符号图标即可向上或向下。我们可以使用 css 转换来做到这一点。通过添加过渡动画，我们可以使其看起来像 Bootstrap 的更高版本，即插入符号明显旋转 180 度。 提示： 将 .collapsed 类添加到 html 中的按钮，以确保按钮与 Collapse 同步启动。否则，第一次单击时图标不会更改状态。 演示片段 [data-toggle=collapse] :first-child { transition: transform 500ms linear; } [data-toggle=collapse].collapsed :first-child { transform: rotate(180deg); } <div class="content-wrapper"> <section class="content"> <div class="container-fluid"> <div class="row"> <section class="col-lg-5 connectedSortable"> <div class="card bg-gradient-primary"> <div class="card-header border-0"> <div class="card-title h4">Bootstrap Collapse Component</div> <div class="card-tools"> <!-- collapse button with Font-Awesome icon --> <button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseMap"> <i class="fas fa-caret-up"></i> </button> <!-- alternative button with html icon --> <button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseMap"> <div>^</div> </button> </div> </div> <div class="collapse" id="collapseMap"> <div class="card-body"> <figure id="world-map" class="figure"> <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Simple_world_map.svg" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption">A caption for the above image.</figcaption> </figure> </div> </div> </div> </section> </div> </div> </section> </div> <!-- Bootstrap 4.6 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
我在下面的示例中对 th 和 td 应用了位置粘性。但是，当类中存在粘性时，框阴影不起作用。 有人可以告诉我为什么吗？ 在下面的示例中，我已将位置粘性应用于 th 和 td。但是当类中存在粘性时，盒子阴影不起作用。 有人可以告诉我为什么吗？ <div class="overflow-x-auto lg:overflow-visible"> <div class=""> <table class="border-collapse table-fixed w-[1000px] lg:table-auto lg:w-full border border-grey-200"> <thead class="bg-grey-200"> <th class="sticky left-0 top-0 p-4 z-10 shadow-grey w-[116px] lg:w-[140px] bg-grey-200"></th> <th class="p-4 align-middle text-body-30-m text-left" v-for="(header, headerIndex) in data.headerColumns" :key="headerIndex"> {{ header }} </th> </thead> <tbody> <tr class="border border-b-grey-200" v-for="(row, rowIndex) in data.rows" :key="rowIndex"> <td class="border border-r-grey-200 align-top" :class=" cell.icon ? `grid p-4 justify-center border-0` : cell.image ? `text-center p-4 sticky left-0 shadow-grey bg-white z-10 w-[116px] lg:w-[140px] ` : cell.text ? `text-left p-4 pr-8` : `p-4` " v-for="(cell, cellIndex) in row.cells" :key="cellIndex"> <div v-if="!cell.text && !cell.icon && cell.image && cell.link" class="grid grid-flow-row gap-3"> <img :src="cell.image" :alt="cell.altText" /> <span>{{ cell.link }}</span> </div> <span v-if="!cell.image && !cell.link && !cell.text"><smyths-icons v-if="cell.icon" :name="cell.icon" size="24" color="#008540" ></smyths-icons ></span> <span v-if="!cell.image && !cell.link && !cell.icon">{{ cell.text }}</span> </td> </tr> </tbody> </table> </div> </div> 如果要为 Tailwind 库中的元素设置阴影，则必须在类中添加 shadow 关键字，如下所示：
我有一个列表，其中每行的左侧都有名称，右侧有一个复选标记，我希望能够只需单击整个元素即可切换复选框，而无需使用 jquery。 我有一个列表，其中每行的左侧都有名称，右侧有一个复选标记，我希望能够只需单击整个元素即可切换复选框，而无需使用 jquery。 <div class="list-checkbox list-group list-button mx-auto mt-2"> <button class="list-group-item d-flex justify-content-between align-items-center"> <span>Option 1</span> <label class="checkboxCustom my-auto"> <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </button> </div> 这是我的脚本 document.getElementbyClassName('div.list-checkbox button').click(function() { var $cb = $(this).find(":checkbox"); if (!$cb.getAttribute("checked")) { $cb.setAttribute("checked", true); } else { $cb.setAttribute("checked", false); } }); 看起来你正在使用 JQuery，所以我只是添加了一些小更改： $('div.list-checkbox').on('click',function() { var $cb = $(this).find("checkbox"); if (!$cb.attr("checked")) { $cb.attr("checked", true); } else { $cb.attr("checked", false); } }); 希望对您有帮助。 试试这个： <label><input type="checkbox">List value 1</label> <label><input type="checkbox">List value 2</label> <label><input type="checkbox">List value 3</label> 以下是执行此操作的步骤： 向 checkbox input 元素添加 id 属性，例如id="check1" 将所有应响应单击的标记放入标签元素中，并添加一个 for 属性，其中 id 值为上面的 1，例如for="check1" <div class="list-checkbox list-group list-button mx-auto mt-2"> <button class="list-group-item d-flex justify-content-between align-items-center"> <label for="check1"> <span>Option 1</span> <label class="checkboxCustom my-auto"> <input type="checkbox" checked="checked" id="check1"> <span class="checkmark"></span> </label> </label> </button> </div> div.acc { position: relative; } input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } h2 { font-size: 30px; font-weight: 400; color: #4a19ff; margin: 20px 0 0; } label { cursor: pointer; } label { position: relative; display: block; padding-left: 30px; font-family: "Spicy Rice", cursive; } label::before { content: ""; position: absolute; width: 0; height: 0; top: 50%; left: 10px; border-left: 8px solid black; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-top: -8px; } input[type="checkbox"]:checked ~ h2 label::before { border-left: 8px solid transparent; border-top: 8px solid black; border-right: 8px solid transparent; margin-left: -4px; margin-top: -4px; } p { max-height: 0; overflow: hidden; padding-left: 30px; transition: max-height 0.4s ease; font-family: "Habibi", serif; } input[type="checkbox"]:checked ~ h2 ~ p { max-height: 80px; } body { background: #fffefa; } <div class="acc"> <input type="checkbox" id="faq-1"> <h2><label for="faq-1">How much?</label></h2> <p>She said for $300 she'll do it.</p> </div> <div class="acc"> <input type="checkbox" id="faq-2"> <h2><label for="faq-2">How many cans must I stack up?</label></h2> <p>As many as you need to wash you out from my mind and out of my consciousness.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div>
.react-bootstrap 上的flex-grow-1 <Row> 未填充垂直空间
我正在努力在Bootstrap 4.6.0（使用react-bootstrap 1.5.2）中获取.flex-grow-1，以使布局上的组件扩展以填充剩余的可用垂直空间。 “引导”：...
我试图显示可调整大小的文本框的字符限制并将其与框的右下角对齐，就像链接（图像）中的图像一样。但是，我找不到一种方法来使其成为可能。我
如何在 Angular-Slickgrid 中获取列标题的工具提示？
列标题具有类“.slick-column-name” 我添加了这个 jquery - var text = $(".slick-column-name").text(); $(".slick-column-name").tooltip({ 标题: 文本 }); 乙...
在 pythonanywhere 中托管时未找到 Bootstrap CSS
我正在尝试制作一个包含一些数据库的管理面板。我使用flask-admin自动生成管理面板。当我在我的 PC 本地运行服务器时，引导样本正在加载...
我最近使用 Dreamweaver 构建了一个 Bootstrap 4.0 网站，其中包含多个轮播。我已经在代码中添加了 data-touch=”true” 属性，但是滑动手势在 mo...
我正在尝试创建引导导航栏，但切换按钮不起作用。我在 body 标签上使用了 .sidebar-collapse 类，因此当我单击 tog 时，数据应该出现在右侧...
我陷入了一个与JavaScript相关的问题，如何应用toast。 我需要帮助使用 JavaScript 应用点击 toast，但是只有当给定条件不成立时，toast 才会出现...
我在 HTML 页面的标签内添加了一个标签。我需要使用 Bootstrap 类设置图像宽度和高度。我怎样才能做到这一点？有人有想法吗？ 我在下面分享我的代码： 我在 HTML 页面的标签内添加了一个标签。我需要使用 Bootstrap 类设置图像宽度和高度。我怎样才能做到这一点？有人有想法吗？ 我在下面分享我的代码： <div class="col"> <div class="card border border-2 border-danger w-75 mt-3"> <img src="/Images/oppo-a31-2020-128-gb-black-6-gb-ram-.jpg" class="mx-auto d-block img-fluid" style="height:200px; width:200px;" alt="xxx"> <div class="card-body text-center"> <h5 class="card-title">Oppo A13</h5> <p class="card-text" >Our Price: To see product details, add this item to your cart. You can always remove it later.</p> <a href="#" class="btn btn-primary">Buy Now</a> </div> </div> </div> 如果你想OVERRIDE Bootstrap，你需要做你正在做的事情：将style="height:200px; width:200px;"添加到你的<img>元素。 否则，对于 Bootstrap 的“默认”图像样式，请查看此处： https://getbootstrap.com/docs/5.0/content/images/ 响应式图片 Bootstrap 中的图像通过 .img-fluid 进行响应。这 应用最大宽度：100%；和高度：自动；到图像，以便它 随父元素缩放。 图像缩略图 除了我们的边界半径实用程序之外，您还可以使用 .img-thumbnail 为图像提供圆形 1px 边框外观。 对齐图像 将图像与辅助浮动类或文本对齐类对齐。 块级图像可以使用 .mx-auto margin 实用程序居中 类。 Sass 变量 变量可用于图像缩略图。 $thumbnail-padding: .25rem; $thumbnail-bg: $body-bg; $thumbnail-border-width: $border-width; $thumbnail-border-color: $gray-300; $thumbnail-border-radius: $border-radius; $thumbnail-box-shadow: $box-shadow-sm;
我有以下html代码： 我有以下html代码： <div type="checkbox" id="myCheckbox" name="bootStrap1" class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate bootstrap-switch-on"> <div class="bootstrap-switch-container" style="width: 118px; margin-left: 0px;"> <span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 50px;">ON</span> <span class="bootstrap-switch-label" style="width: 30px;"> </span> <span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 50px;">OFF</span> </div> </div> 如何获取检查值。我尝试遵循但没有成功。很高兴获得一些帮助。 value = $('#myCheckbox').val(); value = document.getElementById('myCheckbox').checked; // Get the checkbox element const checkbox = document.getElementById('myCheckbox'); // Get the checked value const checked = checkbox.checked; if (checked) { // The checkbox is checked } else { // The checkbox is not checked }
如何在带有 dompdf 的 PDF 中使用 bootstrap？
我正在尝试生成一个包含数据库信息的报告，并且我可以使用 HTML 和 boostrap 正确显示它，但是当我尝试渲染我的 html 文件时，引导程序停止工作。 我正在尝试生成一个包含来自数据库的信息的报告，并且我可以使用 HTML 和 boostrap 正确显示它，但是当我尝试渲染我的 html 文件时，引导程序停止工作。 <?php //this is my html: ob_start(); ?> <!-- All my file goes here, including the <link></link> to the boostrap --> <?php $html = ob_get_clean() ?> 然后，在另一个文件（我用来创建 PDF）中我这样做了： <?php require_once 'route/to/dompdf/autoload.inc.php'; use Dompdf\Dompdf; $dompdf = new Dompdf(); include "firstFileWithHtml.php"; $options = $dompdf->getOptions(); $options->set(array('isRemoteEnabled' => true)); $dompdf->setOptions($options); $dompdf->loadHtml($html); $dompdf->setPaper("letter"); $dompdf->render(); $dompdf->stream("file_pdf", array("Attachment" =>false)); ?> 它会生成 PDF 预览，只是没有 boostrap。 我缺少一个选项吗？ 我尝试下载 bootstrap，尝试使用其他版本（4.3.1、5.0.2、5.3.0），我尝试使用 CDN，但没有任何效果。 我也尝试了这个答案中的解决方案，但是将CSS放在同一个文件中不起作用，并且方法set_base_path已被弃用。 我找到了解决方案，感谢@ceejayoz 的提示。 如果我这样放置 href： <link rel="stylesheet" href=""../user/bootstrap-5.0.2-dist/css/bootstrap.min.css"> 没成功。 但如果我用这个代替： <link rel="stylesheet" href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/PROJECT/user/bootstrap-5.0.2-dist/css/bootstrap.min.css"> 它就像一个魅力。 我能够使 bootstrap 5 工作。我正在做一个 Laravel 项目，需要 dompdf。 首先，获取Bootstrap 5缩小版的内容 $bootstrap5 = file_get_contents(public_path() . '/css/bootstrap.min.css'); 然后将“$bootstrap5”传递到$data变量中 $data = [ 'professions' => $professions, 'logo' => $imageLogo, 'css' => $bootstrap5, ]; 然后用$data加载PDF $pdf = Pdf::setPaper('letter', 'portrait')->setOptions(['dpi' => 100, 'defaultFont' => 'Nunito, sans-serif', 'isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true, 'isJavascriptEnabled' => true]) ->loadView('reports.staffing-report', $data); 在我的staffing-report.php中，我在内部添加了一个样式标签，并从$data中呼应了“css”： <style> {{ $css }} </style>
我想创建两个带有引导工具提示的元素：一个与左上角对齐（tr），一个位于顶部（img）。 要素如下： 我想创建两个带有引导工具提示的元素：一个与左上角对齐 (tr)，一个位于顶部 (img)。 要素如下： <tr data-toggle="tooltip" data-placement="top" title="title2"> <th>test</th> <th>test</th> <tr/> <img src="link.png" data-toggle="tooltip" data-placement="top" title="title1"/> 下面的内容可以使其工作，但它将所有工具提示的工具提示设置为“左上角”。我只想要 tr 元素： .tooltip { left:20px !important; } 我尝试过使用以下两种方法，但都不起作用： tr.tooltip { left:20px !important; } .tooltip tr { left:20px !important; } 创建包含要添加工具提示的元素的 HTML 结构。例如： <button id="myButton" data-toggle="tooltip" title="This is a tooltip">Hover me</button> 然后添加 jQuery 代码 <script> $(document).ready(function () { $('#myButton').tooltip(); }); </script> 有了这个你就会明白了，只需要更改 ID 并且我认为你已经插入了 Bootstrap 文件。