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


109

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

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

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

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

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


Привет @Pabluez, да, вы ответили, см. Ниже. Приносим извинения за задержку с ответом - я был занят в отпуске.
Anne

Я считаю, что эта статья поможет вам prideparrot.com/blog/archive/2014/6/…
VJAI

1
Этот поток является информативным stackoverflow.com/questions/10451317/…
Зим

Ответы:


127

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

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

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

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

Когда вам нужно обновить бутстрап (а вам нужно будет это сделать), это усложнит вам жизнь.

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

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


15
+1 Хороший ответ. Просто чтобы добавить к его третьему пункту: вы можете либо создать новый класс, который будет применяться в дополнение к старому классу, либо просто перезаписать / добавить свойства, которые вы хотите изменить.
Wex

это то, что я имел в виду с mycustomcss ... я собираюсь отредактировать его на mycustomclass, кроме zebra-striped (bootstrap-class)
Pabluez

1
есть ли что-нибудь, что вы можете добавить к этому, как сделать это "новым" способом less / sass? т.е. как создать подкласс стиля "начальной загрузки"? унаследовать все + дополнить. Я еще не понял, является ли это смесью и расширением, или ?? извините за тупость.
Alex Grey

1
+1 Спасибо за ответ. Я делал это, и это работает, но это не кажется самым надежным ответом. Если я получу обновленный файл bootstrap.css, мне, возможно, придется изменить свои собственные классы переопределения, чтобы адаптироваться к любым изменениям. Как и @alexgray, я хотел бы понять, как это сделать с помощью less или mixins. Или, что еще лучше, способ создать песочницу без применения начальной загрузки, чтобы я мог использовать свои стили без необходимости переопределения начальной загрузки. Если у кого-то есть хорошее руководство, поделитесь им
Энн

2
В чем смысл разветвления Bootstrap, если вы собираетесь вносить изменения только в свой собственный файл CSS?

33

Обновление 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


Noice - как насчет настройки собственного цвета для фона, границы, шрифта для новой пользовательской кнопки?
digout

Это нормально, что сгенерированный файл CSS имеет размер около 160 КБ (сжатый 130 КБ)? Можно ли, например, просто переопределить основной цвет?
Евгений

@Zim Я ценю созданный вами конструктор тем!
Карим Джеруди,

Примечание: не забудьте использовать Autoprefixer после компиляции
kanlukasz

20

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

это предпочтительный способ :)
Srivathsa

10

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

Используйте: Bootswatch для создания вашего bootstrap.css

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


не могли бы вы рассказать о том, как лучше всего это использовать. Я загрузил bootswatch и построил свой css, используя тему grunt swatch: theme, но все еще не понимаю, какие файлы куда поместить. Я пытаюсь попасть в ситуацию, когда я могу загрузить обновленную версию bootstrap или тему bootswatch и использовать ее, но по-прежнему использовать свои собственные переменные. (Я работаю в VisualStudio2013 Pro, если это имеет значение). Я не хочу использовать javascript для компиляции. На данный момент я могу запустить команду сборки. Позже я попробую найти хороший способ автоматизации. Спасибо Марк
mark1234

5

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

http://www.initializr.com/

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


3

На мой взгляд, лучший вариант - это скомпилировать собственный файл 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


3

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

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

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

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

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

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

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

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

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


0

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

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

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


3
Если документы переместились, отредактируйте другие ответы, чтобы отразить это
DeadChex

Как ни странно, ссылка в этом ответе мертва.
zacharydl

0

вы можете начать с этого инструмента 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";
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.