正文 

当前位置： 首页 > 知识 >

Bootstrap 5 工具提示、弹出框和 toast 在 Ruby on Rails 6 中不起作用

     2023-02-15     161

关键词：

【中文标题】Bootstrap 5 工具提示、弹出框和 toast 在 Ruby on Rails 6 中不起作用【英文标题】：Bootstrap 5 tooltip, popover and toasts not working in Ruby on Rails 6 【发布时间】：2021-02-22 22:15:42 【问题描述】：

我正在使用 Railsbytes 脚本安装 bootstrap 5 alpha； https://railsbytes.com/public/templates/VB0s5v.

但是，我无法使用任何工具提示和弹出框。甚至不确定我应该把脚本放在哪里，或者我是否必须添加任何东西才能启用它们。任何人都请如此友善并提供一些指导。非常感谢！

/雅各布

我怀疑我需要根据https://v5.getbootstrap.com在某处添加的js示例：

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) 
return new bootstrap.Tooltip(tooltipTriggerEl)
)

【问题讨论】：

【参考方案1】：

我也为此苦苦挣扎，但现在已经让他们工作了。这是我让 Bootstrap5 与 Rails6 一起工作的工作流程。

yarn add bootstrap@next yarn add @popperjs/core 创建文件app/javascript/stylesheets/application.scss 我将在其中添加自定义css 将以下内容添加到新文件的顶部： 
# app/javascript/stylesheets/application.scss

@import "bootstrap"
为了让应用程序从 javascripts 文件夹中导入您的自定义 css，请将以下内容添加到您的应用程序布局文件中添加 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>。 pack_tag 表示这将由 webpacker 处理。布局文件将如下所示： 
# app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
最后为了让一切正常工作，将以下内容添加到 app/javascript/packs/application.js 的底部 
# app/javascript/packs/application.js

import * as bootstrap from 'bootstrap'
import "../stylesheets/application"

document.addEventListener("DOMContentLoaded", function(event) 
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) 
    return new bootstrap.Popover(popoverTriggerEl)
  )

  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) 
    return new bootstrap.Tooltip(tooltipTriggerEl)
  )
);

作为测试，我随后将以下 Bootsrap 组件添加到我的主页（或任何要测试的页面）：

# index.html.erb

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

【讨论】：

哦，谢谢！ :)

bootstrap这两个东西能实现这个效果么

...提示框，自然能给用户很好的页面体验。前面几章介绍了bootstrap的几个常用组件，这章来看看bootstrap里面弹出框和提示框的处理。总的来说，弹出提示主要分为三种：弹出框、确定取消提示框、信息提示框。本篇就结合这三种类... 查看详情

bootstrap弹出框和警告框插件

一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的容器。//基本用法<buttonclass="btnbtn-lgbtn-danger"type="button"data-toggle="popover"title="弹出框"data-content="这是一个弹出框插件">点击弹出/隐藏弹出框</button>  <scr... 查看详情

Twitter Bootstrap 弹出框和 AJAX

】TwitterBootstrap弹出框和AJAX【英文标题】：TwitterBootstrapPopoverandAJAX【发布时间】：2013-01-2202:18:08【问题描述】：我一直在浏览SO以获取有关如何在引导弹出窗口上加载ajax内容的解决方案，但找不到任何合适的解决方案。这是我目... 查看详情

Twitter Bootstrap 弹出框/工具提示错误与移动设备？

】TwitterBootstrap弹出框/工具提示错误与移动设备？【英文标题】：TwitterBootstrapPopover/TooltipBugwithMobile?【发布时间】：2012-05-0714:01:58【问题描述】：我正在使用TwitterBootstrap，但在iPad和iPhone上进行测试时遇到了一些我无法修复的问... 查看详情

正常的 Bootstrap 弹出框和 Angular 应用程序在一页中 - 弹出框不起作用

】正常的Bootstrap弹出框和Angular应用程序在一页中-弹出框不起作用【英文标题】：NormalBootstrapPopoverandAngularappinonepage-Popovernotworking【发布时间】：2021-07-2022:12:32【问题描述】：我有一个web项目，我在其中使用引导主题和jquery进行... 查看详情

bootstrap--插件:提示工具弹出框警告框消息(代码片段)

Bootstrap--插件:提示工具、弹出框、警告框消息1.提示工具（Tooltip）插件：根据需求生成内容和标记。使用提示工具：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>MyTestbootstrap<... 查看详情

如何使用 Twitter Bootstrap 中的弹出框显示图像？

】如何使用TwitterBootstrap中的弹出框显示图像？【英文标题】：HowdoIusepopoverfromTwitterBootstraptodisplayanimage?【发布时间】：2012-06-1923:49:24【问题描述】：TwitterBootstrap弹出框功能的典型示例是带有标题的类固醇工具提示。HTML：<ahref=... 查看详情

弹出框popover.js

...弹出框依赖 工具提示插件 ，因此，如果你定制了Bootstrap，一定要注意将依赖的插件编译进去。初始化由于性能的原因，工具提示和弹出框的data编程接口（dataapi）是必须要手动初始化的。在一个页面上一次性 查看详情

如何使用 jQuery 使用 bootstrap 5 弹出框？

】如何使用jQuery使用bootstrap5弹出框？【英文标题】：Howtousebootstrap5popoverusingjQuery?【发布时间】：2021-09-0200:08:10【问题描述】：我想使用jQuery在popover中显示一个div内容。在Bootstrap3中它工作正常。但在BS-5中它不起作用。这是我的... 查看详情

Angular UI-Bootstrap 弹出框可拖动

】AngularUI-Bootstrap弹出框可拖动【英文标题】：AngularUI-Bootstrappopoverdraggable【发布时间】：2017-06-1012:26:37【问题描述】：我正在使用AngularUI-Bootstrappopover并希望使用jQuery-UIdraggable使其可拖动。这一切都按预期工作，但我遇到了UI-Boot... 查看详情

弹出框可编辑工具提示

】弹出框可编辑工具提示【英文标题】：Popovereditablefortooltip【发布时间】：2017-02-0812:57:06【问题描述】：我是Angularjs和引导程序的新手。我有一个要求，我需要在悬停或单击时实现弹出框，并且用户应该能够编辑工具提示。你... 查看详情

弹出框和 Xamarin iOS

】弹出框和XamariniOS【英文标题】：PopoversandXamariniOS【发布时间】：2016-05-0914:33:07【问题描述】：我在使用Popover的XamariniOS实现时遇到问题。就我现在而言，它们可以通过Apple文档(https://developer.apple.com/library/ios/documentation/UIKit/Refere... 查看详情

bootstrap弹出框bootboxjs

官网bootstrap的弹出框1<html>2<head>3<metacharset="utf-8">4<metaname="viewport"content="width=device-width,initial-scale=1">5<metahttp-equiv="X-UA-Compatible"content="IE=edge">6 查看详情

带有弹出框/工具提示的 R Shiny valueBox

】带有弹出框/工具提示的RShinyvalueBox【英文标题】：RShinyvalueBoxwithpopover/tooltip【发布时间】：2020-10-1902:16:06【问题描述】：我尝试从shinydashboard为valueBox制作弹出框/工具提示，但到目前为止没有任何效果。我尝试使用shinyBS，例如... 查看详情

bootstrap之javascript插件---弹出框（模态框）modal

简介：　　弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单内容。完整结构分析（可以没有头部和底部）：代码示例：<!--弹出框的头部--><divclass="modalfade"><divclass="modal-dialog"><divclass="modal-c... 查看详情

bootstrap的表单验证的弹出框是怎么实现的

这个和bootstrap没有关系,是html5<form>的一个特性<form><inputtype="email"placeholder="Email"required><inputtype="password"placeholder="Password"required><inputpattern=".5,"requiredtitle="3charactersminimum"><inputtype="submit"></form>如果form内... 查看详情

iPad 故事板应用程序 - 弹出框和模态代表

】iPad故事板应用程序-弹出框和模态代表【英文标题】：iPadstoryboardapp-popoverandmodaldelegates【发布时间】：2013-01-1808:32:18【问题描述】：我是iOS开发的新手，我正在编写我的第一个iPad应用程序。我有3个问题：1)我注意到有一个用于... 查看详情

离子应用程序在弹出框和模式关闭后冻结或停止工作

】离子应用程序在弹出框和模式关闭后冻结或停止工作【英文标题】：Ionicappfreezesorstopsworkingafterpopoverandmodalcloses【发布时间】：2016-11-0816:18:01【问题描述】：我有一个具有侧边菜单、弹出窗口和模式的ionic应用程序。在一个页面... 查看详情