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

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

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

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

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

заранее спасибо за вход.

95
bootswatch css twitter-bootstrap

8 ответов

лучшее, что можно сделать, это.

1. fork twitter-бутстрап из github и клонирование локально.

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

2. Не изменяют загрузчик.стиль CSS файл

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

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

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

123

Я думаю, что официально предпочтительный способ теперь использовать меньше, и либо динамически переопределять бутстрап.css (используя меньше.js), или перекомпилировать bootstrap.css (используя узел или компилятор Less).

С Bootstrap docs, вот как переопределить bootstrap.стили CSS динамически:

скачать последнюю версию меньше.js и включить путь к нему (и Bootstrap) в <head>.

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

перекомпилировать .меньше файлов, просто сохраните их и перезагрузить страницу. Меньше.js компилирует их и хранит в локальном хранилище.

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

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

$ lessc ./less/bootstrap.less > bootstrap.css
19

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

использование: Bootswatch для создания вашего бутстрэпа.в CSS

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

9

Обновление 2018-Bootstrap 4

я пересматриваю этот вопрос настройки начальной загрузки для 4.X, который теперь использует Сасс вместо меньше. В общем, есть 2 способа настроить Bootstrap...

1. Простой CSS переопределяет

один из способов настройки-просто использовать CSS для переопределения Bootstrap CSS. Для ремонтопригодности настройки CSS помещаются в отдельный , так что bootstrap.css остается неизменным. Ссылка на custom.css следующее после the 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)

enter image description here

после (с custom.css)

enter image description here

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

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

если вы знакомы с Сасс (и вы должны использовать этот метод), вы можете настроить Bootstrap со своим собственным custom.scss. Есть раздел в Bootstrap docs это объясняет это, однако документы не объяснить как использовать существующие переменные в 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, etc...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

С SASS вы должны @import bootstrap после настройки чтобы заставить их работать! После того, как SASS компилируется в CSS (это должно быть сделано на стороне сервера с помощью компилятора SASS), результирующий CSS является настроенным Bootstrap. Если ты не знакомый с SASS, вы можете настроить Bootstrap с помощью инструмент такой тема builder я создал.

пользовательские Bootstrap Demo (SASS)

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

8

вы можете использовать шаблон bootstrap из

http://www.initializr.com/

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

6

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

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

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

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

3

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

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

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

Это означает использование меньше, и компиляция его до CSS перед отправкой его клиенту (на стороне клиента меньше, если привередливый, и я обычно избегаю его), но это очень хорошо для ремонтопригодности/модернизации, и получить меньше компиляции действительно очень легко. Связанный код github имеет пример использования grunt, но есть много способов достигните этого - даже GUIs, если это ваша вещь.

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

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

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

сообщение в блоге с walk-through is здесь.

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

3

используйте меньше с Bootstrap...

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

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

0