Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。
我正在使用 php 和 mysql，我设法按照本教程进行分页： http://www.phpfreaks.com/tutorial/basic-pagination 这是“mywebpage”（工作中）：http://ada.uprrp.edu/~eh...
Bootstrap 3.4 版本与 JQuery 3.4 版本兼容吗？
Bootstrap 3.4 版本与 JQuery 3.4 版本兼容吗？或者我需要升级到 Bootstrap 版本 4 吗？ 我不能使用 3.4 版之前的较低版本的 JQuery，因为根据我们的...
Bootstrap 3.3.6 和 JQuery 3.1.0 不兼容？
这两个（都是最新版本）有可能不兼容吗？ （片段中：本地文件为最新版本，网上检索到的文件为旧版本） 有什么吗...
我的要求是，单击按钮后，应在对话框模式中显示 pdf 文件。 请帮忙！ 引导示例<...</desc> <question vote="13"> <p>我的要求是，单击按钮后，应在对话框模式中显示 pdf 文件。 请帮忙！</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>View PDF</h2> <!-- Trigger the modal with a button --> <button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> </div> </div> </div> </div> </body> </html> </code></pre> </question> <answer tick="false" vote="27"> <p>您还可以将 pdf 嵌入模式中。 像这样：</p> <pre><code><embed src="sample.pdf" frameborder="0" width="100%" height="400px"> </code></pre> <p>这对我有用</p> </answer> <answer tick="true" vote="18"> <p>很抱歉让您失望，但默认情况下不能仅在模式中显示 pdf。这不是有意的行为。即使使用 <pre><code><iframe></code></pre>，您也无法在引导模式内渲染 pdf。此外，大多数在线提供的 hack 都不支持跨浏览器。更理想的方法是使用插件，我会给你一些链接，你可以使用它们来实现你想要的。</p> <p>1）结账<pre><code>PDFObject</code></pre>JS，</p> <pre><code><script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script> </code></pre> <p>PDFObject 将 PDF 文件嵌入到 HTML 文档中。 <a href="http://pdfobject.com/" rel="noreferrer">链接</a>.</p> <p>2) Bootstrap 的简单模态插件。 <a href="http://bootsnipp.com/snippets/VX7EN" rel="noreferrer">演示片段</a>和<a href="http://saribe.github.io/eModal/#demo" rel="noreferrer">网站</a></p> <p>3) 使用 jQuery 对话框模态弹出窗口。 <a href="http://www.aspsnippets.com/demos/1261/" rel="noreferrer">演示</a>。</p> <p>希望有帮助。</p> </answer> <answer tick="false" vote="13"> <pre><code><div class="modal fade" id="modal-agreement"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </code></pre> </answer> <answer tick="false" vote="2"> <p>你也可以试试这个</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>DisplayPDF</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>可以在modal/popup中添加iframe。</p> <pre><code><iframe src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="600" height="780" style="position: absolute;top: 66px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 3;height: 100%;"></iframe> </code></pre> <p>根据您的要求，您可以设置参数的样式。</p> </answer> <answer tick="false" vote="1"> <p>在 JS 中使用 Vuejs 全屏模态显示 pdf。</p> <p><strong>html</strong></p> <pre><code> <div class="modal " tabindex="-1" id="idXyz"> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">[[formName]]</h5> <button type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">close </button> </div> <div class="modal-body"> <embed v-bind:src="getUrl" frameborder="0" width="100%" height="100%"> </div> </div> </div> </div> </code></pre> <p><strong>Javascript</strong></p> <pre><code>var pdfVueModal = new Vue({ el: '#idXyz', data: { getUrl: null, formName: null }, methods: { showPdf: function (getUrl, formName) { this.getUrl = getUrl; this.formName = formName; $('#idXyz').modal('show'); } }, delimiters: ["[[", "]]"], }); </code></pre> </answer> <answer tick="false" vote="0"> <p>但是我收到这样的错误：不允许加载本地资源：file:///D:/</p> <p>好吧...您的浏览器不允许直接从硬盘加载该文件。在你看来，你可能会得到这样的东西：</p> <pre><code><img src="C:\xampp\htdocs\socialNet\public\uploads\joew.png" /> </code></pre> <p>您需要浏览器的 URL 才能访问此图像。在您看来，您需要类似的东西：</p> <p>Laravel 中的 asset() 函数从公共文件夹创建一个 URL 并附加您提供的参数。因此，这将创建一个类似以下的 URL：<pre><code>http://localhost/public/uploads/joew.png</code></pre></p> <p>编辑：您指定的文件夹<pre><code>(storage_path)</code></pre>可能根本无法被浏览器读取。将上传更改为<pre><code>public_path('uploads')</code></pre>，即可访问。</p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>DisplayPDF</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>
我有一个引导网格布局，但行没有占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML： 我有一个引导网格布局，但该行未占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML： <div class="container-fluid"> <h1 class="center-text" id="heading">[Enter Heaading Here]</h1> <div class="container"> <div height="100px" class="row border-show"> <div class="col-4" id="one"></div> <div class="col-4" id="two"></div> <div class="col-4" id="three"></div> </div> </div> </div> 这是CSS： .center-text{ text-align: center; } #heading{ padding: 60px; } .border-show{ border-style: solid; border-color: black; } 万一其他人遇到这个问题并且答案不能解决他们的问题，导致此问题的问题是因为我没有意识到我正在添加一行并尝试在 Bootstrap 导航栏中设置列。默认情况下，导航栏已经有一个类似网格的系统，因此如果您尝试在其中添加列，那么您似乎将其推到了边缘。无论如何，它们都没有必要。 因此，如果这个答案不能解决您的问题，请检查您是否位于另一个已经处理间距的 Bootstrap 组件内。您可能正在尝试对您的内容进行双重定界！ 将其从container中取出。 container 不是 100% 宽度，不应嵌套在另一个容器中。 container类有这样的效果。 <div class="container"> <div class="row"> <div class="col-12"> div into <b>container</b> class </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> div into <b>container-fluid</b> class </div> </div> </div> 此代码将生成以下图像： 在我的例子中，甚至容器流体也不起作用，因为我在同一 div 中使用了带有容器流体的行类。因此，我从父 div 中删除了行类，并在其中创建了一个子 div 并使用了行类。然后就成功了。 <div class="container-fluid row"> <div class="col-12"> didn't work </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> worked </div> </div> </div> 我刚刚遇到了类似的挑战，嵌入式 iframe 没有占据整行。我正在使用 bootstrap 5。以下是让 iframe 占据 100% 宽度并具有响应能力的方法： <div class="row"> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/cTp3w2ZUUxw?rel=0" allowfullscreen></iframe> </div> </div> ratio和ratio-16x9是Bootstrap 5中的新功能，使这一切变得超级简单。
我有一个列出项目的网页。默认模板使用一个表格来实现这一点，我认为这非常合适。然而，在此表中，有一列包含的文本比其他列多得多：
使用 connect-assetmanager 缩小 bootstrap.js 会导致语法错误。为什么？
在 node.js/Express 应用程序中使用 connect-assetmanager。 这有效： js：{ 数据类型：'javascript'， 路径：__dirname + '/../public/javascript/', 文件：[//'jquery-1.7.1.js' ...
我使用引导表来呈现我的数据。 一切正常，但有一个下拉菜单可以选择每页的项目数 有我的代码。你有什么想法吗，也许版本有一些问题......
我有一个电子商务项目，有一个包含很多商品的巨大菜单。为了清楚起见，子菜单的每个 li 元素必须位于另一个之下。就我而言，我的空间太大了，你可以......
从我的 scss 文件中使用 Bootstrap 的实用 API
Bootstrap 文档解释了如何启用负边距 - 但这是针对自定义 Bootstrap 的情况。 我从 CDN 使用它，但我仍然想要这些类（例如 mt-n1）。我愿意
Bootstrap 5 验证不适用于 .NET 8 ASP.NET Core
我正在尝试在应用程序中使用 bootstrap 5 样式来显示错误消息。在之前的项目中，如果由于
我的 HTML 文件中有一些 Bootstrap 选项卡： <p>我的 HTML 文件中有一些 Bootstrap 选项卡：</p> <pre><code><!doctype html> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style type="text/css"> #mainPopup { padding: 10px; height: 400px; width: 288px; font-family: Helvetica, Ubuntu, Arial, sans-serif; } </style> <html lang="en"> <div class="container" id="mainPopup"> <ul class="nav nav-tabs"> <li class="nav active"><a href="#A" data-toggle="tab">A</a></li> <li class="nav"><a href="#B" data-toggle="tab">B</a></li> <li class="nav"><a href="#C" data-toggle="tab">C</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="A">Content inside tab A</div> <div class="tab-pane fade" id="B">Content inside tab B</div> <div class="tab-pane fade" id="C">Content inside tab C</div> </div> </div> </html> </code></pre> <p>这是在网页和 Chrome 扩展程序中显示的 HTML：</p> <p><a href="https://i.stack.imgur.com/AvKjj.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0F2S2pqLnBuZw==" alt=""/></a></p> <p>浏览器中的代码允许我更改选项卡，但 Chrome 浏览器扩展程序中的代码则不允许。这是什么原因，如何让 Bootstrap 在 Chrome 扩展中工作？</p> </question> <answer tick="false" vote="8"> <p>我们可以使用外部 JavaScript。 <a href="https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy" rel="nofollow noreferrer">阅读本文</a>。</p> <p>在您的 <pre><code>manifest.json</code></pre> 添加 <pre><code>content_security_policy</code></pre> 键。即</p> <pre>“content_security_policy”：“script-src'self'https://ajax.googleapis.com https://stackpath.bootstrapcdn.com;object-src'self';” </pre> <p>我正在使用 jQuery 以及 Bootstrap。</p> <p>在您的情况下，将此行添加到您的 <pre><code>manifest.json</code></pre></p> <pre>“content_security_policy”：“script-src'self'https://maxcdn.bootstrapcdn.com;object-src'self';” </pre> </answer> <answer tick="true" vote="7"> <p>事实证明，您无法在 HTML 文件顶部链接外部 Javascript 文件。我必须下载 Bootstrap 文件并将其保存在本地，以便在扩展中使用它们。</p> </answer> </body></html>
我的SCSS结构： 主要.scss： @import '~bootstrap/scss/functions'; @import '主题/变量'; @import '~bootstrap/scss/bootstrap'; @import '主题/主题'; 主题.scss： ... @import“实用程序&qu...
我创建了一个 django 表单并在模板中输出它。但我不明白如何添加引导样式，因为这个 django 形式不好。 输出图像： 代码： {% 扩展 'base.html' %} {% b...
我正在尝试创建一个响应式图像库，就像从数据库中选择的图像中形成的网格一样。我使用 bootstrap 为列表元素创建列。 因为图像不同...
我在尝试在使用 Twitter 引导网格的网站上创建布局部分时遇到了一些麻烦。 我需要一个带有 col-xs-3 列的常规 .container，然后下一列应该只是......
我正在尝试在简单的 django 应用程序中使用复选框控件。代码逻辑似乎没问题，但我得到一个空的水果列表（[无，无]）。我不知道为什么它不起作用，任何人都可以
是否可以在scss文件中@import bootstrap图标并通过@extend在其他scss类中使用它？
是否可以像导入bootstrap.scss一样导入并扩展scss文件中的bootstrap-icons.css？ 到目前为止我已经尝试过但没有成功： @import“../node_modules/bootstrap-icons...
应该很简单，但是我看不到我的错误。 目的 整个标记为居中 col 和 col-10 宽度。 接下来在同一个 10 中，col 有两个 div 50% 50%。 使用 bootstrap 5，对于某些...
Bootstrap 的数据切换和 JQuery 代码无法协同工作
我使用此 HTML 代码来切换模式（id = 确认订单）。它正在正常工作。 我使用此 HTML 代码来切换模式（id = 确认订单）。它正在正常工作。 <button type="button" data-toggle="modal" data-target="#confirm-order" class="orderbtn"> 但是，当我添加此 JQuery 代码来隐藏或显示弹出 div（类 = floatorder）时，数据切换不再起作用。但 JQuery 是。 $(".floatorder").toggle(localStorage.menuWindow==="true") $(".orderbtn").click(function(event) { event.stopPropagation(); localStorage.menuWindow= $(".floatorder").toggle().is(":visible") }); 控制台没有抛出错误... 您应该向 .toogle() 函数传递两个参数，请阅读 toggle() 的文档