bootstrap-4 相关问题

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

我正在使用 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">×</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">×</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">×</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">×</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

javascript jquery html css bootstrap-4

回答 5 投票 0

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

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

html bootstrap-4 carousel

回答 3 投票 0

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

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

javascript jquery bootstrap-4 bootstrap-5

回答 1 投票 0

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

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

python django twitter-bootstrap python-3.x bootstrap-4

回答 3 投票 0

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

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

angular bootstrap-4 angular-material

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

angular bootstrap-4

回答 1 投票 0

使用 bootstrap 显示 html 输入字段

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

bootstrap-4

回答 1 投票 0

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

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

twitter-bootstrap vue.js vuejs2 bootstrap-4 navbar

回答 2 投票 0

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

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