Добавление Bootstrap 4 в Slate V1 - получение двух индексов в Chrome Developer Tools - PullRequest
0 голосов
/ 26 августа 2018

Я новичок, когда дело доходит до веб-разработки.Я уже занимался разработкой, но не в отношении Web.

Я понимаю основы того, что такое CSS, что делает Javascript и базовый HTML.

Я установил Slate, и яЯ скачал файлы Bootstrap 4 и добавил их в новую тему сланца, созданную мной в файле theme.scss.liquid.Я добавил каждый _.scss в отдельности, как указано, чтобы сделать это в другом потоке здесь.

Когда я делаю это, однако, некоторые стили перестают работать, и я заметил, что есть два «индекса», когда (на Chrome) яперейдите в View-> Developer-> Developer tools.

2 вопроса

1) Я предполагаю, что загружается второй «индекс», поэтому мой стиль игнорируется.Как или откуда этот второй индекс будет загружен?

2) Я предполагаю, что шифер V1 поставляется с собственным стилем.Будет ли добавление в это столкновение начальной загрузки 4 scss, и поэтому мне нужно удалить некоторые стили или конфигурацию slate v1?

Спасибо, я понимаю, что это может быть бесполезным вопросом и требует дополнительного понимания с моей стороны.

Приветствия

Крис

1 Ответ

0 голосов
/ 26 августа 2018

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>
...