Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
Carousel slick.js + bootstrap 列宽问题
我有这个网页http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html 我在黄色块中有一份推荐。我想要一个推荐的轮播；但你可以...
我目前正在使用 FontAwesome，并且很难将图标在容器中垂直和水平居中。我尝试过通过定位来做到这一点，但遇到了问题......
我正在尝试在引导模式中设置默认按钮。这是代码：http://plnkr.co/edit/1aLlDdL8WfkUrBVt4q31?p=preview 在模式窗口中，我希望“提交”按钮成为默认按钮。 我
我正在使用 Bootstrap Carousel。我想要的是滑块仅在单击导航或分页时才会滑动。 我试过删除 $('.carousel').carousel({ 间隔：6000 }); 它
所有， 在 bootstrap3 中，我使用按钮折叠 div，我有一个图像和文本，并在以下之间交替： + 更多 - 较少的 但是图像与文本未对齐。有什么办法可以对齐ima...
无法在 Angular 7 应用程序中覆盖 Bootstrap
在 Angular 应用程序中，我试图通过删除分隔线来覆盖我的面包屑样式。我使用 https://getbootstrap.com/docs/4.2/components/breadcrumb/#example。但它不起作用。 这是我的角度。
我正在使用 Bootstrap 3（完整版），并且在代码中使用 bootstrap 模式： 我正在使用 Bootstrap 3（完整版），并且我在代码中使用 Bootstrap 模式： <a data-toggle="modal" data-target="deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> <!-- Modal --> <div id="deleteMessage" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 此代码是我从官方文档复制的，但它不起作用，模式窗口不显示。 有什么问题吗？ 尝试将锚定代码更改为： <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 教程里好像有错字，data-target属性里应该多了个“#”。 您忘记将 # 包含到 data-target 属性中 <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 现场演示
我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ &l... 我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style="background: url(1.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style="background: url(2.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style="background: url(3.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div> <script src="js/bootstrap.bundle.js"></script> 您需要使用 CDN 添加 bootstrap JS 和 Bootstrap CSS。您还需要添加图像 src，请参阅下面的示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <title>Document</title> </head> <body> <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style='height: 600px; background-size: cover'> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71auFznfVpL.__AC_SX300_SY300_QL70_ML2_.jpg" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> </body> </html>
Bootstrap modal-open 导致 body 有 style="padding-right: 15px;"
在我的 bootstrap 3.3.7 网站上，打开模态框时，整个正文会显示“style =“15px””。当我打开模态框时，这会将我的顶部导航（固定导航）向右移动 15px。我无法使用 CSS 来删除...
我有一个需要验证的表单，并且适用于文本和文本区域，但不适用于内联单选按钮。 <... 我有一个需要验证的表单，并且适用于文本和文本区域，但不适用于内联单选按钮。 <form class="needs-validation" novalidate method="POST"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" required> <label class="form-check-label" for="inlineRadio1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" required> <label class="form-check-label" for="inlineRadio2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" required> <label class="form-check-label" for="inlineRadio3">3</label> </div> <div class="invalid-feedback"> Radio button is required. </div> <button class="btn btn-primary" type="submit">Validate</button> </form> 我看到提交时控件和标签变成红色，但无效反馈中的文本不存在。我还希望它一直向左对齐。 将此 CSS 类添加到您的文档中： .was-validated :invalid~.invalid-feedback { display: inline; } 通过这种方式，您可以覆盖提交表单后应用于 display: block 的 invalid-feedback，并且验证消息将内联显示，与其余内联对象对齐。
我是 Bootstrap 新手，正在尝试自定义 Bootstrap 的现有示例。我的目标是将 div 标签（id 为“inner”）扩展到屏幕的全宽。 我尝试了很多不同的...
由于某种原因，此下拉菜单在悬停时不显示列出的元素。使用引导程序。 我在这里错过了什么吗？也许这很简单，但我就是看不到。 由于某种原因，此下拉菜单在悬停时未显示列出的元素。使用引导程序。 我在这里遗漏了什么吗？也许这很简单，但我就是看不到。 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Services --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <h6 class="dropdown-header">Dropdown header</h6> <a class="dropdown-item" href="#">Rewiring</a> <a class="dropdown-item" href="#">Light Fixes</a> <a class="dropdown-item" href="#">Showers</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Rewiring</a> <a class="dropdown-item" href="#">Light Fixes</a> <a class="dropdown-item" href="#">Showers</a> </div> </li> 在Bootstrap中，下拉菜单默认在鼠标点击时运行，如果你想在鼠标悬停时显示下拉菜单，那么你必须使用css或js 我用过css .dropdown:hover ul.dropdown-menu{ display: block; } .dropdown:hover ul.dropdown-menu{ display: block; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Services </button> <ul class="dropdown-menu"> <li><h6 class="dropdown-header">Dropdown header</h6></li> <li><a class="dropdown-item" href="#">Rewiring</a></li> <li><a class="dropdown-item" href="#">Light Fixes</a></li> <li><a class="dropdown-item" href="#">Showers</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Rewiring</a></li> <li><a class="dropdown-item" href="#">Light Fixes</a></li> <li><a class="dropdown-item" href="#">Showers</a></li> </ul> </div> 更多事情要在这里讨论： BS 中的打开下拉菜单是由 Popper.js 完成的（不是 bootstrap.min.js 的一部分）。因此，为了使下拉菜单正常工作，您需要通过捆绑包加载 Bootstrap JS，其中包含 Popper.js https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/js/bootstrap.bundle.min.js 由于您使用的是BS5，因此需要将data-toggle="dropdown"更改为data-bs-toggle="dropdown"。这是从版本 5 开始的新标记。 正如另一个答案中提到的，点击（而不是悬停）打开下拉菜单是 BS 哲学的核心部分（不幸的是）。因此，如果您想在悬停时打开子菜单，则必须添加额外的 CSS。 还要小心标记。使用BS推荐的结构进行导航会更干净（使用<ul>，<li>等） 改变<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Services</a> 到 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"> Dropdown button </button> 将其更改为按钮即可使用！！
我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示...... 我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示... <OverlayTrigger placement="bottom" overlay={ <Tooltip id="tooltip" style={{ width: "100%", wordBreak: "break-all" }} > thisisalongstringthanusualhencenotfilledincontiner </Tooltip> } > <span>Hover over this text</span> </OverlayTrigger> 之前我遇到了让工具提示内容适合容器的问题，所以我使用了wordBreak: "break-all"，所以它适合容器框。 这里有一个工作示例... 但现在我得到了工具提示应显示水平长的要求。现在您可以看到它正在进行断词，并且容器是垂直的且宽度固定...但是如何更改工具提示容器的宽度以使文本在单行中水平较长？ 从上面的代码中，文本 thisisalongstringthanusualhencenotfilledincontiner 应显示在单行中，并展开工具提示... 如何更改 React Bootstrap 中工具提示容器的宽度？ <Tooltip className="mytooltip" ...> CSS .mytooltip > .tooltip-inner { max-width: 100%; } .mytooltip > .tooltip-arrow { ... } 在下面的类中添加此 CSS 属性。 .tooltip-inner { max-width: none; } 您可以添加此 CSS 内容： .tooltip .tooltip-inner { width: 7em; white-space: normal; } 如果您检查它，您会发现默认情况下工具提示位于其引用的项目之后。所以你可以用 CSS 来定位它的宽度和内容。
我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示...... 我正在制作一个非常简单的 React 应用程序，我需要在将鼠标悬停在文本上时显示工具提示... <OverlayTrigger placement="bottom" overlay={ <Tooltip id="tooltip" style={{ width: "100%", wordBreak: "break-all" }} > thisisalongstringthanusualhencenotfilledincontiner </Tooltip> } > <span>Hover over this text</span> </OverlayTrigger> 之前我遇到了让工具提示内容适合容器的问题，所以我使用了wordBreak: "break-all"，所以它适合容器框。 这里有一个工作示例... 但现在我得到了工具提示应显示水平长的要求。现在您可以看到它正在进行断词，并且容器是垂直的且宽度固定...但是如何更改工具提示容器的宽度以使文本在单行中水平较长？ 从上面的代码中，文本 thisisalongstringthanusualhencenotfilledincontiner 应显示在单行中，并展开工具提示... 如何更改 React Bootstrap 中工具提示容器的宽度？ <Tooltip className="mytooltip" ...> CSS .mytooltip > .tooltip-inner { max-width: 100%; } .mytooltip > .tooltip-arrow { ... } 在下面的类中添加此 CSS 属性。 .tooltip-inner { max-width: none; } 你可以添加这个CSS .tooltip .tooltip-inner { width: 7em; white-space: normal; } 如果您检查，您会发现默认情况下工具提示位于其引用的项目之后。所以你可以用 CSS 来定位它的宽度和内容。
htmx get/post 请求交换后 JavaScript 无法运行
我正在构建一个Django项目，并尝试使用htmx获取和发布数据，一切正常，这意味着我可以获取和发布数据，这没有问题，但问题是在数据被sw之后......
这是来自Bootstraps官网的示例。是否可以去除手风琴上的圆角？ ` <... 这是来自Bootstraps官网的示例。是否可以去除手风琴上的圆角？ ` <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div> ` 我花了几个小时试图去除角落但没有运气 .accordion-item:last-of-type .accordion-button.collapsed {border-bottom-left: 0;) 将其添加到您的 CSS 中： .accordion-item { border-radius: 0 !important; } 此外，如果您还想从“突出显示”中删除圆角，则可以添加此选项。 .accordion-item, .accordion-button { border-radius: 0 !important; } 示例： #wraps { margin: 50px; } .accordion-item, .accordion-button { border-radius: 0 !important; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div id="wraps"> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div> </div> 这不适用于您的情况，但我对react-bootstrap的Accordion control有类似的问题。已接受答案中建议的 CSS 更改对我来说不起作用。事实证明，我所要做的就是将 flush={true} 添加到我的手风琴中：<Accordion defaultActiveKey={open.current} flush={true} alwaysOpen>
如何使用 Angular 6 和 bootstrap 3.3.7 创建可折叠/可扩展/带有复选框列表的树结构
我正在尝试在父节点和子节点上都带有复选框的可折叠/树结构。我无法准确地创建它。我能够从 JSON 创建无序列表 { &...
jquery.js、bootstrap.css 和 bootstrap.js 的本地回退，以防 CDN 关闭或本地互联网无法工作
如果 jquery.js、bootstrap.css 和 bootstrap.js 的 CDN 出现故障，我需要提供本地回退。 使用 jQuery 我可以做到 <question vote="0"> <p>如果 jquery.js、bootstrap.css 和 bootstrap.js 的 CDN 出现故障，我需要提供本地回退。</p> <p>使用 jQuery 我可以做到</p> <pre><code><script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="" crossorigin=""></script> <script>window.jQuery || document.write('<script src="scripts/libraries/jquery-3.6.1.min.js"><\/script>')</script> </code></pre> <p>通过 bootstrap.css 我可以使用 <pre><code>onerror</code></pre></p> <pre><code><link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c809c83">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" onerror="this.onerror=null;this.href='frameworks/bootstrap.min.css';" integrity="" crossorigin="" /> </code></pre> <p>但是当涉及到 bootstrap.js 时，当我使用与上面的 jQuery 相同的代码时，以下内容不起作用</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="60020f0f14131412011020554e524e51">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="" crossorigin=""></script> <script>window.jQuery || document.write('<script src="frameworks/bootstrap.bundle.min.js"><\/script>')</script> </code></pre> </question> <answer tick="true" vote="1"> <p>您似乎已经有了答案，但将其封装起来会有所帮助：</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="2c4e4343585f585e4d5c6c19021e021d">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script> <script> if (!window.bootstrap) { // if the bootstrap object is not present let bootstrapScript = document.createElement("script"); bootstrapScript.setAttribute("src", "frameworks/bootstrap.bundle.min.js"); document.getElementsByTagName("head")[0].appendChild(bootstrapScript); } </script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="d7b5b8b8a3a4a3a5b6a797e2f9e5f9e6">[email protected]</a>/dist/css/bootstrap.min.css" onerror="this.onerror=null;this.href='frameworks/bootstrap.min.css';this.removeAttribute('integrity');this.removeAttribute('crossorigin');" integrity="" crossorigin="" /> </code></pre> <p>我希望这仍然有用</p> </answer> <answer tick="false" vote="0"> <p>我为任何使用 Django 和 <pre><code>{% static</code></pre> 的人添加这个，因为这给我带来了 Django 4.2 的很多痛苦。评论太长了</p> <p>这行不通。 Firefox 控制台中的“无效转义字符”。然而“查看页面源代码”看起来还不错。</p> <pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="e88a87879c9b9c9a8998a8ddc6dac6d9">[email protected]</a>/dist/css/bootstrap.min.css" onerror="this.onerror=null;this.href=\"{%static 'wherever//bootstrap.min.css' %}\" ;" </code></pre> <p>但是，这确实有效。</p> <pre><code>{%static 'wherever//bootstrap.min.css' as fallback %} <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="bad8d5d5cec9cec8dbcafa8f9488948b">[email protected]</a>/dist/css/bootstrap.min.css" onerror="this.onerror=null;this.href='{{fallback}}' ;" </code></pre> </answer> </body></html>
我正在使用 pinax-theme-bootstrap-account 和 django-user-accounts。 当我想使用 pinax 模板时，出现此错误： “bootstrap_tags”不是有效的标签库：模板库 bootstrap_ta...
我在 Angular 中创建了一个 Web 应用程序，其中有组件、登录组件和注册组件。每次我将元素 routerLink 添加到 以便我导航...