twitter-bootstrap 相关问题

Bootstrap是一个前端框架，旨在启动Web应用程序和站点的开发。有关Bootstrap版本的问题，请使用“twitter-bootstrap-2”，“twitter-bootstrap-3”和“bootstrap-4”标签中的特定版本标签。

将标签与 Bootstrap Toggle 左侧对齐

我正在使用引导切换来创建开关，如下所示：我正在使用引导切换来创建开关，如下所示： <form> <div class="checkbox"> <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox"> <label> Toggle Text Left <input type="checkbox" data-toggle="toggle" /> </label> </div> </form> 有没有办法将标签移到开关左侧？我尝试将文本放在输入之前，但不太合适。 http://jsfiddle.net/sjxd1vpt/2/ 或者，如果您不是特别需要标签标签，您可以使用跨度。 <form> <div class="checkbox"> <input type="checkbox" data-toggle="toggle" checked="checked" /> <span> Toggle Text Right </span> </div> <div class="checkbox"> <span> Toggle Text Left </span> <input type="checkbox" data-toggle="toggle" /> </div> bootstrap-toggle css 似乎有一个 margin-left: -20px; 只需将自定义类添加到所需的左标签即可。 .left .toggle { margin-left: 5px; } 这将维持 Bootstrap-Toggle 预期的结构，以防它们有样式绑定，例如： label input { // some input targeted styling } http://jsfiddle.net/sjxd1vpt/5/ 您应该使用 bootstrap container-fluid 包装器来实现效果。 <form> <div class="checkbox container-fluid" > <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox container"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> 默认情况下，Bootstrap 将 float: left 添加到 .form-check-input 只需用 float: none 覆盖它并在 html 中的输入之前放置标签。交换标签和输入为容器div设置style="display:contents" 设置 style="float:none;margin-left:0.5rem" 输入您的标签标签应在输入标签之前关闭。 <form> <div class="checkbox"> <label> Toggle Text Right </label> <input type="checkbox" data-toggle="toggle" checked="checked" /> </div> <div class="checkbox"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> </form> 这应该可以防止按钮切换与文本重叠。这里：http://jsfiddle.net/sjxd1vpt/4/

html css twitter-bootstrap twitter-bootstrap-3

回答 6 投票 0

停止模态在外部单击或 ESC 时关闭

嗨，我正在尝试禁用模式中的外部点击。我尝试过使用诸如背景：'静态'，键盘：假之类的方法，但我似乎无法使其工作 html: 嗨，我正在尝试禁用模式中的外部点击。我尝试过使用诸如背景：“静态”，键盘：假之类的方法，但我似乎无法使其工作 html: <div class="container my-5"> <hr class="my-5">  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data- keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center> </button> </div> <div class="modal-body"> <strong>Create an account or Log in to see additional search results...</strong> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button> <button type="button" class="btn btn-primary">Log In</button> </div> </div> </div> </div> javascript: $(function() { $('#basicExampleModal').modal('show'); }); 您发布的代码中存在一些语法问题。前任。额外的 </button> 标签和 data- keyboard="false"> 中有一个空格。除了语法问题之外，它应该按预期工作，正如您从下面的示例中看到的那样。如果它仍然无法在您的端工作，则您的代码中的其他地方还有其他问题。 $('#basicExampleModal').modal('show'); <html lang="en"> <head>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> </head> <body> <div class="container my-5"> <hr class="my-5">  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <center> <h1 class="modal-title" id="exampleModalLabel">Want more?</h1> </center> </div> <div class="modal-body"> <strong>Create an account or Log in to see additional search results...</strong> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button> <button type="button" class="btn btn-primary">Log In</button> </div> </div> </div> </div> </div> </body> </html> 您可以使用“data-bs-backdrop”和“data-bs-keyboard”属性而不是 data-backdrop="static" data-keyboard="false"。 Bootstrap 5 对命名约定进行了更改，data-backdrop 和 data-keyboard 属性现在以 bs- 为前缀。使用这个： $(function() { $('modal_id').modal('show'); $('modal_id').modal({ keyboard: false, backdrop: 'static' }) }); 此脚本现在允许通过单击模式外部或按 esc 键来关闭模式。

javascript html twitter-bootstrap modal-dialog

回答 3 投票 0

如何在JS中创建带有引导下拉菜单的shadowDOM

我正在创建一个 chrome 扩展，我需要将 bootstrap 提供的分割按钮添加为 ShadowDOM。但我找不到任何明确的文档。有人可以告诉我如何创建...

javascript css twitter-bootstrap bootstrap-4 shadow-dom

回答 1 投票 0

在 Angular 应用程序中混合 less 和 sass 文件

我正在使用 ng-zorro 组件库构建一个 Angular 应用程序。通常，我还会为一些实用程序导入整个 Bootstrap css 文件，例如我喜欢的网格系统和间距类...

angular twitter-bootstrap sass less ng-zorro-antd

回答 1 投票 0

Bootstrap 5 - 按钮上的下拉菜单和工具提示？

尝试向已使用 data-bs-toggle 的 btn （或任何其他标签）添加工具提示 - 我能得到的最佳结果如下：函数 xmdEnableTooltips() { 让 tooltipTriggerList = [].sl...

javascript html twitter-bootstrap tooltip

回答 2 投票 0

如何使用 Bootstrap ScrollSpy 在身体上使用多个目标

我想将 Bootstrap ScrollSpy 与多个导航、我的主导航和垂直子导航一起使用。我尝试了多种方法，例如：我想将 Bootstrap ScrollSpy 与多个导航、我的主导航和垂直子导航一起使用。我尝试了多种方法，例如： <body data-spy="scroll" data-target="#main-nav #subnav"> <body data-spy="scroll" data-target="#main-nav, #subnav"> $('body').scrollspy({target: "#main-nav"}); $('body').scrollspy({target: "#subnav"}); $('body').scrollspy({target: "#main-nav"}, {target: "#subnav"}); 放置包装div： <body data-spy="scroll" data-target="#main-nav"><div data-spy="scroll" data-target="#subnav"> 但没有任何效果...... 我怎样才能实现这个目标？谢谢！好吧，我找到了一种方法来实现我想要的。如果我没有定义scrollSpy的目标，我的所有导航链接都会被考虑： $('body').scrollspy({target: ''}); 我知道，这个问题很老了，但这里是我对多目标滚动间谍的实现。就像这样使用它：<body data-multiple-spy="scroll" data-target="#bs-example-navbar-collapse-1,#features-navbar .navbar-collapse" data-offset="70"</body> 插件： +function ($) { 'use strict'; // Multiple SCROLLSPY CLASS DEFINITION // =================================== function MultipleScrollSpy(element, options) { this.$body = $(document.body) this.$scrollElement = $(element).is(document.body) ? $(window) : $(element) this.options = $.extend({}, MultipleScrollSpy.DEFAULTS, options) var target = (this.options.target || '').split(','); this.selector = target.map(function (s) { return s + ' .nav li > a' }) this.offsets = [] this.targets = [] this.activeTarget = [] this.scrollHeight = 0 this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this)) this.refresh() this.process() } MultipleScrollSpy.VERSION = '0.0.1' MultipleScrollSpy.DEFAULTS = { offset: 10 } MultipleScrollSpy.prototype.getScrollHeight = function () { return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight) } MultipleScrollSpy.prototype.refresh = function () { var that = this var offsetMethod = 'offset' var offsetBase = 0 this.offsets = [] this.targets = [] this.activeTarget = [] this.scrollHeight = this.getScrollHeight() if (!$.isWindow(this.$scrollElement[0])) { offsetMethod = 'position' offsetBase = this.$scrollElement.scrollTop() } for (var i = 0; i < this.selector.length; i++) { that.offsets[i] = []; that.targets[i] = []; this.$body .find(this.selector[i]) .map(function () { var $el = $(this) var href = $el.data('target') || $el.attr('href') var $href = /^#./.test(href) && $(href) return ($href && $href.length && $href.is(':visible') && [[$href[offsetMethod]().top + offsetBase, href]]) || null }) .sort(function (a, b) { return a[0] - b[0] }) .each(function () { that.offsets[i].push(this[0]) that.targets[i].push(this[1]) }) } } MultipleScrollSpy.prototype.process = function () { for (var k = 0; k < this.selector.length; k++) { var scrollTop = this.$scrollElement.scrollTop() + this.options.offset var scrollHeight = this.getScrollHeight() var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height() var offsets = this.offsets[k] || [] var targets = this.targets[k] || [] var activeTarget = this.activeTarget[k] var i if (this.scrollHeight != scrollHeight) { this.refresh() } if (scrollTop >= maxScroll) { return activeTarget[k] != (i = targets[targets.length - 1]) && this.activate(k, i) } if (activeTarget && scrollTop < offsets[0]) { this.activeTarget[k] = null return this.clear(k) } for (i = offsets.length; i--;) { activeTarget != targets[i] && scrollTop >= offsets[i] && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1]) && this.activate(k, targets[i]) } } } MultipleScrollSpy.prototype.activate = function (index, target) { this.activeTarget[index] = target this.clear(index) var selector = this.selector[index] + '[data-target="' + target + '"],' + this.selector[index] + '[href="' + target + '"]' var active = $(selector) .parents('li') .addClass('active') if (active.parent('.dropdown-menu').length) { active = active .closest('li.dropdown') .addClass('active') } active.trigger('activate.bs.scrollspy') } MultipleScrollSpy.prototype.clear = function (index) { $(this.selector[index]) .parentsUntil(this.options.target, '.active') .removeClass('active') } // MULTIPLE SCROLLSPY PLUGIN DEFINITION // ==================================== function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.scrollspy') var options = typeof option == 'object' && option if (!data) $this.data('bs.scrollspy', (data = new MultipleScrollSpy(this, options))) if (typeof option == 'string') data[option]() }) } var old = $.fn.multipleScrollspy; $.fn.multipleScrollspy = Plugin; $.fn.multipleScrollspy.Constructor = MultipleScrollSpy; // MULTIPLE SCROLLSPY NO CONFLICT // ============================= ($.fn.multipleScrollspy || {}).noConflict = function () { $.fn.multipleScrollspy = old return this } // MULTIPLE SCROLLSPY DATA-API // =========================== $(window).on('load.bs.scrollspy.data-api', function () { $('[data-multiple-spy="scroll"]').each(function () { var $spy = $(this) Plugin.call($spy, $spy.data()) }) }) }(jQuery); 还有一个非常古老的问题的答案。我的网站左侧显示一个垂直导航栏，对于宽屏，#navbar 很宽，包含图标和文本，它使用 ScrollSpy 来突出显示您当前滚动到的部分。对于较小的屏幕，#navbar-small仅是图标，没有文本，因此它更窄，它是使用引导断点来实现的，当屏幕较宽时隐藏小栏，反之亦然。使用MutationObserver（当这个问题最初发布时，它要么不可用，要么非常闪亮），你可以设置一个回调，以便在目标节点和可选的子节点发生变化时运行，所以我的解决方法是针对广泛的#navbar 是我网站上 ScrollSpy 的目标，然后根据需要使用其更改将 active 类添加/删除到我的 #navbar-small 元素子元素（我实际上只是复制 #navbar 中的所有类属性）到 #navbar-small 因为对我来说它们是相同的）。所以我的解决方案： // Make this function do whatever logic you need it to do, I'm lucky that I just // want to copy the exact same classes from #navbar's children to // #navbar-small's children. // const duplicateScrollSpyNavActive = function () { let navbarSmallLinks = document .getElementById("navbar-small") .getElementsByClassName("nav-link"); for (let link of navbarSmallLinks) { link.setAttribute( "class", document .getElementById(link.getAttribute("id").replace("small-", "")) .getAttribute("class"), ); } }; // This is the mostly generic part, just make duplicateScrollSpyNavActive above // do whatever you want for your use-case. window.addEventListener("load", function (event) { // // Make target be the element id that is the same as `data-bs-target` in your // HTML // const targetNode = document.getElementById("navbar"); // We only really care about the active class being added or removed so we // can just filter for "class" but we need subtree to be true so we can // detect changes on the children (the actual links that get highlighted). // const options = { subtree: true, attributeFilter: ["class"] }; const observer = new MutationObserver(duplicateScrollSpyNavActive); observer.observe(targetNode, options); });

jquery twitter-bootstrap multiple-instances scrollspy

回答 3 投票 0

为什么我的模态背景位于模态之上？

下面您会发现模态的指定 z 索引高于模态背景的 z 索引的情况。尽管如此，在很多情况下背景会位于模态之上......

html css twitter-bootstrap z-index

回答 1 投票 0

引导进度条没有进度

引导进度条在我的 MVC 索引视图上不起作用。我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "首页"; } 引导进度条在我的 MVC 索引视图上不起作用。我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <div class="progress-bar progress-striped "></div> </div> </div> 本次聚会迟到了，但在我使用的 Bootstrap 版本（v3.1.1）中，该类是“progress-striped”（不是像文档所说的“progress-bar-striped”），并且它和“active” ' 类必须应用于外部 div: <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div> </div> 查看 CSS，选择器“progress-bar”已更改为“bar”： ./bootstrap.css: .progress { ... } .progress .bar { ... } 因此，将您的代码更改为 <div class="progress"> <div class="bar"> </div> </div> 然后就可以了。不确定这种疯狂的原因是什么，似乎引导文档还没有更新。 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 这样进度动画就可以工作了。 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？如果您使用 Bootstrap v4 并且需要动画，则需要使用 progress-bar-animated 而不是 active。

twitter-bootstrap twitter-bootstrap-3

回答 5 投票 0

根据图像数据创建背景渐变

我用引导卡制作了一个优雅的图像加载器，它在加载图像时在背景中显示渐变填充。图像加载后就会淡入。渐变颜色是...

twitter-bootstrap lazy-loading linear-gradients

回答 2 投票 0

PHP 与 Bootstrap 轮播

我正在尝试学习 PHP 并将其与我的网站的 Bootstrap 库一起使用。我希望使用引导程序轮播，如此处所示我想要实现的是带有标题的轮播和

php html twitter-bootstrap

回答 5 投票 0

Javsacript：根据图像数据创建背景渐变

我用引导卡制作了一个优雅的图像加载器，它在加载图像时在背景中显示渐变填充。图像加载后就会淡入。渐变颜色很...