正文 

当前位置： 首页 > 知识 >

将 Bootstrap 模板添加到 MeteorJS

     2023-03-08     40

关键词：

【中文标题】将 Bootstrap 模板添加到 MeteorJS【英文标题】：Add Bootstrap template to MeteorJS 【发布时间】：2013-02-17 12:49:38 【问题描述】：

我有一个来自 https://wrapbootstrap.com/ 的 Bootstrap 主题，我想在我的 MeteorJS 应用程序中使用它。问题是它有如下脚本标签：

<!--[if !lte IE 6]><!-->
    <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>

    script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
                                                                                    <!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
    <!--[if lt IE 9]> 
        <script src="js/include/selectivizr.min.js"></script>                   
    <![endif]-->

    <script src="js/libs/jquery.ui.touch-punch.min.js"></script>                <!-- REQUIRED:  A small hack that enables the use of touch events on mobile -->

添加到 MeteorJS 时不起作用。我知道标签不起作用，但是您如何将这个设计的页面适应 MeteorJS？

后期编辑：

我在上面添加了script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"&gt;&lt;/script&gt;。以上所有脚本都添加在&lt;body&gt; 中。 google.maps 库在 lib/main.js 中使用，它不适用于 MeteorJS，因为它引发了 ReferenceError。在 Meteor 之外它工作正常。

关于如何从引导模板添加 Google 地图脚本的任何想法？

后期编辑：

Bootstrap 模板有一个 lib/main.js 文件，它是最后一个导入的 javascript 文件。尽管如此，当我将它添加到 Meteor 时，它似乎正在运行，但在 UI 中看不到它的效果。例如，它执行$(".chzn-select").select2(); 这一行，但只有当我从控制台执行它时，我才能看到 UI 更改。该文件最后由 Meteor 加载。我也试过

function load_scripts() 
var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "lib/main.js";
    document.body.appendChild(script);


if (Meteor.is_client) 
    window.onload = load_scripts;

没有成功。

【问题讨论】：

【参考方案1】：

这些外部主题可能与流星包含的默认引导程序不兼容，因此您应该删除流星的引导程序包：

删除默认引导：

meteor remove bootstrap

添加您的主题：

将您的 css 文件放在项目的 css 目录中，例如 /client/css

将主题javascript文件放在/client/lib

不用担心脚本标签，或者链接它们中的任何一个或任何东西，meteor 应该会处理所有这些。

还有

Meteor 默认包含 JQuery，因此您不必担心将其包含在您的项目中。如果由于某些奇怪的原因您是流星项目可能没有使用它，请添加 jquery：

meteor add jquery

外部 API

例如 FB/Google Mapis API/跟踪脚本。像往常一样将它们添加到 html 文件的 &lt;head&gt; 部分。

希望你觉得这一切都很酷！

【讨论】：

我觉得它真的很酷:) 谢谢你的回答，它对我有部分帮助。现在，我被谷歌地图脚本困住了——你可以看看更新后的问题。 在 html 文件的 &lt;head&gt;&lt;/head&gt; 部分添加谷歌地图 api 它有效，但我已经更新了问题。即使现在不是完整的回复，我也会标记它。谢谢！ 这可能与添加文件的顺序有关，meteor 按文件名从 a-z 的顺序添加文件。调整文件名以匹配它们需要的顺序 所以我想把这个main.js重命名为zmain.js

Bootstrap：将 img 响应类添加到缩略图

】Bootstrap：将img响应类添加到缩略图【英文标题】：Bootstrap:addingimg-responsiveclasstothumbnail【发布时间】：2016-02-0810:10:28【问题描述】：我必须将img-responsive类添加到wordpress页面模板中的图像。我的文件名为single-product.php。这是我的... 查看详情

将 bootstrap.js 添加到 browserify？

】将bootstrap.js添加到browserify？【英文标题】：Addingbootstrap.jstobrowserify?【发布时间】：2014-05-2219:09:15【问题描述】：所以我想弄清楚如何做到这一点？我通过bower下载了bootstrap-sass并将bootstrapjavascript添加到shim中。有几件事让我很... 查看详情

使用 bootstrap-vue：如何将类添加到 b 分页组件中的页面按钮

】使用bootstrap-vue：如何将类添加到b分页组件中的页面按钮【英文标题】：Withbootstrap-vue:Howtoaddaclasstothepagebuttonsinab-paginationcomponent【发布时间】：2019-06-1209:20:22【问题描述】：假设我有一个.vue文件，我在我的vue组件中使用bootstrap... 查看详情

将图标添加到 Bootstrap 下拉菜单

】将图标添加到Bootstrap下拉菜单【英文标题】：AddingiconstoaBootstrapdropdown【发布时间】：2013-04-0303:54:54【问题描述】：我想在Bootstrap下拉菜单中为链接添加一些图标，使用如下代码：<ul><liclass="dropdown"><ahref="#"class="dropdo... 查看详情

sh将bootstrap添加到项目中(代码片段)

查看详情

如何将 bootstrap 和 jquery 包含到 vue webpack-simple 模板中？

】如何将bootstrap和jquery包含到vuewebpack-simple模板中？【英文标题】：Howincludebootstrapandjquerytovuewebpack-simpletemplate?【发布时间】：2018-06-1306:35:35【问题描述】：我需要在我的vue应用上使用bootstrap3。我做以下事情：vueinitwebpack-simplenpmi... 查看详情

如何将 Bootstrap 4 添加到库 django-summernote？

】如何将Bootstrap4添加到库django-summernote？【英文标题】：HowcanIaddBootstrap4tothelibrarydjango-summernote?【发布时间】：2018-09-2119:33:27【问题描述】：我需要将Bootstrap4添加到django-summernote。这可能吗？【问题讨论】：【参考方案1】：Django... 查看详情

Bootstrap - 如何将徽标添加到导航栏类？

】Bootstrap-如何将徽标添加到导航栏类？【英文标题】：Bootstrap-Howtoaddalogotonavbarclass?【发布时间】：2015-04-0603:57:51【问题描述】：我想在导航栏品牌的顶部导航栏中添加一个徽标。我希望它与视口大小一起缩放，所以我使用img-res... 查看详情

ngx bootstrap popover 将 html 字符串创建移动到 HTML 模板文件

】ngxbootstrappopover将html字符串创建移动到HTML模板文件【英文标题】：ngxbootstrappopovermovethehtmlstringcreationtoHTMLtemplatefile【发布时间】：2018-02-1203:43:09【问题描述】：我正在使用ngxbootstraphttp://valor-software.com/ngx-bootstrap/#/popover#popover-dir 查看详情

将 Bootstrap Glyphicon 添加到输入框

】将BootstrapGlyphicon添加到输入框【英文标题】：AddBootstrapGlyphicontoInputBox【发布时间】：2013-09-2105:58:44【问题描述】：如何在文本类型输入框中添加字形图标？例如，我想在用户名输入中包含“icon-user”，如下所示：【问题讨论... 查看详情

使用 jQuery 将幻灯片动态添加到 Bootstrap 3 轮播

】使用jQuery将幻灯片动态添加到Bootstrap3轮播【英文标题】：AddslidestoBootstrap3carouseldynamicallyusingjQuery【发布时间】：2014-08-0209:00:25【问题描述】：我正在尝试使用jQuery将幻灯片添加到Bootstrap轮播，但它没有充当浏览器中的滑块。... 查看详情

将图像添加到 Bootstrap 卡体移动响应问题

】将图像添加到Bootstrap卡体移动响应问题【英文标题】：AddingImagetoBootstrapcard-bodymobileresponsiveproblem【发布时间】：2021-10-0721:10:55【问题描述】：我有一张底部有图片的bootstrap卡片。我的代码还使用AngularJS和ASP.net。当页面变得足... 查看详情

将 Bootstrap 添加到 Inbulit 登录视图 Django

】将Bootstrap添加到Inbulit登录视图Django【英文标题】：AddBootstraptoInbulitLoginViewDjango【发布时间】：2018-04-2221:55:38【问题描述】：我使用默认视图来记录用户。所以我没有为它制作任何模型表单。所以我无法为输入字段（即用户名... 查看详情

如何动态地将选项添加到 Bootstrap 选择器？

】如何动态地将选项添加到Bootstrap选择器？【英文标题】：HowcanIaddoptionstoaBootstrapselectpickerdynamically?【发布时间】：2021-02-1914:58:09【问题描述】：我正在尝试创建一个下拉列表，当单击第一个列表项时，会在列表旁边打开一个与... 查看详情

我无法将数据添加到 bootStrap 数据表

】我无法将数据添加到bootStrap数据表【英文标题】：ican\'tadddatatobootStrapdatatables【发布时间】：2020-01-0409:05:08【问题描述】：我需要有关引导数据表的其他数据，并且我尝试了很多时间。数据类型为JSON对象，来自servlet页面JSONArra... 查看详情

将 Bootstrap 弹出框添加到特定的 div 元素

】将Bootstrap弹出框添加到特定的div元素【英文标题】：AddBootstrappopovertoaspecificdivelement【发布时间】：2017-11-1109:57:16【问题描述】：我正在尝试将引导弹出窗口添加到包含任意内容的div元素中（但我想出的方法不起作用）：<divi... 查看详情

如何将过滤器添加到 ngx-bootstrap 分页？

】如何将过滤器添加到ngx-bootstrap分页？【英文标题】：Howtoaddfiltertongx-bootstrappagination?【发布时间】：2018-11-0623:48:21【问题描述】：这段代码是关于ngx-bootstrap分页的。我要在这里面搜索项目。<tableclass="tabletransactionhistory_table"id... 查看详情

如何动态地将数组添加到 react-bootstrap 表中？

】如何动态地将数组添加到react-bootstrap表中？【英文标题】：HowdoIdynamicallyaddanarraytoareact-bootstraptable?【发布时间】：2017-09-0104:00:08【问题描述】：我有一个React组件，它将根据来自Ajax调用的数据呈现一个表。可能只有一行数据，... 查看详情