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

97

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

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

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

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

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

  • 0
    Привет @Pabluez, да, ты ответил, см. Ниже. Извините за задержку с ответом - я был занят в отпуске.
  • 0
    Я считаю, что эта статья поможет вам prideparrot.com/blog/archive/2014/6/…
Показать ещё 1 комментарий
Теги:
bootswatch

8 ответов

129
Лучший ответ

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

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

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

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

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

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

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

Поделиться
  • 14
    +1 Хороший ответ. Просто добавьте к его 3-му пункту: вы можете либо создать новый класс для применения в дополнение к старому классу, либо просто перезаписать / добавить свойства, которые вы хотите изменить.
  • 0
    это было то, что я имел в виду с mycustomcss ... я собираюсь отредактировать его в mycustomclass, кроме полосатого зебры (класс начальной загрузки)
Показать ещё 7 комментариев
19

Я думаю, что официально предпочтительный способ теперь использовать 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
Поделиться
  • 0
    это предпочтительный способ :)
  • 1
    Это правильный ответ.
9

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

Изображение 2399

После (с custom.css)

Изображение 2400

При настройке вы должны понимать специфику 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

Поделиться
  • 0
    Замечание - как насчет установки пользовательского цвета для фона, рамки и шрифта для новой пользовательской кнопки?
9

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

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

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

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

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

http://www.initializr.com/

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

Поделиться
  • 0
    К сожалению, они не обновились до Bootstrap 4.
3

Недавно я написал сообщение о том, как я это делал в 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 здесь.

Поделиться
3

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

Поделиться
0

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

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

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

Поделиться
  • 3
    Если документы были перемещены, отредактируйте другие ответы, чтобы отразить это
  • 0
    По иронии судьбы, ссылка в этом ответе мертва.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню