将Bootstrap 4添加到Slate V1中-在Chrome开发者工具中获取两个索引

时间:2018-08-25 23:35:27

标签: css bootstrap-4 shopify slate

关于Web开发,我是个新手。我之前已经做过一些开发,但是没有涉及到Web。

我了解CSS的基本知识,JavaScript的功能以及基本的HTML。

我已经安装了Slate,并下载了Bootstrap 4文件,并将它们添加到在theme.scss.liquid文件下生成的新的slate主题中。我已按照说明分别在每个线程中添加了_.scss。

但是,当我这样做时,某些样式会停止工作,并且我注意到(在chrome上)当我转到View-> Developer-> Developer工具时有两个“索引”。

2个问题

1)我假设正在加载第二个“索引”,这就是为什么忽略我的样式的原因。第二个索引的加载方式或位置?

2)我认为slate V1带有自己的某些样式。会在此添加bootstrap 4 scss冲突,因此我是否需要删除某些slate v1样式或配置?

谢谢,我意识到这可能是一个松散的问题,需要我进一步了解。

欢呼

克里斯

1 个答案:

答案 0 :(得分:0)

Slate附带了scss文件的框架和一个(非常)稀疏的样式表,以向您展示文件夹结构的外观。如果您是新手,只是想使用Bootnap,请尝试将CDN版本添加到theme.liquid中,然后开始按https://getbootstrap.com/

向您的html添加标记

仅CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS,Popper.js和jQuery

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>