Я только начинаю работать с Bootstrap из Twitter, и мне интересно, каковы «лучшие практики» для настройки. Я хочу разработать систему, которая будет использовать все возможности шаблона css (Bootstrap или другой), будет полностью (и легко) модифицируемой, устойчивой (то есть - когда следующая версия Bootstrap будет выпущена из Twitter, я не буду) Не нужно начинать заново.
Например, я хочу добавить фоновые изображения в верхнюю панель навигации. Похоже, есть 3 способа сделать это:
- Измените классы .topbar в bootstrap.css. Мне это не особенно нравится, потому что у меня будет много элементов .topbar, и я не обязательно хочу изменять их все одинаково.
- Создайте новые классы с моими фоновыми изображениями и примените оба стиля (новый и начальный к моему элементу). Это может создать конфликты стилей, которых можно избежать, разделив класс .topbar на отдельные классы, а затем используя только те части, на которые не наступил мой собственный класс. Опять же, это требует больше работы, чем я думаю, и, хотя он гибкий, он не позволит мне легко обновить bootstrap.css, когда Twitter выпустит следующую часть.
- Для настройки используйте переменные в .LESS. На первый взгляд это кажется хорошим подходом, но я не использовал его. МЕНЬШЕ у меня есть опасения по поводу компиляции css на клиенте и по поводу устойчивости кода.
Хотя я использую Bootstrap, этот вопрос можно обобщить на любой шаблон css.
Заранее благодарим за вклад.
Ответы:
Лучше всего это сделать.
1. Вилка twitter-bootstrap из github и клонирование локально.
они очень быстро меняют библиотеку / фреймворк (они расходятся внутри. Некоторые предпочитают библиотеки, я бы сказал, что это фреймворк, потому что измените свой макет с того момента, как вы загрузите его на свою страницу). Что ж ... разветвление / клонирование позволит вам легко получить новые предстоящие версии.
2. Не изменяйте файл bootstrap.css.
Когда вам нужно обновить бутстрап (а вам нужно будет это сделать), это усложнит вам жизнь.
3. Создайте свой собственный файл css и перезаписывайте его всякий раз, когда вам нужны оригинальные материалы начальной загрузки.
если они установили верхнюю панель, скажем,
color: black;
но вы сделали ее белым, создайте новый очень специфический селектор для этой верхней панели и используйте это правило на определенной верхней панели. Например, для таблицы это будет<table class="zebra-striped mycustomclass">
. Если вы объявите свой файл css послеbootstrap.css
, он перезапишет все, что вы хотите.источник
Обновление 2019 - Bootstrap 4
Я возвращаюсь к этому вопросу о настройке Bootstrap для 4.x, который теперь использует SASS вместо LESS. В общем, есть 2 способа настроить Bootstrap ...
1. Простые переопределения CSS
Один из способов настройки - просто использовать CSS для переопределения Bootstrap CSS. Для удобства обслуживания настройки CSS помещены в отдельный
custom.css
файл, поэтому ониbootstrap.css
остаются неизменными. Ссылка наcustom.css
следующее послеbootstrap.css
для переопределения на работу ...Просто добавьте необходимые изменения в собственный CSS. Например...
До (
bootstrap.css
)После (с
custom.css
)При настройке вы должны понимать специфику CSS . Переопределяет
custom.css
необходимость использования таких же специфичных селекторов, какbootstrap.css
.2. Настройте с помощью SASS
Если вы знакомы с SASS (и должны уметь использовать этот метод), вы можете настроить Bootstrap самостоятельно
custom.scss
. В документации Bootstrap есть раздел , объясняющий это, однако в документации не объясняется, как использовать существующие переменные в вашемcustom.scss
. Например, давайте изменим цвет фона тела на#eeeeee
и заменим / заменим синийprimary
контекстный цвет на переменную Bootstrap$purple
...Это также работает для создания новых пользовательских классов . Например, здесь я добавляю
purple
в тему цветов , что создает все в CSS дляbtn-purple
,text-purple
,bg-purple
,alert-purple
и т.д. ...https://www.codeply.com/go/7XonykXFvP
С SASS вы должны использовать @import bootstrap после настроек, чтобы они работали! После того, как SASS скомпилирован в CSS ( это необходимо сделать с помощью компилятора SASS node-sass, gulp-sass, npm webpack и т. Д. ), Полученный CSS является настроенным Bootstrap. Если вы не знакомы с SASS, вы можете настроить Bootstrap с помощью такого инструмента, как этот созданный мной конструктор тем .
Пользовательская демонстрация начальной загрузки (SASS)
Примечание. В отличие от 3.x, Bootstrap 4.x не предлагает официального инструмента настройки. Однако вы можете загрузить CSS только для сетки или использовать другой настраиваемый инструмент сборки 4.x для повторной сборки CSS Bootstrap 4 по желанию.
Связанный:
Как расширить / изменить (настроить) Bootstrap 4 с помощью SASS
Как изменить основной цвет начальной загрузки?
Как создать новый набор цветовых стилей в Bootstrap 4 с помощью sass
Как настроить Bootstrap
источник
Я думаю, что официально предпочтительный способ сейчас - использовать Less и либо динамически переопределить bootstrap.css (используя less.js), либо перекомпилировать bootstrap.css (используя Node или компилятор Less).
Из документации Bootstrap можно узнать, как динамически переопределить стили bootstrap.css:
Или, если вы предпочитаете статически компилировать новый bootstrap.css с вашими пользовательскими стилями (для производственных сред):
источник
После того, как Паблус ответил в декабре, теперь есть лучший способ настроить Bootstrap.
Используйте: Bootswatch для создания вашего bootstrap.css
Bootswatch собирает обычный Twitter Bootstrap из последней версии (независимо от того, что вы устанавливаете в каталог начальной загрузки), но также импортирует ваши настройки. Это упрощает использование последней версии Bootstrap, сохраняя при этом собственный CSS, без необходимости изменять что-либо в вашем HTML. Вы можете просто изменить файлы boostrap.css.
источник
Вы можете использовать шаблон начальной загрузки из
http://www.initializr.com/
который включает все файлы начальной загрузки .less. Затем вы можете изменить переменные / обновить меньше файлов по своему усмотрению, и он автоматически скомпилирует css. При развертывании скомпилируйте файл less в css.
источник
На мой взгляд, лучший вариант - это скомпилировать собственный файл LESS, включая bootstrap.less, файл custom variables.less и ваши собственные правила:
git clone https://github.com/twbs/bootstrap.git
@icon-font-path: "../bootstrap/fonts/";
npm install
grunt watch
Теперь вы можете изменять переменные как хотите, переопределять правила начальной загрузки в вашем собственном файле style.less, и если когда-нибудь вы захотите обновить начальную загрузку, вы можете заменить всю папку начальной загрузки!
РЕДАКТИРОВАТЬ: я создал шаблон Bootstrap, используя эту технику: https://github.com/jide/bootstrap-boilerplate
источник
Недавно я написал пост о том, как я делал это в Udacity за последние пару лет. Этот метод означал, что мы могли обновлять Bootstrap всякий раз, когда мы хотели, без конфликтов слияния, выброшенной работы и т. Д. И т. Д.
Этот пост содержит более подробные примеры, но основная идея такова:
Это означает использование LESS и компиляцию его в CSS перед отправкой клиенту (на стороне клиента МЕНЬШЕ, если привередливо, и я обычно избегаю этого), но это ОЧЕНЬ хорошо для ремонтопригодности / возможности обновления, и получить компиляцию LESS действительно очень просто . В связанном коде github есть пример использования grunt, но есть много способов добиться этого - даже графический интерфейс, если вам это нравится.
Используя это решение, ваша примерная проблема будет выглядеть так:
Когда придет время обновить ваш начальный загрузчик, вы просто замените исходную копию начального загрузчика, и все будет по-прежнему работать (если начальный загрузчик вносит критические изменения, вам необходимо обновить свои переопределения, но вам все равно придется это сделать)
Запись в блоге с подробным описанием здесь .
Пример кода на github здесь .
источник
Используйте LESS с Bootstrap ...
Вот документы Bootstrap о том, как использовать LESS
(они переехали с момента предыдущих ответов)
источник
вы можете начать с этого инструмента https://themestr.app/theme , увидев, как он перезаписывает переменные scss, вы поймете, какая переменная на что влияет. Я думаю, это самый простой способ.
пример создания scss:
источник