bootstrap-4 相关问题

Bootstrap 4是流行的前端组件库的第四个主要版本。 Bootstrap框架有助于创建响应迅速,移动优先的网站和Web应用程序。

Bootstrap 4 更改折叠中的图标

我使用bootstrap 4 alpha 6版本。在我的页面中,我有几个折叠块。我想在用户打开/关闭该块时更改图标。由于我有几个这样的块,我使用了类,但它不起作用。

回答 1 投票 0

Bootstrap 5 justify-content 无法正常工作并且无法垂直居中内容

我有以下代码,我使用 bootstrap 5: ...

回答 3 投票 0

Bootstrap Toast 不显示

我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导网站中的以下代码添加吐司: 我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导程序网站中的以下代码添加吐司: <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 但是吐司并没有出现,如图所示。它只是在导航和轮播之间留下了间隙。 我已经从引导网站导入了所有这些脚本: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 并将以下内容放入我的 javascript 文档中: $('.toast').toast(option) 但是,什么也没发生。我希望有人能帮助我:) 您需要输入有效的选项。我:eshow, hide or a callback function。请参阅 - https://getbootstrap.com/docs/4.2/components/toasts/。 $('.toast').toast('show'); <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 如果您不想自动关闭 Toast,请添加 data-autohide="false"。 $('.toast').toast('show') <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 文档准备好后,您需要启动“ $(".toast").toast('show'); 。 <script> $(document).ready(function() { $(".toast").toast('show'); }); </script> 首先,你需要将吐司固定在顶部或底部,具体取决于你想要的位置。 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast fixed-bottom m-5 ms-auto" data-bs-autohide="false"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <script> window.onload = (event) => { let myAlert = document.querySelector('.toast'); let bsAlert = new bootstrap.Toast(myAlert); setTimeout(function () { bsAlert.show(); }, 5000); }; </script> 我尝试了这个解决方案,但我收到一个 JS 错误“Uncaught ReferenceError: bootstrap is not Defined”,这似乎阻止了烤面包机的显示。 我看到的唯一区别是我正在使用 bootstrap5,并且 bootstrap 似乎不再需要 JQuery,因此它不包含在基本模板中。 渲染后我在基本模板中看到的是: <head> ... <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet"> ... </head> <body> ... <toaster html goes here> .... <script crossorigin="anonymous" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body 我不知道为什么 bootstrap 是未定义的,因为 JS 是明确链接的,但我是 bootstrap 的新手,所以可能做了其他错误。我正在使用 django-bootstrap5 应用程序,其他一切似乎都工作正常。 可能想考虑使用这个库,它通过引导程序简化了 toast 的使用: https://github.com/zhiftyDK/bootstrap-toast

回答 5 投票 0

引导视频轮播播放按钮/左右指示器未出现

所以我试图制作一个包含 4 个视频的轮播,但遇到了一些问题,但不明白为什么。首先我只能通过屏幕底部中间的圆圈来切换视频,我不能...

回答 3 投票 0

根据切换开关选择禁用 Bootstrap 中的输入?

阅读文档,我试图在 bootstrap 5 中找到一种方法,如果切换开关输入设置为“关闭”,则禁用其他输入字段? 父元素是#member_form,开关是'toggles...

回答 1 投票 0

如何在 django 应用程序中获取复选框值

我正在尝试在简单的 django 应用程序中使用复选框控件。代码逻辑似乎没问题,但我得到一个空的水果列表([无,无])。我不知道为什么它不起作用,任何人都可以

回答 3 投票 0

垫子图标按钮和垫子按钮的对齐

我有一个场景,我想将一些按钮对齐在同一水平线上。我不明白为什么 mat-icon-button 没有与其他按钮相同的对齐方式。两者都有

回答 1 投票 0

禁用单元格编辑器

<p-cellEditor style="width: 100%;"> <ng-template pTemplate="input"> <p-inputNumber [(ngModel)]="object.amount" name="chargedAmount" mode="currency" currency="PHP" [disabled]="disableFieldEdit"></p-inputNumber> </ng-template> <ng-template pTemplate="output"> {{ object.amount | currency: 'PHP'}} </ng-template> </p-cellEditor> 我已经添加了disableFieldEdit,问题是字段显示不可见,因为禁用为灰色。我需要单击该字段才能查看其是否已禁用 您无法禁用 p-cellEditor,您应该使用 ngIf 指令,以便在单元格可编辑的情况下显示 p-cellEditor,否则您将显示静态单元格 <p-cellEditor style="width: 100%;" *ngIf="canEditCell;else staticCell"> <ng-template pTemplate="input"> <p-inputNumber [(ngModel)]="object.amount" name="chargedAmount" mode="currency" currency="PHP" [disabled]="disableFieldEdit"></p-inputNumber> </ng-template> <ng-template pTemplate="output"> {{ object.amount | currency: 'PHP'}} </ng-template> </p-cellEditor> <ng-template #staticCell> {{ rowData[col.field] }} </ng-template>

回答 1 投票 0

使用 bootstrap 显示 html 输入字段

我们可以在同一个表单的 Bootstrap 类的帮助下,在宽屏中拥有两个输入字段,在小屏幕中拥有单个输入屏幕吗?我该如何使用 bootstrap . 我的期望显示出不同......

回答 1 投票 0

尝试让 Bootstrap 4 导航栏折叠在 Vue 中工作

我正在尝试使引导导航栏折叠在移动设备上工作,因为它根本不起作用。请不要在代码中提供其他依赖项,例如 vue-bootstrap 或实现 jquery...

回答 2 投票 0

Bootstrap 从 v4.3 升级到 v5 破坏了整个应用程序 css

我有一个 Angular 14 上的 Angular 应用程序,它使用 bootstrap 和 SCSS 编译为 node-sass/SASS 包。它还使用 ng-bootstrap v11 和 bootstrap v4.3.1 作为 css 样式。我必须升级昂...

回答 2 投票 0

在最新版本的 html2canvas 中,我遇到了阿拉伯语被错误地呈现为不可读的混乱的问题

错误报告: 我正在使用 bootstrap 4 和 Angular 11,尽管这个问题似乎与包直接相关,而不是与其中任何一个相关,但我已经尝试过: 将 css 文本对齐更改为左、右和

回答 1 投票 0

日历引导表

我正在尝试使用表格为视力障碍者创建一个 Bootstrap 4 日历,该表格将使用浏览器的全宽和高度显示。在某人的帮助下我成功了...

回答 1 投票 0

使用自定义 Bootstrap Angular

我有一个关于 Angular 的问题无法解决。我使用 Mustache 和 Bootstrap 创建了一个 Spring Web。现在我想用Angular来做前端,但我无法实现它。 这是

回答 1 投票 0

如何解决2个CDN链接产生的css冲突?

如果我评论影响我的引导样式的任何一个链接,我会不小心粘贴版本 4.5.2 和 5.3.3 的 2 个引导 CDN 链接 根本原因是我无法应用 bg-danger...

回答 1 投票 0

Summernote动态添加按钮时传递参数

我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...

回答 1 投票 0

动态添加按钮时传递参数

我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...

回答 1 投票 0

javascript: SummerNote:动态添加按钮时传递参数

我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...

回答 1 投票 0

表单提交时引导模式关闭

我在livewire中有一个引导模式,我希望有一种在表单提交成功时关闭模式的行为,但不知道该怎么做,我不能放置数据关闭,因为表单有

回答 4 投票 0

引导选择选择器 - 如何使用 javascript 将搜索文本放入选择选择器搜索框中并触发下拉列表以显示搜索结果?

我正在构建 Razor Pages ASP.NET CORE 3.0 Web 应用程序。 我正在使用具有“data-live-search= true”的 Bootstrap“selectpicker”下拉列表。我正在用 n 填充下拉列表...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.