是否可以通过 shopify 中的脚本标签加载引导程序答案

【问题标题】：Is it possible to load bootstrap via script tag in shopify是否可以通过 shopify 中的脚本标签加载引导程序
【发布时间】：2016-07-28 06:56:01
【问题描述】：

我想在我的product.liquid 文件中添加一个进度条。

我正在通过脚本标记使用进度条的内联样式来完成。

var append='';
append +='<div style="'+divStyle+'"><center><p><span style="color: #000000;"><strong>HURRY! ONLY </strong>';
append +='<strong style="color: #ff0000;" id="left-item" class="left-item">'+ userVisit +'</strong><strong> LEFT IN STOCK.</strong></span></p><center>';
append +='<div style="background-color:#f5f5f5;border-radius:4px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset;height:20px;margin-bottom:20px;overflow:hidden;" id="style1" class="progress">';
append +='<div style="width: '+ barWidth+'%;animation: 2s linear 0s normal none infinite running progress-bar-stripes;background-color: #D9534F;background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size: 40px 40px;box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;color: #fff;float: left;font-size: 12px;height: 100%;line-height: 20px;text-align: center;transition: width 0.6s ease 0s;" aria-valuemax="'+ data['max_count']+'" aria-valuemin="'+ data['min_count']+'" aria-valuenow="'+ userVisit+'" role="progressbar" class="progress-bar progress-bar-danger progress-bar-striped active">';
append +='<span style="border: 0 none;clip: rect(0px, 0px, 0px, 0px);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;" class="sr-only">80% Complete (danger)</span></div></div></div>';

$(document).find('.progressBar').append(append);

我想加载引导程序来为我的进度条提供更多风格。有什么解决办法吗？

【问题讨论】：

标签： php jquery api shopify

【解决方案1】：

您的问题有点令人困惑。但是，您可以自然地将引导程序（CSS 文件和 JavaScript 文件）添加到您的 Shopify 主题中。

您可以将文件添加到您的主题中，也可以通过 Bootstrap 的 MaxCDN 直接链接文件。

以后的：

编辑主题时在布局内找到您的theme.liquid
确保在<head></head> 标签之间粘贴来自Bootstrap CDN 下方Bootstrap Getting Started 的代码sn-p。
保存，就是这样。

根据您的主题，您可能在不同的 sn-ps 上拥有大多数 CSS 和 JavaScript 文件（通常是 head-css、head-styles、head-js、head-scripts，但它们可以是任何东西）。随意跟随那个脚手架，把你的引导 CSS 和你的引导 JS 放在它们应该放在的地方。

【讨论】：