Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Color bootstrap: Colors · Bootstrap v5.0

Содержание

Цвета. Утилиты · Bootstrap. Версия v4.0.0

Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.



Цвет


.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-muted</p>
<p>.text-white</p>


Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus. Заметьте, что классы .text-white and .text-muted не имеют ссылочной стилизации.



<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p>


Цвет фона


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


.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>


Градиентный фон


Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient-. По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан». Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.


.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

<div>.bg-gradient-primary</div>
<div>.bg-gradient-secondary</div>
<div>.bg-gradient-success</div>
<div>.bg-gradient-danger</div>
<div>.bg-gradient-warning</div>
<div>.bg-gradient-info</div>
<div>.bg-gradient-light</div>
<div>.bg-gradient-dark</div>


Специфические случаи

Иногда контекстуальные классы нельзя применять из-за специфики другого селектора. В некоторых случаях эффективным «костылем» может стать оборачивание содержимого вашего элемента в <div> с классом.


Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.


Руководство Bootstrap Color Utility

1- Text Color (Цвет текста)

Text Colors:

text-color-example

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-body</p>
<p>.text-muted</p>
<p>.text-white</p>
<p>.text-black-50</p>
<p>.text-white-50</p>

Link Colors:

Все классы выше (За исключением .text-white & .text-muted) могут применить к Link для настройки цвета для Link. Bootstrap поддерживает статус hover и focus соответствующий каждому цвету выше.

text-color-link-example

<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p>

2- Background Color (Цвет фона)

Индентично цвету текста (Text color), Bootstrap так же предоставляет классы для настройки фонового цвета элементам.

bg-color-example

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>
<div>.bg-transparent</div>

Классы Bootstrap 4, изменяющие цвет текста и фона

В Bootstrap-4 существует ряд классов, которые связаны с назначением цветовых характеристик для шрифта или для фона элемента. Они похожи по названию, но отличаются внешне.

Классы, изменяющие цвет шрифта

Цвет шрифта задается следующими классами:

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-muted</p>
<p>.text-white</p>

<p>.text-primary</p>

<p>.text-secondary</p>

<p>.text-success</p>

<p>.text-danger</p>

<p>.text-warning</p>

<p>.text-info</p>

<p>.text-light</p>

<p>.text-dark</p>

<p>.text-muted</p>

<p>.text-white</p>


See the Pen Bootstrap 4 Color classes by Elen (@ambassador) on CodePen.18892

Классы для изменения цвета ссылок

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

See the Pen Bootstrap 4 Link Classes by Elen (@ambassador) on CodePen.18892

Можно увидеть при наведении на ссылки или при переходе по ним клавишей Tab, что происходит изменение цвета. Стилизация отсутствует для классов ссылок .text-white and .text-muted.

Классы, изменяющие цвет фона

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div>

<div>.bg-primary</div>

<div>.bg-secondary</div>

<div>.bg-success</div>

<div>.bg-danger</div>

<div>.bg-warning</div>

<div>.bg-info</div>

<div>.bg-light</div>

<div>.bg-dark</div>

<div>.bg-white</div>


See the Pen Bootstrap 4 Background Color classes by Elen (@ambassador) on CodePen.18892

Как можно заметить, названия классов для изменения цвета фона подобны названиям классов для текста,нужно только заменить приставку text- на bg-. Но эти классы не управляют одновременно и цветом текста. Поэтому для изменения текста нужно использовать соответствующий цветовой класс с приставкой .text-. Если у вас внутри класса с  приставку  bg- расположена ссылка, она станет темнее при наведении.

Классы для создания градиентного фона

Используя стандартную таблицу стилей Bootstrap-4, вы не сможете назначить эти классы и получить отображение градиентного фона в блоках, т.к. этим процессом управляет SCSS-переменная $enable-gradients, которая по умолчанию равна false и доступна для редактирования в файле _variables.scss из пакета исходных файлов Bootstrap.

<div>.bg-gradient-primary</div>
<div>.bg-gradient-secondary</div>
<div>.bg-gradient-success</div>
<div>.bg-gradient-danger</div>
<div>.bg-gradient-warning</div>
<div>.bg-gradient-info</div>
<div>.bg-gradient-light</div>
<div>.bg-gradient-dark</div>

<div>.bg-gradient-primary</div>

<div>.bg-gradient-secondary</div>

<div>.bg-gradient-success</div>

<div>.bg-gradient-danger</div>

<div>.bg-gradient-warning</div>

<div>.bg-gradient-info</div>

<div>.bg-gradient-light</div>

<div>.bg-gradient-dark</div>


Но, изменив значение этой переменной на true, и скомпилировав новый css-файл, вы вполне сможете использовать градиентные фоны от Bootstrap-4. Не факт, что они вам так уж сильно понадобятся, т.к. градиентные переходы в этих классах очень мягкие, почти незаметные. Наверное, именно поэтому разработчики по умолчанию не включили эти классы в состав bootstrap.css.

Ссылки на документацию Bootstrap:

  1. На английском
  2. На русском



Просмотров:
6 326

цветов · Bootstrap v4.5

Передайте смысл через цвет с помощью нескольких вспомогательных классов цвета. Также включает поддержку стилизации ссылок с помощью состояний наведения.

Работа со спецификой

Иногда контекстные классы не могут быть применены из-за специфики другого селектора. В некоторых случаях достаточным обходным решением будет заключить содержимое вашего элемента в

с классом.

Передача смысла вспомогательным технологиям

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

Цвет

. Основной текст

.text-вторичный

.text-success

. Текст-опасность

.text-warning

.text-info

. Текстовый свет

.темный текст

.text-body

.без звука

. Текст-белый

.text-черный-50

.text-white-50

  

.text-primary

.text-secondary

.text-success

. текст-опасность

. текст-предупреждение

.text-info

.text-light

.text-dark

.text-body

. текст без звука

.text-white

.text-black-50

.text-white-50

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

  

Основная ссылка

Дополнительная ссылка

Ссылка на успех

Ссылка на опасность

Предупреждающая ссылка

Информационная ссылка

Легкая ссылка

Темная ссылка

Ссылка отключена

Белая ссылка

Цвет фона

Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса.Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают цвет , поэтому в некоторых случаях вы захотите использовать утилиты .text- * .

.bg-primary

.bg-вторичный

.bg-success

.bg-опасность

.bg-предупреждение

.bg-info

.bg-светлый

.bg-темный

.bg-белый

.bg-прозрачный

  
.bg-primary
.bg-вторичный
.bg-success
.bg-dangerous
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Фоновый градиент

Если для $ enable-gradient установлено значение true (по умолчанию false ), вы можете использовать служебные классы .bg-gradient- .Узнайте о наших опциях Sass, чтобы включить эти и другие классы.

  • .bg-gradient-primary
  • .bg-gradient-вторичный
  • .bg-gradient-success
  • .bg-gradient-dangerous
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

Бутстрап 4 цвета


Цвета текста

Bootstrap 4 имеет несколько контекстных классов, которые можно использовать для предоставления «значения через цвета».

Классы цветов текста: .text-muted ,
.text-primary , .text-success , .text-info ,
.text-warning , .text-dangerous , .text-secondary , .text-white ,
.text-dark , .text-body (основной цвет по умолчанию / часто черный) и .text-light :

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный текст.

Темно-серый текст.

Основной текст.

Светло-серый текст.

Попробуй сам »

Классы контекстного текста также могут использоваться в ссылках, которые добавят более темный цвет при наведении курсора:

Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью классов .text-black-50 или .text-white-50 :

Пример

Черный текст с непрозрачностью 50% на белом фоне

Белый текст с непрозрачностью 50% на черном фоне

Попробуй сам »


Цвет фона

Классы фоновых цветов: .bg-primary ,
.bg-success
, .bg-info , .bg-warning , .bg-dangerous , .bg-secondary , .bg-dark и .bg-light .

Обратите внимание, что цвета фона не определяют цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с классом .text- * .

Пример

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный цвет фона.

Темно-серый цвет фона.

Светло-серый цвет фона.

Попробуй сам »

Цветовые классы начальной загрузки для текста, фона, ссылок и др.

В этом уроке я покажу вам примеры встроенных цветовых классов Bootstrap для различных элементов. В Bootstrap есть специальные классы для раскрашивания текста, ссылок, кнопок и т. Д.

пример текста фоновые ссылки навигационная панель

Обычно имена классов используют контекст, который может отражать назначение текста или какого-либо другого элемента. Например, при использовании текста или кнопки красного цвета имя класса содержит слово « –danger» , отражающее некоторую опасную или критическую информацию или действие. Точно так же — предупреждение — это оранжевый цвет для контекста, в котором вы тревожите посетителя для определенного действия.

Таким же образом Bootstrap 4 имеет стандартный шаблон для использования имен классов e.грамм. –Успех, –первичный, –вторичный, –светлый, –темный, –вредительный и т. Д.

Этим именам предшествуют имена элементов или короткие коды. Например, текст — для текста, btn- для кнопок, bg- для фона.

В последнем разделе вы также можете увидеть пример настройки цветов навигационной панели.

Bootstrap 4 класса для раскрашивания текста

Во-первых, взгляните на пример всех встроенных классов для раскрашивания простого текста в Bootstrap 4.

См. Онлайн-демонстрацию и код

Разметка для раскрашивания текста:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

Для синеватого текста:.text-primary class

Серый текст: .text-secondary class

Для зеленого текста: .text-success

Для текста красного цвета: .text-dangerous

Оранжевый текст: .text-warning

Голубой текст: .text-info class

Светлый текст на темном фоне.text-light

темный текст: .text-dark

.text-muted

Текст белого цвета : .text-white

Доступны следующие классы для раскраски текста:

  • темный текст / * Черноватый * /
  • текст белый
  • текстовая лампа
  • text-primary / * Стандартный синий цвет * /
  • вторичный текст / * Сероватый цвет * /
  • текст-предупреждение / * Оранжевый цвет * /
  • text-success / * Зеленый цвет * /
  • text-dangerous / * Красный цвет * /
  • text-info / * Голубой цвет * /
  • без звука

Пример использования контекстных классов цвета фона

Точно так же вы можете использовать стандартные классы цвета фона для установки фона различных элементов.

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

См. Онлайн-демонстрацию и код

В разметке:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

.bg-primary для синего фона в абзаце

.bg-warning для оранжевого фона в заголовке h2

.bg-info в заголовке 2 со светом синий фон

.bg-light

.bg-dark

.bg-white

.bg-secondary

.bg-success

.bg-dangerous: для фона красного цвета с белым текстом в абзаце

Bootstrap 4 цветовых класса для кнопок

До сих пор вы можете увидеть образец раскраски в Bootstrap. Мы видели, что текст можно раскрасить, используя контекстные имена, используя text- [context class]. Аналогичным образом замените «текст» на «bg» для установки цвета фона.

Кнопки можно раскрасить таким же образом в Bootstrap.Просто замените «текст» или «bg» в классах выше на «btn», и те же стандартные цвета будут применены к кнопкам.

Следующие классы кнопок доступны в Bootstrap версии 4:

  • БТН-первичный
  • btn-вторичный
  • btn-success
  • btn-info
  • btn-светлый
  • btn-темный
  • БТН-Опасность
  • btn-предупреждение

Просмотрите демонстрацию в Интернете, щелкнув ссылку ниже для кнопок обычного размера:

См. Онлайн-демонстрацию и код

Узнайте больше о кнопках Bootstrap 4 с 15 примерами.

Пример раскраски пунктов списка

Как и стандартные встроенные классы текста, фона и кнопок, шаблон, который можно использовать для раскраски элементов списка, аналогичен.

Используйте контекстные классы Bootstrap 4 для создания списков со следующими цветами:

  • список-группа-элемент-первичный
  • список-группа-элемент-опасность
  • список-группа-элемент-успех
  • список-группа-элемент-информация
  • список-группа-элемент-вторичный
  • список-группа-элемент-предупреждение
  • список-группа-элемент-темный
  • список-группа-элемент-свет

См. Пример использования этих классов:

См. Онлайн-демонстрацию и код

Вы можете увидеть подробное руководство по списку Bootstrap здесь: списки Bootstrap 4

Пример раскраски ссылок

Если вы хотите раскрасить ссылки с помощью классов Bootstrap, просто назначьте классы контекстного текста тегам .Например:

Ссылка синего цвета

См. Пример, в котором я использовал все доступные классы текста для создания ссылок с цветами:

См. Онлайн-демонстрацию и код

В разметке:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

21

Bootstrap 4 цвета ссылок

Как видите, в нескольких ссылках также используются классы цвета фона.

Использование цвета текста и фона в примере таблицы Bootstrap 4

Тем не менее, Bootstrap 4 имеет встроенные контекстные классы для раскрашивания заголовков таблиц (thead-dark или thead-light) и строк таблицы с помощью контекстных классов и т. Д.

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

Кроме того, заголовок таблицы имеет отдельный цвет фона и текста. Посмотри:

См. Онлайн-демонстрацию и код

В разметке:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

14

18

19

20

21

22

23

24

25

26

27

28

29

30

000

000 34

35

36

37

38

39

40

41

42

43

44

45

46

49

0002 47

00030002 47

0003

51

52

53

54

55

56

57

58

59

60

61

62

63

9 0002 64

65

66

67

68

69

70

71

72

73

74

75

76

77

81

< th> Сумма

Месяц Количество продаж
янв. 105 15 000 долларов США.00
фев 95 12 000,00 долл. США
март 150 20 000 долларов.00
апр 50 30 000,00 долл. США
май 80 15 000 долл. США.00
июн 110 22 000,00 долл. США

Чтобы узнать больше о контекстных классах таблицы и других функциях, посетите учебник по таблицам Bootstrap 4.

Установка фона для примера навигационной панели

Вы можете использовать классы цвета фона для установки фона панели навигации в Bootstrap 4. Для этого просто используйте класс фона в теге

Добавить комментарий

Ваш адрес email не будет опубликован.