css - 将 Bootstrap 4 添加到 Slate V1 - 在 Chrome 开发人员工具中获取两个索引
问题描述
我是 Web 开发的新手。我之前做过一些开发,但没有关于 Web。
我了解 CSS 是什么、Javascript 做什么以及基本 HTML 的基础知识。
我已经安装了 Slate,我已经下载了 Bootstrap 4 文件并将它们添加到我在 theme.scss.liquid 文件下生成的新 slate 主题中。我已经按照此处的另一个线程中的说明单独添加了每个 _.scss。
但是,当我这样做时,一些样式停止工作,我注意到当(在 chrome 上)我转到 View->Developer->Developer tools 时有两个“索引”。
2个问题
1)我假设加载了第二个“索引”,这就是我的样式被忽略的原因。第二个索引将如何或从何处加载?
2) 我假设 slate V1 附带一些它自己的样式。添加 bootstrap 4 scss 是否会与此冲突,因此我是否需要删除一些 slate v1 样式或配置?
谢谢,我意识到这可能是一个松散的问题,需要我进一步理解。
干杯
克里斯
解决方案
Slate附带了一个 scss 文件的骨架和一个(非常)稀疏的样式表,以向您展示文件夹结构的外观。如果您是新手并且只是想使用 bootnap,请尝试将 cdn 版本添加到theme.liquid
并开始为您的html
每个https://getbootstrap.com/添加标记
只是 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>
推荐阅读
- python - 使用递归时返回无的函数
- javascript - S3 JS SDK copyObject 403 禁止
- excel - 句子标点返回 True-Spacy
- java - CompletableFuture with Runnable-delegation - 在委托类中忽略异常
- ruby-on-rails-5 - 嵌套设计用户的显示路径助手
- sql - 从组中选择最近的日期
- javascript - 网站启动时立即运行 iframe
- html - 为什么当我使用 svg 线时,我的 div 附近会出现一个未识别的段?
- javascript - 如何在另一个调用 this.setState() 的函数内部的函数中访问组件的状态?
- oauth-2.0 - 无头桌面客户端 Web 服务客户端应该是动态注册的 OIDC 客户端 - 还是其他?