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

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



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




  1. изменить .классы topbar в bootstrap.стиль CSS. Мне это не особенно нравится, потому что у меня будет много .элементы topbar, и я не обязательно хочу изменять их все одинаково.

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

  3. использовать переменные in .Меньше для достижения настройки. Навскидку это кажется хорошим подходом, но не используется .Меньше у меня проблем с компиляцией css на клиенте и с устойчивостью кода.


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



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

706   8  

8 ответов:

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

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

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

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

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

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

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

123  
2011-12-30 06:36:17

Я думаю, что официально предпочтительный способ теперь использовать меньше, и либо динамически переопределять bootstrap.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  
2014-01-23 00:56:32

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

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

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

9  
2012-04-16 03:36:03

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

я пересматриваю этот вопрос настройки Bootstrap для 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. Там есть в "загрузки" документы что объясняет это, однако документы не объяснить как использовать существующие переменные в 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

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

Custom Bootstrap Demo (SASS)

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

8  
2018-07-12 22:58:04

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

http://www.initializr.com/

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

6  
2012-02-20 18:11:21

лучшим вариантом, на мой взгляд, является компиляция пользовательского файла LESS, включая 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. выполнить npm install
  10. выполнить grunt watch

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

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

3  
2014-01-18 18:26:46

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

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

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

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

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

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

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

сообщение в блоге с прогулкой - это здесь.

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

3  
2015-01-04 01:24:59

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

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

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

0  
2014-01-15 22:07:34

Comments

    Ничего не найдено.
Click here to cancel reply.