Цвета начальной загрузки определены B.S. Цвета фона для фона отличаются (или, возможно, другой интенсивности!) От тех, которые определены BSContextual Class Colors для группы списков. Мой вопрос: в чем причина такого, казалось бы, непоследовательного наименования? (Пожалуйста, объясните, если я ошибаюсь). Спасибо.

-1
NoChance 24 Сен 2018 в 17:28

2 ответа

Лучший ответ

Эти двое на самом деле совершенно разные.

Элемент списка - это цвет фона и текста, предопределенный в одном классе - list-group-item list-group-item-primary. Рассматриваемые цвета определены во втором классе. Это актуальное мнение о стилях, заложенных во фреймворк.

Второй пример, однако, построен с использованием различных классов, которые специально объявляют цвет фона и текста - bg-primary text-white. Я бы сказал, что этот пример более "случайный", чем list-group-item-primary. Они просто показывают вам некоторые способы комбинирования классов. Это менее категоричный, чем список.

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

И последнее, но не менее важное: исходный цвет на самом деле такой же. Если вы уменьшите непрозрачность bg-primary, он будет выглядеть точно так же, как приглушенная версия вокруг значения 0.3.

1
Serg Chernata 24 Сен 2018 в 15:12

Классы фоновых цветов служебных предназначены только для цвета фона, без «мнения» о цвете переднего плана / текста. Вот почему служебный класс text-white также используется для установки цвета текста в примерах документов.

Контекстные цвета - это «фон с отслеживанием состояния и color ", поэтому определены и цвет фона , и контрастный цвет текста. Эти цвета также используются в таблицах и предупреждениях.


Bootstrap использует функции SASS для создания контекстных цветов из цветов темы . Функция $theme-color-level использует переменную $theme-color-interval, которую вы можете изменить по своему усмотрению, а затем повторно создать варианты списка-группы-элемента ...

@each $color, $value in $theme-colors {
      @include list-group-item-variant($color, theme-color-level($color, -3), theme-color-level($color, 3));
}

Демо: https://www.codeply.com/go/SfpaYAjsUM

1
Zim 24 Сен 2018 в 16:32