В этой статье будут рассмотрены следующие перспективы, чтобы продемонстрировать использование значков Bootstrap:
- Как использовать значок Bootstrap для получения дополнительной информации?
- Как использовать значок Bootstrap для контекстной информации?
- Как добавить пользовательские стили в значок Bootstrap?
- Как добавить иконки на значок Bootstrap?
- Как связать значок Bootstrap с другим источником?
- Как сделать значки закругленными?
- Как использовать значок Bootstrap в качестве счетчика?
Что такое значки Bootstrap?
Бейджи — это основные компоненты, которые используются для отображения индикатора. Например, их можно использовать в качестве числового счетчика для отображения количества уведомлений или сообщений:
Их также можно использовать для отображения дополнительной информации, например, как показано на данном изображении:
Как использовать значок Bootstrap для получения дополнительной информации?
Значки Bootstrap могут быть добавлены в HTML-элементы для использования в качестве дополнительной информации. Посмотрите приведенный ниже пример для демонстрации.
Пример
Чтобы использовать значок Bootstrap для дополнительной информации, сначала:
- Добавлять ' ' и ' элементы.
- Поместите « <диапазон> » элемент с « значок ' и ' значок-* ” классы. Класс «значок-*» относится к значку с указанным цветом:
< h6 > Стипендии < охватывать класс знак равно 'значок-значок-средний' > Новый < / охватывать >< / h6 >
Можно заметить, что к соответствующим заголовкам добавлены два значка:
Как использовать значок Bootstrap для контекстной информации?
Значки Bootstrap также можно использовать для предоставления контекстной информации, такой как « знак опасности ” отображает значок красным цветом и может использоваться для отображения некоторых ошибочных сообщений, таких как отмена, недопустимо и т. д. “ значок-успех ” используется там, где мы хотим показать какое-то сообщение об успехе.
Пример
Посмотрите на данный код, чтобы понять обсуждаемый сценарий:
< охватывать класс знак равно 'знак-значок-опасность' >Аккаунт не подтвержден< / охватывать >< охватывать класс знак равно 'бейдж бейдж-информация' >это значок< / охватывать >
< охватывать класс знак равно 'значок-предупреждение' > Аккаунт на рассмотрении за одобрение< / охватывать >
< охватывать класс знак равно 'значок-значок-успех' >Аккаунт подтвержден< / охватывать >
Вывод
Как добавить пользовательские стили в значок Bootstrap?
Вы также можете использовать CSS, чтобы добавить уникальный стиль к значкам Bootstrap. Для лучшего понимания класс с названием « обычай » добавляется в « <диапазон> элемент. Затем применяются следующие свойства:
< охватывать класс знак равно 'бейдж бейдж-опасность обычай' >Аккаунт не подтвержден < / охватывать >< охватывать класс знак равно 'бейдж бейдж-информация обычай' >Это значок< / охватывать >
< охватывать класс знак равно 'знак-предупреждение обычай' > Аккаунт на рассмотрении за одобрение< / охватывать >
< охватывать класс знак равно 'бейдж бейдж-успех' >Аккаунт подтвержден< / охватывать >
Стиль «пользовательский» класс
.обычай {размер шрифта : 18 пикселей ;
вес шрифта : 100 ;
Межбуквенное расстояние : 1 пиксель ;
набивка : 8 пикселей 15 пикселей ;
}
“ .обычай ” используется для доступа к “ обычай ' класс. К нему применяются следующие свойства:
- “ размер шрифта ” регулирует размер шрифта.
- “ вес шрифта ” указывает толщину шрифта.
- “ Межбуквенное расстояние ” добавляет пробел между буквами.
- “ набивка » обеспечивает пространство вокруг содержимого элемента.
Вывод
Как добавить иконки на значок Bootstrap?
Мы также можем добавить различные значки на значки. Для этого есть несколько классов, которые можно использовать для этой цели. Для получения дополнительной информации посетите Шрифт потрясающий интернет сайт.
Пример
В HTML добавьте « <диапазон> элемент. Внутри этого элемента поместите встроенный элемент « » или «», чтобы вставить класс значка:
< охватывать класс знак равно 'бейдж бейдж-опасность обычай' > Аккаунт не подтвержден< я класс знак равно 'далеко fa-times-circle' >< / я >
< / охватывать >
< охватывать класс знак равно 'бейдж бейдж-успех' > Аккаунт подтвержден
< я класс знак равно 'fas fa-user-check' >< / я >
< / охватывать >
Вывод
Как связать значок Bootstrap с другим источником?
Чтобы сделать значки Bootstrap кликабельными, поместите « значок ' классы в HTML ' <а> » и укажите ссылку на связанную страницу в « href атрибут:
< а href знак равно '#' класс знак равно 'бейдж бейдж-опасность обычай' >Отмена< / а >< а href знак равно '#' класс знак равно 'бейдж бейдж-информация обычай' >Отправить< / а >
Вывод
Как сделать значки закругленными?
Чтобы сделать края значка более закругленными, добавьте класс « значок-таблетка ». Этот класс поддерживает большее « радиус границы 'и горизонтальный' набивка ' характеристики:
< охватывать класс знак равно 'знак-значок-таблетка значок-опасность на заказ' >Аккаунт не подтвержден < / охватывать >< охватывать класс знак равно 'знак-значок-таблетка-значок-предупреждение обычай' > Аккаунт на рассмотрении за одобрение< / охватывать >
< охватывать класс знак равно 'знак значок-таблетка значок успеха обычай' >Аккаунт подтвержден < / охватывать >
Вывод
Как использовать значок Bootstrap в качестве счетчика?
Чтобы создать кнопку со счетчиком, добавьте HTML-код « <кнопка> ” тег с типом “ кнопка ' и назначьте ему классы кнопок ' бтн ' и ' btn-успех ». Затем включите « <диапазон> ” для размещения счетчика:
< кнопка тип знак равно 'кнопка' класс знак равно 'бтн бтн-успех' >Уведомления < охватывать класс знак равно 'значок-светильник' > 4 < / охватывать >
< / кнопка >
Вывод
Это было все о значках Bootstrap и соответствующих ярлыках в Bootstrap.
Заключение
Начальная загрузка» значок ” используется для добавления значков на веб-сайт. Например, такие классы, как « знак опасности », « бейдж-информация », и многое другое можно использовать для добавления контекстной информации к значкам в качестве их меток. Некоторые классы применяются для добавления значков к значкам, например « далеко fa-time-circle », чтобы разместить значок в виде крестообразного круга. В этом посте представлено исчерпывающее руководство по значкам и ярлыкам Bootstrap.