настройка начальной загрузки На 3 меньше вопросов о структуре проекта

Я прочитал следующую статью, в которой описывается хорошая структура проекта Bootstrap Less, которая позволяет настраивать загрузку без редактирования исходного кода. Но это для Bootstrap 2, я думаю:

http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/.

Мне очень нравится эта статья, в которой предлагается следующая структура для меньшего количества файлов.

1) Создайте свой собственный theme.less поверх файлов Bootstrap

2) Включите в вашу новую тему следующее:

 // importing all bootstrap.less files, leve them untouched, so you can update bootstrap
 @import “../bootstrap/less/bootstrap.less”;

 // this is copy of bootstrap variables.less with custom color scheme and other customizations
 @import “custom-variables.less”;

 // your own overrides anc custom classes
 @import “custom-other.less”;

 // utilities as the last
 @import “../bootstrap/less/utilities.less”;

Но поскольку я новичок в Bootstrap и Less, я не уверен, что это подходит для Bootstrap 3 на 100%.

1) Мои вопросы: подходит ли эта структура проекта для Bootstrap 3?

2) Я не понимаю, почему utilities.less должен быть повторно импортирован как последний файл (поскольку он уже импортирован в core bootstrap: bootstrap.less первый раз, а затем второй раз в theme.less)?

3) Bootstrap 2 имел файл responsive.less вместе с bootstrap.less. В Bootstrap 2 мне приходилось включать responsive.less отдельно, а в Bootstrap 3 — нет. Однако есть responsive-utilities.less, должен ли я включать его как последний файл после utilities.less?


css twitter-bootstrap project-structure
person renathy    schedule 08.11.2013    source источник
comment
Это умные цитаты?   -  person Mr Lister    schedule 08.11.2013

Ответы (2)


arrow_upward
5
arrow_downward

1) Мои вопросы: подходит ли эта структура проекта для Bootstrap 3?

Не совсем так, нужно изменить имена некоторых файлов и перестать импортировать utilities.less

2) Я не понимаю, почему utilities.less должен быть повторно импортирован как последний файл (поскольку он уже импортирован в core bootstrap: bootstrap.less первый раз, а затем второй раз в theme.less)?

В Bootstrap 2.X это имеет смысл, так как вы можете использовать определенные там функции, примеси и переменные.

3) Bootstrap 2 имел файл responsive.less вместе с bootstrap.less. В Bootstrap 2 мне приходилось включать responsive.less отдельно, а в Bootstrap 3 — нет. Тем не менее, есть responsive-utilities.less, должен ли я включать его последним файлом после утилиты.less?

Нет, в Bootstrap 3 вам не нужно импортировать responsive-utilities.less, так как он импортируется bootstrap.less и по умолчанию является мобильным.

Это структура, которую я использую для BS3:

@import "../bootstrap/less/bootstrap.less";
@import "variables.less";

//Here start customization and I can use my variables defined in @variables.less
@media (min-width: @screen-lg) {
    width: 30%;
}
person Tom Sarduy    schedule 08.11.2013

arrow_upward
0
arrow_downward

Но поскольку я новичок в Bootstrap и Less, я не уверен, что это подходит для Bootstrap 3 на 100%.

Прежде всего, Bootstrap сам по себе является фреймворком, вы не создаете его, а используете и вносите изменения или добавляете изменения в соответствии с вашими потребностями. Bootstrap 3 создан с нуля и в некоторых отношениях отличается от Bootstrap 2. Вы можете захотеть клонировать/разветвить начальную загрузку, чтобы изменить ее в соответствии с вашими потребностями. Вы можете прочитать об настройке Bootstrap3. Хотя настройка IMO v2 или v3 будет во многом аналогичной. Прочтите тред Stackoverflow, чтобы понять основные разница между двумя версиями.

1) Мои вопросы: подходит ли эта структура проекта для Bootstrap 3?

Структуру и порядок включения меньшего количества файлов можно найти в Github Source Если вы хотите настроить его, вы можете добавить ссылку на ваш файл less. Таким образом, ваши изменения будут включены в сгенерированный загрузочный CSS.

2) Я не понимаю, почему утилиты.less должны быть переимпортированы как последний файл (так как он уже импортирован в bootstrap.less)?

Из исходного кода (ссылка выше) я вижу, что он включен только один раз.

3) Bootstrap 2 имел файл responsive.less вместе с bootstrap.less. В Bootstrap 2 мне приходилось включать responsive.less отдельно, а в Bootstrap 3 — нет.

Bootstrap 3 основан на подходе Mobile first, что означает, что он адаптивен по умолчанию. В то время как в случае Bootstrap 2 требуется включить адаптивный CSS, если это необходимо.

Тем не менее, есть responsive-utilities.less, должен ли я включать его последним файлом после утилиты.less?

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

person ch4nd4n    schedule 08.11.2013
comment
Весь мой вопрос о настройке. утилита.less включена дважды, потому что здесь уже упоминается @import «../bootstrap/less/bootstrap.less»; (и это также написано в статье, которую я дал). Я не спрашиваю о том, подходит ли данная структура для настройки Bootstap 3. - person renathy; 08.11.2013
comment
@renathy: я уверен, что один из ваших вопросов касается подходит ли эта структура проекта для Bootstrap 3? - person Tom Sarduy; 08.11.2013