Настройка Bootstrap и Переводы

Настройка Bootstrap и Переводы

Bootstrap лучше обслуживать, когда в среде разработки разделять каждую зависимость от него на отдельные версии. Придерживаясь этого правила - в будущем ваш апгрейд до новой версии Bootstrap будет легким.

После того как вы скачали и подключили стили и скрипты Bootstrap, вы можете настроить их компоненты. Чтобы это сделать, просто создайте новую таблицу стилей (LESS, если желаете, или просто CSS).

Простую сборку или минимизированную?

Если вы не планируете читать CSS, выбирайте их минимизированную версию. Это тот же код, просто компактнее. Минимизированы таблицы стилей используют меньшую ширину канала, что есть хорошо, особенно в рабочем (production) среде.

И в дальнейшем, включайте любые компоненты Bootstrap и HTML, для создания шаблонов страниц вашего сайта.

Настройка составных

Вы можете настраивать компоненты в разной степени, но в большинстве выделяются две категории: легкая настройка иполная перестройка. Есть много разных примеров от третьих сторон, которые позволяют реализовать обе категории.

Мы определяем легкая настройка как поверхностные изменения, например, изменение цвета и шрифта для существующих компонентов Bootstrap. Примером легкой настройки является Twitter Translation Center (написан @mdo). Давайте посмотрим, как реализуется настройка кнопки .btn-ttc на этом сайте.

Для создания основы кнопки Bootstrap необходимо только один класс .btn. Теперь мы будем расширять стиль .btn новым модифицированным классом .btn-ttc, который позже создадим. Это позволяет изменять вид при минимальном усилии.

Наша кнопка, которую мы настраиваем, будет иметь примерно такой код:

<button type="button" class="btn btn-ttc">Сохранить изменения</button>

Заметьте как .btn-ttc добавляется к стандартному класса .btn.

Чтобы завершить настройку, добавьте следующий пользовательский код стилей CSS:

/* Custom button
-------------------------------------------------- */

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}

/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}

/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
  background-position: 0 -15px;
}

В кратце: Посмотрите источник стиля и продублируйте селекторы для модификации.

В итоге, базовый рабочий процесс будет иметь следующие пункты:

  • Найдите код в сборнике CSS Bootstrap для каждого элемента, который хотите настроить.
  • Скопируйте компоненты селектора и стиле и вставьте их в ваших стилей, которые настраиваете. Например, чтобы настроить фон навигационного меню, просто скопируйте описание стиля .navbar.
  • В ваших стилях, которые настраиваете, редактировать CSS, которые вы только что скопировали с Bootstrap. Не нужно дописывать дополнительные классы, добавлять в конце !important. Просто сохраните их.
  • Посмотрите что у вас получилось и при необходимости повторите предыдущие шаги.

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

Альтернативные методы настройки

Хотя не рекомендуется для пользователей, плохо знакомых с Bootstrap, все же вы можете использовать один из двух альтернативных методов для настройки. Первый заключается в изменении кода файла .less (супер-усложняет апгрейд), второй - создание маппинга между Less кодом и вашими собственными классами через mixins. На данный момент, ни один из этих методов здесь пока не документировано.

Удаление ненужного кода

Не нужно для каждого сайта все делать с помощью Bootstrap, особенно в производственном (production) среде, где нужно оптимизировать пропускную способность. Мы рекомендуем удалbть все лишнее используя нашу Настройку.

Для этого просто снимите галочки со всех компонентов, функций, или групп компонентов, которые вам не нужны. Загружайте новые измененные файлы и заменяйте ими файлы Bootstrap по умолчанию. Вы получите свежие файлы Bootstrap, но без функций, которые вы посчитали лишними. Каждая такая компонована сборник содержит компилированные и минимизированы версии.

Переводы

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

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

Translate »