Как редактировать переменные и компилировать.less с помощью Bootstrap в Yii Framework?

Я использую php Framework Yii и хочу использовать его в сочетании с Twitter Bootstrap Framework.

Я сделал точно такие же шаги, как здесь: http://www.cniska.net/yii-bootstrap/setup.html для его настройки.

Как я могу изменить значения по умолчанию для всех цветов и так далее? Я изменил его в "variables.less", и он успешно скомпилировал даже bootstrap.less и style.less, но ничего не изменилось.

Извините, что я такой новичок, но не могли бы вы сказать, какой файл мне нужно изменить и скомпилировать для изменения дизайна?

3 ответа

Решение

Предполагая, что меньшее количество файлов компилируется правильно, цвета должны меняться в скомпилированных файлах CSS. В этот момент вам нужно убедиться, что ваши HTML-файлы ссылаются на недавно скомпилированный CSS-файл.

Начиная с версии Yii-Bootstrap 1.2.0, файлы css берутся из пути / в папку / bootstrap-extension / assets / css /, поэтому любые изменения, которые вы вносите в базовые файлы .less, должны быть скомпилированы и сохранены в этой папке. Проверьте эту строку в источнике:

Yii::app()->clientScript->registerCssFile($this->getAssetsUrl().'/css/bootstrap.css');

Например:

  • Папка Css для расширения: имя проекта / защищенный / extensions / bootstrap / assets / css /
  • База .less файлов в имени проекта / защищенные / расширения / bootstrap / lib / bootstrap / less /
  • Внесите изменения в имя проекта / protected / extensions / bootstrap / lib / bootstrap / less / variables.less:

    @white:                 #ffe;// changed from #fff
    
  • Сделайте резервную копию оригинального bootstrap.css на всякий случай.

  • Скомпилируйте защищенный файл / extensions / bootstrap / lib / bootstrap / less / bootstrap.less.
    Пример (компиляция командной строки на стороне сервера и в папке имя проекта):

    $lessc protected/extensions/bootstrap/lib/bootstrap/less/bootstrap.less > protected/extensions/bootstrap/assets/css/bootstrap.css
    
  • Очистите кеш в браузере, обновите, чтобы увидеть изменения.

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

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

Другие вопросы по тегам