Почему Bootstrap включает файл начальной загрузки?

Question

Вопрос такой же: How to use bootstrap-theme.css with bootstrap 3?, но не дубликат. Я взаимодействую с Bootstrap на уровне бездействия и перекомпилирую его каждый раз, когда я делаю изменения.

Как я уже сказал, я разрабатываю тему Bootstrap с less. Я редактирую биты здесь, меняя переменные. Вырезание неиспользуемых компонентов. Поместите большую часть моего нового CSS в /less/theme.less. В конце, я остался с двумя CSS-файлов: /dist/css/bootstrap.css и /dist/css/bootstrap-theme (Oh хорошо, да ... и их .min.css коллеги, вы педантичный knowitall)

Что такое точка расщепления этот выход на две отдельные файлы? Они оба отклонились от настроек «запаса» (просто изменение less/variables.less сделает это), так ли это не дублирование усилий? Разве это не дополнительный запрос, который мы (разработчики, которые думают, что они знают лучше всего) постоянно говорят, что юниорам следует избегать любой ценой?

При разработке пользовательского Bootstrap темы, это мои варианты:

1. Дитча включены theme.less и включает в свои изменения в основном Bootstrap сборке,
2. Alter ничего в ядре начальной загрузке сборки и отменяют вещи в моем theme.less,
3. Продолжите то, что я делаю, изменяя оба и используя два файла CSS.

Что мне делать и почему?

Относительно примечания, не следует ли строить Bootstrap из файлов, которые вы получаете, если вы нажмете Download Bootstrap? Оглядываясь назад, они, похоже, направлены на построение документации Bootstrap (там тонна глупость Джекила, что я просто канава). Есть ли «чистая» версия Bootstrap, которая предназначена для людей, которые хотят настроить Bootstrap без документации?

Answer 1

Я начал ошибку на этом и получил this response:

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

Довольно жалкий ИМО, но это не мой проект. После часа прошу, я пошел с объединением первых двух вариантов. Я добавил следующее в последнюю строку bootstrap.less:

@import "theme.less"; 

Чтобы сделать эту работу в самом деле, есть несколько изменений требуется:

• Почистите Gruntfile прекратить строительство отдельной темы
• Удаление Bootstrap импорт из верхней части файла theme.less (вызывает цикл, если вы этого не сделаете)

Но выход, как хотелось бы. Один жир bootstrap.css файл и немного тоньше bootstrap.min.css файл.

Я все еще не чувствую, что взломать весь процесс сборки - это очень устойчивый метод использования Bootstrap в качестве темы для начинающих. Очень открыты для лучших решений.

---

В другом проекте я свалил окончательный импорт и я просто делал всю свою работу в bootstrap.less. Конечно, есть 50 строк наверху, которые являются нагрузкой для импорта шаблонов, но это означает, что я не перескакиваю между файлами почти так же. Я знаю, что все включено.

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

Answer 2

Bootstrap 3 взял подход, чтобы снять утомленный стиль со всех его компонентов. Это было связано с тем, что разработчикам приходилось писать стиль записи и добавлять свои собственные, что вызывало раздутый CSS. Гораздо лучше начать с плоского дизайна, который можно использовать в качестве основы и основываться на этом, как вы пожелаете.

Таким образом, входит theme.less, являющийся шаблоном. Это отправная точка для создания уникальной темы. Если вы включите его в свою сборку bootstrap.less, вы получите тему Bootstrap по умолчанию, которую мы все используем для просмотра (т. Е. Слегка поднятые кнопки, градиенты и т. Д.). Это в сочетании с вашим файлом variables.less дает вам полный контроль над стилем презентации вашего пользовательского интерфейса.

Типичным рабочим процессом для использования Bootstrap с LESS является его использование с помощью Bower. Сайт Bower объяснит, как установить беседку с npm. Предположим, что у вас установлена ​​панель, используйте приложение командной строки по выбору и cd into/your/root/path/. Выполните следующие действия:

bower install bootstrap --save

Бауэр устанавливает все пакеты в каталог bower_components/. Вы никогда не будете изменять файлы, установленные Bower. Вы должны скопировать три файла из файлов Bootstrap LESS в свою собственную папку style. Это variables.less, bootstrap.less и theme.less. Вы можете проверить my repo, который я установил в качестве пристального внимания для всего этого.

bootstrap.less Файл, который вы скопировали, должен быть изменен, так что пути файлов для всех компонентов Bootstrap @import ссылаются на те, которые установлены Bower. Затем вы можете указать @import свои копии theme.less и variables.less в bootstrap.less. Внесите необходимые изменения и скомпилируйте свою тему.

Если вы хотите обновить bootstrap до последней версии, вы можете просто использовать bower для этого и внести любые изменения в свои скопированные файлы по мере необходимости, чтобы убедиться, что они соответствуют всем, что было изменено в новой версии.

Я надеюсь, что ответит на ваш вопрос.