Настройка шаблона CSS Bootstrap

Я только начинаю работать с Bootstrap из Twitter, и мне интересно, каковы «лучшие практики» для настройки. Я хочу разработать систему, которая будет использовать все возможности шаблона css (Bootstrap или другой), будет полностью (и легко) модифицируемой, устойчивой (то есть - когда следующая версия Bootstrap будет выпущена из Twitter, я не буду) Не нужно начинать заново.

Например, я хочу добавить фоновые изображения в верхнюю панель навигации. Похоже, есть 3 способа сделать это:

1. Измените классы .topbar в bootstrap.css. Мне это не особенно нравится, потому что у меня будет много элементов .topbar, и я не обязательно хочу изменять их все одинаково.
2. Создайте новые классы с моими фоновыми изображениями и примените оба стиля (новый и начальный к моему элементу). Это может создать конфликты стилей, которых можно избежать, разделив класс .topbar на отдельные классы, а затем используя только те части, на которые не наступил мой собственный класс. Опять же, это требует больше работы, чем я думаю, и, хотя он гибкий, он не позволит мне легко обновить bootstrap.css, когда Twitter выпустит следующую часть.
3. Для настройки используйте переменные в .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 для переопределения на работу ...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Просто добавьте необходимые изменения в собственный CSS. Например...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

До ( bootstrap.css)

После (с custom.css)

При настройке вы должны понимать специфику CSS . Переопределяет custom.cssнеобходимость использования таких же специфичных селекторов, как bootstrap.css.

Обратите внимание, что нет необходимости использовать !importantпользовательский CSS, если вы не переопределяете один из классов Bootstrap Utility . Специфика CSS всегда позволяет одному классу CSS перекрывать другой.

2. Настройте с помощью SASS

Если вы знакомы с SASS (и должны уметь использовать этот метод), вы можете настроить Bootstrap самостоятельно custom.scss. В документации Bootstrap есть раздел , объясняющий это, однако в документации не объясняется, как использовать существующие переменные в вашем custom.scss. Например, давайте изменим цвет фона тела на #eeeeeeи заменим / заменим синий primaryконтекстный цвет на переменную Bootstrap$purple ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Это также работает для создания новых пользовательских классов . Например, здесь я добавляю purpleв тему цветов , что создает все в CSS для btn-purple, text-purple, bg-purple, alert-purpleи т.д. ...

/* add a new purple custom color */
$theme-colors: (
  purple: $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:

Загрузите последнюю версию Less.js и укажите путь к ней (и Bootstrap) в файле <head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Чтобы перекомпилировать файлы .less, просто сохраните их и перезагрузите страницу. Less.js компилирует их и сохраняет в локальном хранилище.

Или, если вы предпочитаете статически компилировать новый bootstrap.css с вашими пользовательскими стилями (для производственных сред):

Установите инструмент командной строки LESS через Node и выполните следующую команду:

$ lessc ./less/bootstrap.less > 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 и ваши собственные правила:

1. Клонируйте bootstrap в корневую папку: git clone https://github.com/twbs/bootstrap.git
2. Переименуйте его в bootstrap.
3. Создайте файл package.json: https://gist.github.com/jide/8440609
4. Создайте Gruntfile.js: https://gist.github.com/jide/8440502
5. Создайте папку "меньше"
6. Скопируйте bootstrap / less / variables.less в папку "less"
7. Измените путь к шрифту: @icon-font-path: "../bootstrap/fonts/";
8. Создайте собственный файл style.less в папке «less», которая импортирует bootstrap.less и ваш файл custom variables.less: https://gist.github.com/jide/8440619
9. Бегать npm install
10. Бегать grunt watch

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

РЕДАКТИРОВАТЬ: я создал шаблон Bootstrap, используя эту технику: https://github.com/jide/bootstrap-boilerplate

Недавно я написал пост о том, как я делал это в Udacity за последние пару лет. Этот метод означал, что мы могли обновлять Bootstrap всякий раз, когда мы хотели, без конфликтов слияния, выброшенной работы и т. Д. И т. Д.

Этот пост содержит более подробные примеры, но основная идея такова:

• Сохраните первоначальную копию начальной загрузки и перезапишите ее извне.
• Измените один файл (переменные bootstrap .less), чтобы включить в него свои собственные переменные.
• Сделайте файл вашего сайта @include bootstrap.less, а затем ваши переопределения.

Это означает использование LESS и компиляцию его в CSS перед отправкой клиенту (на стороне клиента МЕНЬШЕ, если привередливо, и я обычно избегаю этого), но это ОЧЕНЬ хорошо для ремонтопригодности / возможности обновления, и получить компиляцию LESS действительно очень просто . В связанном коде github есть пример использования grunt, но есть много способов добиться этого - даже графический интерфейс, если вам это нравится.

Используя это решение, ваша примерная проблема будет выглядеть так:

• Измените цвет панели навигации с помощью @ navbar-inverse-bg в ваших переменных .less (не bootstrap)
• Добавьте свои собственные стили панели навигации в bootstrap_overrides.less, перезаписывая все, что вам нужно, по ходу дела.
• Счастье.

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

Запись в блоге с подробным описанием здесь .

Пример кода на github здесь .

Используйте LESS с Bootstrap ...

Вот документы Bootstrap о том, как использовать LESS

(они переехали с момента предыдущих ответов)

вы можете начать с этого инструмента https://themestr.app/theme , увидев, как он перезаписывает переменные scss, вы поймете, какая переменная на что влияет. Я думаю, это самый простой способ.

пример создания scss:

@import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
$font-family-base:Montserrat;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
$headings-font-family:Open Sans;

$enable-grid-classes:false;
$primary:#222222;
$secondary:#666666;
$success:#333333;
$danger:#434343;
$info:#515151;
$warning:#5f5f5f;
$light:#eceeec;
$dark:#111111;
@import "bootstrap";