Советы по настройке Twitter Bootstrap [закрыто]


285

Я работаю с Bootstrap 2.0.3, используя LESS. Я хочу широко настраивать его, но я хочу избегать внесения изменений в источник, когда это возможно, поскольку изменения в библиотеках происходят часто. Я новичок в LESS, поэтому я не знаю, как полностью работает его компиляция. Каковы некоторые лучшие практики для работы с LESS или основанными на LESS средами?


Привет из будущего! «Лучшие практики» настройки начальной загрузки изменились в SASS на основе 3.x и 4.x: stackoverflow.com/a/50410667/171456
Zim

Ответы:


180

Мое решение аналогично jstam, но я избегаю внесения изменений в исходные файлы, когда это возможно. Учитывая, что изменения в начальной загрузке будут частыми, я хочу иметь возможность вытащить последний источник и внести минимальные изменения, сохранив мои изменения в отдельных файлах. Конечно, это не полностью пуленепробиваемое.

  1. Скопируйте bootstrap.less и variables.less в родительский каталог. Переименуйте bootstrap.less в theme.less или как хотите. Ваша структура каталогов должна выглядеть следующим образом:

    /Website            
         theme.less
         variables.less
         /Bootstrap
         ...
  2. Обновите все ссылки в theme.less, чтобы они указывали на подкаталог начальной загрузки. Убедитесь, что ваш переменный .less ссылается из родительского, а не из каталога начальной загрузки, вот так:

    ...
    // CSS Reset
    @import "bootstrap/reset.less";
    
    // Core variables and mixins
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc
    @import "bootstrap/mixins.less";
    
    // Grid system and page structure
    @import "bootstrap/scaffolding.less";
    @import "bootstrap/grid.less";
    @import "bootstrap/layouts.less";

    ...

  3. Добавьте свои CSS-переопределения в файл theme.less сразу после того, как они включены.

    ...
    // Components: Nav
    @import "bootstrap/navs.less";
    @import "bootstrap/navbar.less";
    
    // overrides
    .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
        border-radius: 0 0 0 0;
        padding: 10px;
    }
    
    .nav-tabs, .nav-pills {
        text-transform: uppercase;
    }
    
    .navbar .nav > li > a {
        text-shadow: none;
    }
    
    ...
  4. Ссылка на theme.less вместо bootstrap.less на ваших HTML-страницах.

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


Есть ли конкретная причина для № 3? Что произойдет, если все ваши пользовательские CSS появятся внизу после всех импортов, а не перемешиваются после каждого импорта?
AaronLS

2
@AaronLS: это тоже должно сработать. Я думаю, что номер 3 для того, чтобы держать это организованным.
Джонатан Литтке

@joelrodgers Почему mixins.less нельзя редактировать напрямую?
Джо Айзексон

Что вы думаете о включении пустого файла variable-custom.less (через @import) в bootstrap.less? Тогда каждый сможет настроить переменные Bootstrap по умолчанию и безопасно их обновить. В любом случае, я думаю, что эта функция обязательно должна быть включена в Bootstrap.
Адриенденат

36

Это то, с чем я тоже боролся. С одной стороны, я хочу сильно настроить файл variables.less с моими собственными цветами и настройками. С другой стороны, я хочу немного изменить файлы Bootstrap, чтобы облегчить процесс обновления.

Мое решение (на данный момент) состоит в том, чтобы создать дополнительный файл LESS и вставить его в bootstrap.lessфайл после того, как переменные и миксины были импортированы. Так что-то вроде этого:

...

// CSS Reset
@import "reset.less";

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

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

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


1
Хорошее решение Это именно то, что я сделал с некоторыми изменениями. Посмотри на мой ответ. Было слишком долго оставлять комментарии.
Джоэл Роджерс

Мне также нравится ваше решение, Джоэл. Хорошее разделение вашего кода и кода фреймворка.
jstam

Так как mixins ссылается на переменные, понадобится ли мне дополнительный custom-variables.less между переменными переменными. Так что я могу изменить переменные, такие как @baseFontSize. Я даже не знаю достаточно, чтобы знать, захлебнется ли я, объявив переменную с тем же именем снова.
AaronLS

Я обнаружил, что это наиболее полезное решение, потому что для каждой новой копии начальной загрузки нам просто нужно добавить еще одну строку bootstrap.less, захватывая наш настроенный файл VS, потенциально меняющий много строк, если изменяется ядро ​​без имен файлов и т. Д. Я использовал это решение, перекомпилировал мой минимизированный JS с помощью grunt и все хорошо в капоте! Настройки работают без каких-либо не дружественных !importantзаявлений!
Twknab

25

Со своей стороны, у меня просто есть файл с именем, в theme.lessкотором есть импорт boostrap.less, и чуть ниже я переопределяю (даже если это кажется плохим при использовании LESS, но хорошо, проще поддерживать) значение переменной, которую я не хочу обновлять ,

Это хорошо работает для наличия пользовательских значений для переменных в variables.less

После этого я компилирую свой theme.lessфайл вместоbootstrap.less

Пример theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

1
Это способ: 1) иметь копию кода начальной загрузки, которую можно обновлять по желанию, в то же время 2) иметь возможность устанавливать свои собственные пользовательские настройки. См. Stackoverflow.com/questions/13809895/… для получения подробной информации о структуре папок.
Джером Френч

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

Это отлично сработало для меня. Я просто указал Коала на theme.less, и он компилируется каждый раз, когда я сохраняю
ow3n

Если кто-то использует версию SASS, следите за !
Default

5

Гораздо лучший (IMHO) подход заключается в том, чтобы воспользоваться репликой проекта github Bootswatch под названием swatchmaker . Этот проект специально предназначен для создания и управления десятками тем Bootstrap на веб-сайте.

В Makefileсборке проекта swatchmaker.less(вы можете переименовать его в нечто подобное customizations.less). Этот файл содержит кучу импортов:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

Вы можете переименовать swatchпапку и bootswatch.lessфайлы в любое удобное для вас место.

Это имеет смысл, поскольку вы можете обновить Bootstrap, не затрагивая ваши собственные файлы. Фактически, он Makefileтакже содержит команды для получения последней версии Bootstrap. Смотрите README на странице проекта для получения дополнительной информации.

В качестве бонуса, README также предлагает установить watchrгем, который автоматически создаст проект при .lessизменении файла.


4

Если (И ТОЛЬКО ЕСЛИ) у вас есть время, вы можете сделать это, как я. Я сохраняю свою модифицированную версию фреймворка (ов) и с каждым обновлением фреймворка я читаю документы и проверяю источник на наличие модификаций.

Это решение может показаться менее идеальным с первого взгляда, но у меня есть причины для этого. Я работаю не с одной, а с множеством фреймворков, передовых практик, таблиц стилей сброса / нормализации и т. Д., И я всегда уверен, что никакие обновления никогда не изменят существующие проекты так, как я не ожидал.

Я работаю со своей собственной платформой по следующим причинам.

  1. Я раздеваю каждый кусочек, мне не нужно держать вещи модульными и маленькими
  2. Я использую свой фреймворк для работы с клиентами и хочу: а) точно знать, с чем я работаю, б) владеть всем, что я продаю клиенту. Я не просто копирую и использую фреймворки, но пытаюсь понять и воссоздать их
  3. Я использую свой фреймворк в сочетании с CMS и не могу просто забыть и забыть фреймворк в проекте / начать с нуля

Да, я понимаю, но для меня все меняется так быстро, что все эти веб-технологии становятся слишком сложными для отслеживания.
Джоэл Роджерс

1
Как уже упоминалось: мой подход только для тех, кто следит за текущей разработкой нескольких фреймворков. Я делаю это, потому что я должен быть на вершине развития и разных подходов к техническим задачам. Я думаю, что это лучше подходит для разработчиков фреймворков, чем для фрилансеров, которые просто «хотят выполнить свою работу».
Все биты равны

4

Я пришел к тому же решению, что и Джоэл:

Пользовательские файлы меньше

Как описано выше: я создаю локальные копии для всех файлов Less, которые я настраиваю: например: «variable-custom.less», «alerts-custom.less», «buttons-custom.less». Так что я могу использовать некоторые стандарты и иметь свои дополнения. Недостатком является то, что когда Bootstrap будет обновлен, его будет очень сложно перенести.

Но есть кое-что еще:

Переопределить стили

При поиске рабочих процессов я часто вижу людей, предлагающих просто переопределить стили. Таким образом, вы сначала импортируете стандартные файлы Less, а затем добавляете свои пользовательские объявления внизу. Плюс здесь: проще обновиться до более новой версии. Недостатком является то, что: скомпилированный файл CSS содержит все переопределения. Некоторые селекторы CSS определены дважды. Таким образом, браузер должен сделать некоторую подъемную работу, чтобы выяснить, что применять на самом деле. Это не совсем чисто.

Мне интересно, почему препроцессоры не настолько умны, чтобы решать такие двойные объявления? Есть ли какой-нибудь лучший рабочий процесс, которого мне здесь не хватает?


1
Я вижу, вы правы, но вы всегда можете запустить утилиту очистки CSS онлайн или локально. Вот их список: stackoverflow.com/questions/135657/… Вероятно, вы все равно не хотите использовать меньше компилятора, работающего в продукте.
Джоэл Роджерс

спасибо за ответ, не знал, что есть пыльные инструменты. круто, я буду копаться в этом. На самом деле я использую меньше компилятор локально в любом случае (CodeKit). Не хочу компилировать CSS дважды.
Фрэнк Ламмер

2

Просто добавьте @import "../../styles.less";(или где ваша таблица стилей) в bootstrap.less внизу. Это позволяет вам использовать миксины Bootstrap как .gradientили .border-radiusвнутри вашего стиля styles.less.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.