bootstrap-4 相关问题

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

我无法使用“全选”按钮选中复选框

全选 我这里有一个表头元素。当我单击“全选”时,我想要检查...

回答 1 投票 0

如何为 Bootstrap 模态 4.0 中的按钮添加 Click 事件

我有一个简单的模态(Bootstrap 4)。 我想添加一些点击功能来保存和取消按钮。 我有一个简单的模态(Bootstrap 4)。 我想向 click 和 save 按钮添加一些 cacel 功能。 <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" id="submit" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" id="cancel" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 我应该如何实施?据我阅读文档(Bootstrap 的 JavaScript 模式插件),不存在按钮选项。 我也尝试过: $(document).on( "click", "#submit", function() { alert("submit click"); }); 但是可以通过任何点击和任何地方调用函数(输入、模态......)。 问候 如果您只想向此模型中的按钮添加事件(而不是从其他位置),只需使用 id 选择器而不是文档。 $("#exampleModal").on( "click", "#submit", function() { alert("submit click"); }); $("#exampleModal").on( "click", "#cancel", function() { alert("cancel click"); });

回答 1 投票 0

Bootstrap 4 中的垂直对齐

我在 Bootstrap 4 中有以下设置:Bootply 链接 带有“供应商”文本的元素应该垂直居中,我有不同的行具有相同的代码,我希望它们居中。没有

回答 2 投票 0

如何在打开弹出窗口时使主题更暗

最近,我在我的作品集网站上创建了弹出窗口。然后,我使用 Bootstrap 类来使自己的网站变得更容易。所以,我想让后面的对象更暗,以使弹出的对象更暗

回答 1 投票 0

对齐 DIV 中的文本 - CSS Bootstrap

我是前端开发新手,我在尝试简单地将此标签的文本在 div 中居中时遇到了麻烦。参见印刷品;我希望文本居中,位于图像下方。我正在使用

回答 1 投票 0

使用 CSS 删除 Bootstrap 中导航栏切换器汉堡图标的边框颜色

我已经被困在这个问题上很长时间了。搜索并尝试了多种方法来删除单击 BS4 汉堡包图标时的边框颜色(在我的本地,它显示为黄色。在这个片段中,我...

回答 11 投票 0

将 Bootstrap 从 3.3.4 升级到 4.0

我的网站曾经使用 Boostrap 3.3.4,自从我迁移到 Bootstrap 4 后,一切都坏了。 本质上我网站的结构非常简单,一个包含一些巨型内容的容器......

回答 1 投票 0

如何将 HTML 表格转换为 Bootstrap 网格系统,同时保持间距?

为了符合美国残疾人法案,我必须在购物车中使用无序列表,因为表格没有屏幕阅读器那么多的功能。 因此,为了将我的 HTML 表格转换为

回答 1 投票 0

如何在单击输入时打开 Bootstrap 模式?

我正在使用 Bootstrap,我有一个搜索表单和一个模式。我希望当我单击搜索表单时打开我的模型。我在网上找到的模态仅适用于按钮,但我不...

回答 1 投票 0

带有模态框的引导输入表单

我正在使用 Bootstrap,我有一个搜索表单和一个模式。我希望当我单击搜索表单时打开我的模型。我在网上找到的模态仅适用于按钮,但我不...

回答 1 投票 0

Bootstrap Multiselect 仍然可行吗?

我正在尝试创建一个多选下拉菜单,用于切换哪些校园信息可见,并遇到了 David Stutz 的引导插件。 我调用了我的链接和脚本: 我正在尝试创建一个多选下拉菜单,用于切换哪些校园信息可见,并遇到了 David Stutz 的引导插件。 我调用了我的链接和脚本: <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" /> 我创建了下拉菜单 <select id="campusMultiSelect" multiple="multiple"> <option value="Campus1">Campus 1</option> <option value="Campus2">Campus 2</option> <option value="Campus3">Campus 3</option> </select> 要切换的部分中的id <div id="Campus1" class="rounded"> // Campus 1 information goes here </div> // <div> for Campus 2 and 3 go here 还有 javascript <script type="text/javascript"> $(function () { $('#campusMultiSelect').multiselect({ includeSelectAllOption: true }); $('#campusMultiSelect').change(function () { // Get the selected values var selectedValues = $(this).val(); // Define an array of campus IDs to toggle var campusIDs = ['Campus1', 'Campus2', 'Campus3']; // Iterate through the campus IDs and toggle their visibility campusIDs.forEach(function (campusID) { var showContent = selectedValues && selectedValues.indexOf(campusID) !== -1; $('#' + campusID).toggle(showContent); }); }); }); </script> 但是,当我运行它时,这是我得到的框,而不是我应该通过每个选项旁边的选择框得到的框 我遵循了使用文档中的所有说明,但显然没有得到我所期望的。 存储库中的代码最后一次更新是在 2022 年,所以这个多选仍然与当前版本的 Razor、ASP.NET Core 和 C# 兼容,还是我只是犯了一个非常明显的错误,忘记了分号之类的? 您可以在浏览器的开发者工具中查看您的bootstrap版本,并查看是否有相关错误信息。 您可以选择以下两种方法: 1. 如果您使用的bootstrap版本是V5,您可以迁移到v4。 2. 或者可以使用对应版本的bootstrap,但需要在Bootstrap Multiselect插件上进行相关的初始化配置。 可以作为bootstrap5.1.3的参考: <link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" /> <select id="campusMultiSelect" multiple="multiple"> <option value="Campus1">Campus 1</option> <option value="Campus2">Campus 2</option> <option value="Campus3">Campus 3</option> </select> <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="~/js/bootstrap-multiselect.js"></script> @section scripts { <script src="~/lib/jquery/dist/jquery.js"></script> <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="~/js/bootstrap-multiselect.js"></script> <script type="text/javascript"> $(function () { $('#campusMultiSelect').multiselect({ buttonClass: 'form-select', templates: { button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>', } }); }); </script> } 可以看Multiselect的介绍:

回答 1 投票 0

使引导程序轮播上的背景图像变暗

我在将图像格式设置为较暗以便阅读图像上的文本时遇到问题。我正在使用引导轮播主题,但无法使图像变暗!不透明度有效,但它使文本变得...

回答 5 投票 0

我的标题标签内的 html 菜单未正确悬停在角度上,请指导我

下面是我在 Angular 应用程序中使用的 CSS,菜单没有悬停在角度组件中的所有控件上 CSS 导航{ 背景颜色:#4D678D; } 导航 ul { ...

回答 1 投票 0

Vue Bootstrap b表延迟加载数据

所以,以最简单的方式,我使用 Vue Bootstrap 作为我的项目的框架。 我需要向我的项目添加一个自定义表格,其中的数据可以包含数千个单元格(100+ 列和 1k+ 行)。 我...

回答 2 投票 0

Blazor 表单验证 Bootstrap 集成

我有一些 Razor 开发经验,并决定尝试一下 Blazor。 我遇到了一个已经熟悉的问题 - 将验证与 Bootstrap 集成:Blazor 验证结果类不支持

回答 2 投票 0

Blazor 表单验证 Bootstrap 集成

我有一些 Razor 开发经验,并决定尝试一下 Blazor。 我遇到了一个已经熟悉的问题 - 将验证与 Bootstrap 集成:Blazor 验证结果类不支持

回答 2 投票 0

引导响应式侧边栏菜单到顶部导航栏

所以我一直在寻找这方面的指导,但没有结果。 基本上,我只想有一个侧边栏,但是当屏幕变小时,即智能手机屏幕尺寸,它会变成

回答 3 投票 0

导航栏的下拉菜单在主页导航栏长度之后不显示

我的导航栏有一个奇怪的问题。我会说,我确实使用了网上的模板。 目前的问题是,在主页上,下拉菜单没有完全展开,只能延伸到最远......

回答 1 投票 0

在引导类中使用十六进制颜色

通常我在引导程序中使用背景颜色作为 div 中的颜色 这里我想要十六进制的背景颜色#0277bd。 我怎样才能使用这个十六进制颜色...

回答 1 投票 0

为什么我无法在boostrap中设置procent值

我想用(细条)制作一个条形,但由于我使用引导程序,我无法完全控制尺寸; 我想用(细条)制作一个条形,但由于我使用引导程序,我无法完全控制尺寸; <template> <div class="container-fluid mx-auto"> <div class="row"> <div class="square rounded-pill"></div> <div class="square rounded-pill"></div> <div class="square rounded-pill"></div> <div class="square rounded-pill"></div> </div> </div> </template> <script> export default { setup() {}, }; </script> <style scoped> .container-fluid { border: 3px solid black; width: 100%; height: 20%; } .row { display: flex; justify-content: space-evenly; align-items: center !important; } .square { width: 10vw; height: 3vh; background-color: red; } </style> 我想将 .container-fluid 高度设置为 50% 但我不能,我想以 % 为单位设置 .square 宽度和高度,但我不能,而且最重要的是,在 .row justifycontent 中,所有项目都不想居中对齐可以,但是对齐项目:居中不行吗? 如何以 % 来描述尺寸并将项目居中对齐? 我建议您在基于视口的单位中设置任何 Bootstrap 元素的 width 和 height。它们是 vh、vw、vmin 和 vmax。百分比不能按照您想要的方式使用。例如,值 1vh 等于视口高度的 1%。请参阅下面的片段。 对于align-items部分,您想要实现什么目标?你想垂直对齐什么? .container-fluid { height: 50vh; background-color: lightgrey; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid">Lorem ipsum</div> </body> </html>

回答 1 投票 0

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