Каков правильный способ настройки темы Bootstrap?

Question

Я хочу использовать тему Bootstrap, но мне нужно настроить ее. Каков правильный путь? Должен ли я создать новый CSS-файл для переопределения CSS по умолчанию?

Answer 1

Чтобы начать, я думаю, что есть два шага, основанные на вашем вопросе.

1. Погрузитесь в Bootstrap, документация действительно хорошая. Поэтому, прежде чем настраивать его, лучше понять, как это работает, по крайней мере, очень просто.

2. Возможно, самый простой способ настроить Bootstrap - это его собственный site. Там вы можете изменить такие вещи, как общие цвета, форма, выпадающие, навигационная панель и т.д.

Если у Вас есть конкретные вопросы по этому поводу, пожалуйста, дайте мне знать.

Answer 2

Возможно, вы захотите сохранить файлы начальной загрузки без изменений. Таким образом, вы можете обновить его до новой версии, если это необходимо.

Итак, правильный способ настройки - добавить свой собственный файл CSS (по крайней мере, во время разработки).

Answer 3

Я думаю, что лучший способ - создать новый главный файл CSS. Вы должны включить bootstrap.css и другие вещи, но редактирование в файле bootstrap CSS не может быть хорошей идеей.

Answer 4

Это полностью задокументировано. Я видел, вероятно, 30 способов сделать это. На сегодняшний день одно из самых элегантных и лучших решений, с которыми я столкнулся до сих пор, описано в this blogpost.

Точно такой же принцип применяется в this workflow. Просто другая настройка. Еще лучше, если вы хотите рассматривать Bootstrap как зависимость, не касаясь источника.

Answer 5

Я только что написал post о том, как я делал это в Udacity последние пару лет. Этот метод означал, что мы смогли обновить Bootstrap всякий раз, когда захотим, не имея конфликтов слияния, выкидывания работы и т. Д.

Публикация содержит более подробные примеры, но основная идея:

• Сохраните оригинальную копию бутстрапа и перезапишите его извне.
• Измените один файл (переменные bootstrap.less), чтобы включить свои собственные переменные.
• Сделайте свой файл сайта @include bootstrap.less, а затем ваши переопределения.

Когда приходит время обновить ваш бутстрап, вы просто замените оригинальную копию бутстрапа, и все будет работать.

Вот post с прохождением.

Пример кода на github: here.