Tag: bootstrap 4

Bootstrap 4导航栏有两行，底行可折叠: 我希望2个导航栏显示在两个单独的行中，所有链接（可折叠项目）位于底部，顶部和标题和切换按钮位于顶行。像这样： —————————————————— ONE_________BIG_________TITLE [Toggle] —————————————————— Nav items Icon Links Forms … —————————————————— 顶行将在移动和桌面设备中展开，但切换按钮应隐藏在桌面上。底行将在桌面上展开，并在移动设备上折叠。通过将所有内容包装在一个div.navbar中并使用display：table定位和垂直对齐徽标/标题并相互切换，我能够在bootstrap 3中执行此操作。仅在桌面设备中，滚动后，我希望底行固定在顶部。我曾经在bootstrap 3中使用词缀来实现这一点，任何想法如何用新版本来做到这一点？同样在移动设备中，未折叠的顶行应固定在顶部。这是我的bootstrap 3代码： #navcollapse { top: 0; width: 100%; z-index: 10050; } @media (max-width: 767px) { #navcollapse { position: static; } } #topnavrow.affix { top: 0; width: 100%; z-index: 10050; } @media (min-width: 768px) { […]

通过Ajax加载内容后，Bootstrap Datatable不再起作用: 在有人说它是一个重复的问题之前，我知道它是。我只是没能找到任何看起来与我类似的脚本，因为我对JavaScript和JQuery（用于php）完全不熟悉我真的不知道我在做什么。我的数据表完美地使用php加载数据（在页面加载之前），但现在它在页面加载后加载，表已经丢失了所有的过滤和分页。这是我的表格加载方式。这是获取数据并将其放入表中的脚本。 //call ajax var ajax = new XMLHttpRequest (); var method = “GET”; var url = “data_assets.php”; var asynchronous = true; setInterval(function(){ ajax.open(method, url, asynchronous); //sending ajax request ajax.send(); }, 250) //receiving response from data_assets.php ajax.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { //convert JSON […]

在jQuery for Bootstrap iframe模式中提取发件人信息: 我试图在Bootstrap 4.0 Beta中以模态显示Google Map。我发现这篇文章和代码有效，但我在jQuery中不能“流利”地用Javascript做我需要做的事情。我也在这里看看如何找到发送者，但我无法弄明白。假设我的声明如下： Graceland Directions ……在我的，我设置了基本模态… × 我找到了这个答案，这正是我想要做的，但地址硬编码到示例中： // Bootstrap modal Google Map $(‘#google-map-modal’).on(‘shown.bs.modal’, (function() { console.log(“something happened”); var mapIsAdded = false; return function() { if (!mapIsAdded) { $(‘.modal-body’).html(‘Test’); mapIsAdded = true; } }; })()); // Bootstrap modal Google Map $(‘#google-map-modal’).on(‘shown.bs.modal’, (function() { console.log(“something happened”); var mapIsAdded = false; return […]

Angular / Boostrap – Navbar无法正常显示: 最近我在我的项目中添加了Bootstrap 4，jQuery和Popper，但问题是当我渲染我的网页时，它显示了这样的导航栏（它位于一个名为header的组件中）：我还加入了我的angular-cli.json： “styles”: [ “../node_modules/bootstrap/dist/css/bootstrap.min.css”, “styles.css” ], “scripts”: [ “../node_modules/jquery/dist/jquery.min.js”, “../node_modules/popper.js/dist/umd/popper.min.js”, “../node_modules/bootstrap/dist/js/bootstrap.min.js” ], HTML代码 My App/Logo with Text Nav 1 (current) Nav 2 Nav 3 dropdown Action 1 Action 2 Search

Bootstrap 4 – 在nav-link上删除活动类: 我正在使用具有活动类的nav-item创建Bootstrap 4 navbar 。我的问题是当我使用active类时，我无法从nav-item删除它如何删除nav-item上的活动类？这是我的HTML： LOGO BRAND Home (current) About us Services Dropdown Menu Glyphicons Available glyphs How to use Examples Dropdowns Example Aligninment options Headers Disabled menu items Button groups Basic example Button toolbar Sizing Nesting Vertical variation Button dropdowns Single button dropdowns Input groups Basic example Sizing Checkboxes and radio addons […]

使用JQuery的datepicker和bootstrap: 在我将bootstrap 4添加到我的jQuery项目之前，datepicker看起来像这样：在我添加bootstrap 4之后，datepicker看起来像这样：我假设它只是格式/大小已被更改。如何停止格式化过度并使其看起来像原始格式？我尝试了以下内容。使用jquery而不是$来调用datepicker 调用$.fn.datepicker.noConflict(); （根据jQuery ui datepicker与bootstrap datepicker的冲突，我似乎无法将noConflict应用于noConflictfunction，只能将jQuery作为一个整体）或者，我试图修复引导程序，使日历看起来更加正确，箭头按钮没有跳转。试图使用一个特定于bootstrap的日期选择器（虽然我不清楚哪个可以使用Bootstrap 4以及我是否可以使用beforeShowDay方法向它添加工具提示假期，这是我的应用程序的先决条件） HTML代码是这样的： Open Date: 谢谢

如何关闭Angular 4中的Accordion中的所有菜单: 我是角度4的新手，我在分类，组和子组的结构中有一个手风琴。如果我点击类别，它会显示其中的所有组，如果我点击了组，则会显示所有子组。现在一切正常。我想要做的是如果我再次点击类别，我想关闭之前打开的所有组的手风琴。在我的情况下，如果我打开了一些组并关闭了手风琴，那么如果我再次打开它会显示我之前打开过的组。我在stackblitz中复制了我的代码： https ：//stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-ghebrf ？ file = app / app.component.html 任何人都可以帮我解决它。

Bootstrap表单：如何为单选按钮动态创建唯一名称: 这个问题是对这个问题的后续问题。这个JSfiddle举例说明了我想要实现的目标。最终解决方案由@Scaramouche提供下面的function是动态建立一个“列表”，其中包含四个一组的单选按钮。这些组中的每一个都应具有唯一的名称，这使得可以选择其中一个选项，同时仍然可以在其他“组”中选择其他选项。这是一个挑战，因为这个“列表”是用Bootstrapforms构建的。我该怎么做，动态创建这些名称？这可以使用Vue或JavaScript（没有首选项）来完成。 JSfiddle上的 HTML Question: Enter avaible options: Add Question Save Test JavaScript的 $(“body”).on(‘click’, ‘#radioAddQuestion’, function () { let singleQuestionModule = “singleQuestionModule”; let question = $(“.module:first”).html(); let question_label = $(“.question-label:first”).html(); $(question_label).insertBefore(“.options-label”); $(question).insertBefore(“.options-label”); });

使最后一个动态增加的手风琴开放: 我正在尝试以编程方式添加bootstrap 手风琴，以便每次单击ADD按钮时，都会生成新的手风琴并且之前或任何其他手风琴关闭。我无法弄清楚如何使用方法和传递的选项的bootstrap文档，我已经放置了一些我的但是它不起作用。 if(this.aCount === 1){ $(‘.collapse’).collapse(‘hide’); }else if(this.aCount === 2){ $(‘.collapse’).collapse(‘hide’); $(‘.collapse’).collapse(‘show’); } 问题是我对手风琴的识别是动态的，所以我不能使用它，但总的来说我的脚本会生成3个手风琴，并且每次添加一个新的手风琴时，我想打开最近添加的一个并关闭任何打开的手风琴。现在它打开了第一个。

Bootstrap无法在Angular 6应用程序中运行: 我想在Angular 6应用程序中使用Bootstrap，这是我到目前为止所做的，但似乎没有任何结果： 1）使用npm安装bootstrap，jquery和popper.js。 2）在Angular.json文件中输入以下内容 “styles”: [ “src/styles.scss”, “node_modules/bootstrap/scss/bootstrap.scss” ], “scripts”: [ “node_modules/jquery/dist/jquery.slim.min.js”, “node_modules/popper.js/dist/umd/popper.min.js”, “node_modules/bootstrap/dist/js/bootstrap.min.js” … ] 我错过了什么。这似乎没有成功。