如何向 ionic 4 应用程序添加和使用 bootstrap?

2024-04-17

我正在构建一个 ionic 4 应用程序,我想使用 bootstrap 而不使用 CDN 方法。我已经使用 npm install bootstrap 安装了 bootstrap。


在 Ionic 4 中,可以通过使用 angular.json 文件轻松完成此操作

打开 Angular.json文件,它可以位于项目的根目录下

找到 styles 数组,添加下载的 bootstrap 文件的路径

"styles": [
          {
            "input": "src/theme/variables.scss"
          },
          {
            "input": "src/global.scss"
          },
          {
            "input": "node_modules/bootstrap/dist/css/bootstrap.min.css"
          }
        ],

如果您希望使用引导脚本,请将引导脚本也添加到脚本数组中。

请注意:为了使用引导脚本,还需要将 jquery 和 popper.js 添加到您的项目中

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何向 ionic 4 应用程序添加和使用 bootstrap? 的相关文章

  • 在移动浏览器中隐藏导航栏

    我正在使用 Twitter Bootstrap 制作一个移动响应网站 当在移动设备上查看网站时 我想完全隐藏顶部导航栏 有人知道如何做到这一点吗 最简单的方法是使用响应式实用程序类 hidden phone and hidden table
  • Twitter Bootstrap 的 Tab 插件中的“data-api”是什么意思

    有一段代码如 TAB DATA API function body on click tab data api data toggle tab data toggle pill function e e preventDefault thi
  • 添加取消上传或中止功能以引导多个文件上传插件

    我在用引导多文件上传插件 http blueimp github io jQuery File Upload basic html上传文件 我正在使用此链接上的示例 现在我想在 添加文件 按钮之外添加另一个按钮 取消上传 单击 取消上传 按
  • Bootstrap 3 网格,一行中有多少列“真的”重要吗?

    我有一个表单布局 上面有 Bootstrap 3 表单组 我希望这些表单组在 我显然让它工作得很好 但是在这里阅读了一些内容后 我所做的似乎违反了假设的规则 即一行中的每一列加起来必须等于 12 但是我能找到的每个教程和文档总是使用诸如 应
  • 角度模态弹出窗口中的范围问题

    我的页面上有一个模式弹出窗口 模式弹出窗口使用引导角度库 在模式的主体内部 我有一个带有 ng model 属性的文本框 按下 确定 按钮后 我想使用该文本框值
  • Ionic Cordova Build Android 未找到已安装的构建工具

    我在 Ubuntu 16 04 上的 Android 上构建 ionic 应用程序时遇到问题 这是我为了实现这一目标所做的一步 下载Android Studio 下载Android SDK 在 bashrc 和 bash profile 中
  • 获取无法使用引导轮播脚本读取未定义的属性“offsetWidth”

    我创建了一个carousel with Bootstrap 3 3它可以在我的本地计算机上运行 但是当我将整个内容上传到服务器上时 其中引导程序js文件与单个文件中的其他文件一起编译 我收到此错误 Cannot read property
  • Ionic 应用程序中未显示图标

    我遇到了 Ionic 图标的问题 我正在使用 Ionic 4 和 Angular 8 尝试添加二维码图标 但没有成功 我正在使用离子文档 https ionicons com https ionicons com
  • 如何将 Bootstrap 3 轮播标题移动到图像下方?

    我有这个 html 使用 bootstrap 3 显示幻灯片图像 div class col sm 8 div class carousel slide ol class carousel indicators li class activ
  • 循环浏览 Bootstrap 3 jumbotron 的背景图像

    我正在尝试获取 3 个图像作为 Bootstrap 3 jumbotron 的背景循环播放 但问题是我在大屏幕中有 3 个 div 到目前为止我尝试过的所有解决方案都要求我将大屏幕的位置更改为相对位置 将背景图像更改为绝对位置 而且因为我试
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • Bootstrap 3 在移动设备上滑入菜单/导航栏 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我正在构建一个基于浏览器的移动应用程序 我决定使用 Bootstrap 3 作为设计的 CSS 框架 Bootstrap
  • 带圆角边框的 Div

    我不明白获得 div 的更大圆角底部边框的公式 以及是否有更简单的方法在 Bootstrap 中实现它 现在是这样的 以及我想如何开发它 header background color blue height 40px width 90px
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • 使用 NPM 安装 Bootstrap 4 alpha [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 如何使用 NPM 专门安装 Bootstrap 4 Alpha 使用npm install boots
  • angular.js ui + bootstrap typeahead + 异步调用

    我将 typeahead 与 angular js 指令一起使用 但填充自动完成的函数进行了异步调用 我无法返回它来填充自动完成 有没有办法让它与这个异步调用一起工作 我可以假设您正在使用 Bootstrap 2 x 的 typeahead
  • 如何使弹出窗口出现在我的鼠标进入悬停目标的位置?

    这是一个示例代码 用于显示我的按钮下方的弹出窗口 fn popover defaults extend fn tooltip defaults placement bottom content 现在我希望弹出窗口出现在光标移动的位置 不仅是
  • 如何使引导日期选择器只读?

    我正在努力创建嵌入式 内联日期选择器 它不可点击 它应该只显示日期 表现为只读 我正在做的是用模型中选定的日期填充日历 然后我尝试使其不可点击 这样用户就不会认为他可以编辑任何内容 我正在使用 eternicode bootstrap da
  • Twitter bootstrap:居中缩略图

    我有一个缩略图列表 它们有固定的尺寸 我希望连续缩略图的数量随着窗口的宽度而变化 使用 Twitter Bootstrap 这很容易 http jsfiddle net charlesbourasseau 5WvAL http jsfidd
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2

随机推荐

  • 如何将网络音频流保存到文件(c++/java)

    是否有任何库或众所周知的方法来保存音频网络流 网络广播 mp3 流 以编程方式归档 您可以使用 libvlcVLC http www videolan org vlc 项目 这wiki http wiki videolan org Libv
  • 策略模式和访客模式有什么区别?

    我很难理解这两种设计模式 您能否给我上下文信息或示例 以便我可以得到清晰的想法并能够映射两者之间的差异 Thanks The 策略模式就像一个1 many关系 当存在一种类型的对象并且我想对其应用多个操作时 我使用策略模式 例如 如果我有一
  • mojoPortal 还是 Umbraco?

    我已经寻找免费 开源 ASP NET CMS 门户系统有一段时间了 并将其分为两个不同的系统 乌姆布拉科 http umbraco org http umbraco org 魔力门户 http www mojoportal com http
  • 如何让 ASP.NET DataPager 控件在 UpdatePanel 中工作?

    我有一个顶部有参数的搜索页面 底部有一个带有结果的搜索按钮 整个内容都包含在母版页内的更新面板中 单击搜索按钮后 它会显示第一页 但是 如果您单击 DataPager 上的下一个按钮 它不会显示第二页 它显示第二页没有结果 任何帮助将不胜感
  • C++ 和 Java 中异常处理的区别?

    在Java中 如果特定的代码行导致程序崩溃 那么异常就会被捕获并且程序会继续执行 但是 在 C 中 如果我有一段代码导致程序崩溃 例如 try int x 6 int p NULL p reinterpret cast
  • 如何测试子组件是否已渲染?

    在酶中 您可以检查子组件是否存在 如下所示 expect wrapper find ChildComponent toHaveLength 1 React 测试库中的这个测试相当于什么 我找到的所有在线示例都只涵盖了寻找 dom 元素的非常
  • REST API 与 Web API

    我是构建 HTTP API 的初学者 我似乎对 REST API 和 Web API 之间的区别感到困惑 我在网上读到更多相关内容 困惑似乎越来越多 我猜菲尔丁有与此链接相同的问题http roy gbiv com untangled 20
  • 如何获取引用 postgresql 中的表的物化视图

    在 postgresql 中 借助 information schema views 表 可以通过简单的 sql 获取引用表的所有视图 但我需要一个等效的 sql 来获取引用该表的物化视图 欲查看以下作品 SELECT FROM infor
  • 为什么这个slideUp功能不流畅?

    我想实现 jQuery 的普通 JS 版本slideUp and slideDown 功能 我的想法是使用 CSStransition为了height属性以及使用增加 减少高度requestAnimationFrame 我用下面的代码尝试过
  • Selenium WebDriverJS,无法为 Chrome 构建 webdriver

    我在设置 Selenium WebDriverJS 时遇到一些问题 我的目标是使用 Javascript 节点 在 Chrome 浏览器上运行 selenium 测试 我正在按照以下说明进行操作https code google com p
  • 我需要关闭“PreparedStatement”吗? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我有一个网
  • 如何从 Azure 云功能引用“可移植”.NET 程序集?

    我已通过 Nuget 和 project json 成功引用了一个 可移植 程序集 我的所有代码都在 Azure 函数中编译 但是当它运行时我得到 无法加载文件或程序集 System Net Version 2 0 5 0 Culture
  • 获取 v2 Google 地图 API 密钥

    看来在我的网站开发和上线 现在 之间 Google 已经逐步淘汰了 Google Maps v2 API 我完全支持进步 但重写我所有的地图代码似乎对我来说有点难以处理 是否仍然可以在网络的某个隐蔽角落获取 Google 地图 v2 API
  • Delphi组件spTbxToolbar换肤

    如何在运行时通过代码 不适用于 groupskintype 更改 sptbxtoolbar 组件的皮肤类型 您只能一次更改所有 SpTBXLib 组件的外观 使用此代码 SkinManager SetSkin Office 2007 Blu
  • 使用drawImage()在画布上输出固定大小的图像?

    我该如何使用drawImage 在a上输出全尺寸图像300px X 380px画布无论源图像大小如何 例子 1 如果有一个图像75px X 95px我希望能够将其绘制以适合300px X 380px帆布 2 如果有一个图像1500px X
  • 使用 CSS 扩展边框

    我一直在测试使用一些嵌套 div 扩展 投影边框的想法 下面有一个工作示例 基本上 我想要实现的是垂直和水平边框延伸到盒子外面 里面有内容 有点像起草的样子 如果可能的话 我希望它能够完全响应 在我的代码中 我设置了带有负边距的高度 以便获
  • 为桌面构建 flutter 应用程序

    我看到一些人成功地为除通常的 Android IOS 之外的其他操作系统构建了 flutter 应用程序 我的问题很简单 如何 目前为 mac windows 构建 flutter 应用程序的流程是什么 没有必要这样生产准备就绪 一些实验性
  • Pandas groupby 根据另一列中的值(0 或 1)选择最后一行或倒数第二行

    我有一个与客户的数据框 每个客户都有一些观察结果和变量 其中一些不再是客户 我的问题如下 我想按客户分组 如果客户仍然是客户 则选择最后一行 如果客户不再是客户 则选择倒数第二行 对于客户的所有观察 我有一个名为 churned 的列 如果
  • 获取 Android 操作系统中已注册的 Pending Intent 列表

    我注册了计划在给定时间执行的警报 并且根据计划列表的大小 可以有很多警报 但我有两个问题仍然不清楚 1 如何在操作系统中查询我注册的待处理意图 我需要这个来测试 我想要的伪代码是这样的 List
  • 如何向 ionic 4 应用程序添加和使用 bootstrap?

    我正在构建一个 ionic 4 应用程序 我想使用 bootstrap 而不使用 CDN 方法 我已经使用 npm install bootstrap 安装了 bootstrap 在 Ionic 4 中 可以通过使用 angular jso