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

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

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

Измените классы .topbar в bootstrap.css. Мне это особенно не нравится, потому что у меня будет много элементов .topbar, и я не обязательно хочу их модифицировать одинаково.
Создайте новые классы с моими фоновыми изображениями и примените оба стиля (новый и загрузочный для моего элемента). Это может привести к конфликтам стиля, чего можно избежать, разделив класс .topbar на отдельные классы, а затем используя только те части, на которые не наступил мой пользовательский класс. Опять же, это требует больше работы, чем я считаю необходимым, и хотя он является гибким, он не позволит мне легко обновлять bootstrap.css, когда Twitter выпускает следующий платеж.
Используйте переменные в .LESS для достижения настройки. Оффлайн это похоже на хороший подход, но не используется. LESS У меня есть проблемы с компиляцией css на клиенте и устойчивостью кода.

Хотя я использую Bootstrap, этот вопрос можно обобщить на любой шаблон css.

Заранее благодарим за ввод.

Ответ 1

Лучше всего сделать.

1. fork twitter-bootstrap из github и клонирования локально.

они очень быстро меняют библиотеку/фреймворк (они расходятся внутренне. Некоторые предпочитают библиотеку, я бы сказал, что это фреймворк, потому что меняйте свой макет с момента его загрузки на своей странице). Ну... forking/cloning позволит вам легко получать новые предстоящие версии.

2. Не изменяйте файл bootstrap.css

Это осложнит вашу жизнь, когда вам нужно обновить bootstrap (и вам нужно будет это сделать).

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

если они устанавливают верхнюю панель с, скажем, color: black;, но вы белее ее, создайте новый очень специфический селектор для этого верхнего бара и используйте это правило на определенном верхнем баре. Например, для таблицы это будет <table class="zebra-striped mycustomclass">. Если вы объявите свой файл css после bootstrap.css, это будет перезаписывать все, что вы хотите.

Ответ 2

Я думаю, что официально предпочтительный способ теперь использовать 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.js компилирует их и сохраняет их в локальном хранилище.

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

Установите инструмент командной строки LESS с помощью Node и выполните следующую команду:
$ lessc ./less/bootstrap.less > bootstrap.css

Ответ 3

Поскольку Pabluez ответил еще в декабре, теперь есть лучший способ настроить Bootstrap.

Используйте Bootswatch, чтобы сгенерировать ваш bootstrap.css

Bootswatch создает стандартный загрузочный бутстрак Twitter с последней версии (независимо от того, что вы устанавливаете в каталоге bootstrap), но также импортирует ваши настройки. Это позволяет легко использовать последнюю версию Bootstrap, сохраняя пользовательский CSS, не изменяя ничего о вашем HTML. Вы можете просто изменять файлы boostrap.css.

Ответ 4

Обновление 2018 - 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 начальной загрузки после настроек, чтобы они работали! Как только SASS скомпилирован в CSS (это должно быть сделано с помощью компилятора SASS node-sass, gulp-sass, npm webpack и т.д.), Получающийся CSS является настроенной Bootstrap. Если вы не знакомы с SASS, вы можете настроить Bootstrap с помощью такого инструмента, как создатель тем, который я создал.

Custom Bootstrap Demo (SASS)

Связанные с:
Как расширить/изменить (настроить) Bootstrap 4 с помощью SASS
Как изменить основной цвет начальной загрузки?
Как создать новый набор цветовых стилей в Bootstrap 4 с помощью sass
Как настроить Bootstrap

Ответ 5

Вы можете использовать шаблон начальной загрузки из

http://www.initializr.com/

который включает в себя все файлы без загрузки. Затем вы можете изменять переменные/обновлять меньше файлов по своему усмотрению и автоматически скомпилировать css. При развертывании скомпилировать меньше файлов в css.

Ответ 6

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

Загрузочная буфера клонирования в корневой папке: git clone https://github.com/twbs/bootstrap.git
Переименуйте его "bootstrap"
Создайте файл package.json: https://gist.github.com/jide/8440609
Создайте Gruntfile.js: https://gist.github.com/jide/8440502
Создайте папку "меньше"
Скопировать bootstrap/less/variables.less в папку "less"
Измените путь шрифта: @icon-font-path: "../bootstrap/fonts/";
Создайте собственный файл style.less в папке "less", которая импортирует bootstrap.less и ваш собственный файл переменных .less: https://gist.github.com/jide/8440619
Запустить npm install
Запустить grunt watch

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

EDIT: Я создал шаблон Bootstrap, используя этот метод: https://github.com/jide/bootstrap-boilerplate

Ответ 7

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

Сообщение идет более подробно с примерами, но основная идея:

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

Это означает использование LESS и компиляцию его до CSS перед отправкой его клиенту (на стороне клиента МЕНЬШЕ, если это сложно, и я вообще избегаю этого), но это ЭКСТРЕМАЛЬНО полезно для ремонтопригодности/обновления, а получение компиляции LESS действительно очень легко. Связанный код github имеет пример использования grunt, но есть много способов добиться этого - даже GUI, если это ваша вещь.

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

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

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

Сообщение в блоге с прохождением здесь.

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

Ответ 8

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

Вот документы Bootstrap для использования МЕНЬШЕГО

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