Переменная переопределение начальной загрузки с меньшим

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

Я вижу, что есть дружественная страница, доступная для выборочной настройки элементов из http://twitter.github.io/bootstrap/customize.html но я хочу иметь больше контроля, чем это, не касаясь исходных файлов начальной загрузки.

для начала, я в основном хотел чтобы проверить изменение сетки с 12 до 16 столбцов и сделать это, я создал свою собственную переменную less file и добавил @gridColumns:16; только в этот файл и импортировал этот пользовательский less внутри bootstrap.меньше следующим образом. 

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

затем, используя безвыигрышную я скомпилировал bootstrap.меньше файлов, чтобы получить новый bootstrap.css с переопределенным вызовом импорта переменных и связал css с файлом html, но сетка не изменится на 16 столбцов.

может кто-нибудь указать что я делаю не так?

4 65
global-variables twitter-bootstrap less.js customization

4 ответа:

я работаю над аналогичным проектом, где у нас есть bootstrap в "стороннем" месте, а затем переопределить только mixins.less и variables.less. Шаблон, который мы используем для этого, добавляет три файла и вообще не касается bootstrap (что позволяет вам легко заменять):

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

файл mixins

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

файл переменных, в котором вы бы переопределили сетки

/*
 *    /style/shared/variables.less
 */

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

@gridColumns: 16; // let's pretend this is your site-specific override

файл, который фактически импортируется (или подается через менее компилятор):

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

в моей настройке, если я это сделаю, я получаю файл css с некоторыми странными .значения span15 (так как я не обновлял @gridColumnWidth или @gridGutterWidth но .значения row-fluid на самом деле работают именно так, как вы ожидаете, поскольку они рассчитываются простым делением).

мне нравится эта настройка, потому что я могу cd в bootstrap-master и git pull и получать новые обновления без необходимости слияния любого из моих конкретных kludges (это также дает мне хорошую ручку на что я на самом деле переопределить)

другое дело, что это очень ясно, что общая.меньше только с помощью сетки.меньше (а не весь бутстрэп). Это намеренно, так как в большинстве случаев вам не нужно все bootstrap, только несколько его частей, чтобы начать работу. Большинство файлов bootstrap less по крайней мере хороши тем, что их единственными жесткими зависимостями являются shared.less и mixins.less

если это все еще не работает, то, возможно, WinLess запутывается

43

переопределение переменных после импорт изначальный bootstrap.less отлично работает для меня:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

компиляции указанного выше меньше источника выводит правильно настроенный код начальной загрузки CSS.

соответствующая информация:http://lesscss.org/features/#variables-feature-lazy-loading

148

еще один пример, который может кому-то помочь:

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';
1

простой способ-просто переопределить стили в вашем стиле doc, используя то же имя и пометив его как !важный.

-1