Во второй версии я мог бы использовать
знак значок важный
Я вижу, что элемент .badge больше не имеет контекстных (-success, -primary и т. Д.) Классов.
Как мне добиться того же в версии 3?
Например. Я хочу предупреждающие значки и важные значки в моем интерфейсе
.danger
и.success
т. Д. Определения стиля класса "из коробки" для общих случаев использования, подобных этому.Ответы:
Просто добавьте этот однострочный класс в свой CSS и используйте
label
компонент начальной загрузки .Сравните это
label
иbadge
рядом:Они появляются одинаково. Но в CSS,
label
используетem
так , что весы хорошо, и она до сих пор все «-Цвет» классов. Таким образом, метка будет лучше масштабироваться до больших размеров шрифта и может быть окрашена с помощью label-success, label-warning и т.д. Вот два примера:Или где вещи больше:
16.11.2015 : Посмотрим, как мы это сделаем в Bootstrap 4
Похоже,
.badge
классы полностью ушли. Но есть встроенный.label-pill
класс (здесь), который выглядит так, как мы хотим.В использовании это выглядит так:
04.11.2014 : Вот обновленная информация о том, почему перекрестные опыления с классами оповещений
.badge
не так хороши. Я думаю, что эта картина подводит итог:Эти классы оповещения не были предназначены для значков. Он отображает их с «намеком» на предполагаемые цвета, но в итоге последовательность выбрасывается в окно, и читаемость сомнительна. Эти бдительные значки не являются визуально связными.
.label-as-badge
Решение расширяет только конструкцию начальной загрузки. Мы не затрагиваем все решения, принимаемые дизайнерами начальной загрузки, а именно то внимание, которое они уделяли удобочитаемости и связности всех возможных цветов, а также самим цветовые решения..label-as-badge
Класс только добавляет закругленные углы, и больше ничего. Нет введенных определений цвета. Таким образом, единственная строка CSS.Да, проще просто взломать и
.alert-xxxxx
оставить эти классы - вам не нужно добавлять какие-либо строки CSS. Или вы можете больше заботиться о мелочах и добавить одну строку.источник
list-group
Сbadges
хорошим вне коробки особенности в загрузчике. Для тех, кто смотрит, вот как это выглядит: getbootstrap.com/components/#list-group-badges.list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Вкратце: замените
badge-important
либо на,alert-danger
либоprogress-bar-danger
.Это выглядит так: Bootply Demo .
Вы можете объединить класс CSS
badge
сalert-*
илиprogess-bar-*
раскрасить их:С участием
class="badges alert-*"
Оповещения Docu: http://getbootstrap.com/components/#alerts
С
class="badges progress-bar-*"
(как предложено @ clami219)Прогресс-бар Документ: http://getbootstrap.com/components/#progress-alternatives
источник
Bootstrap 3 убрал эти варианты цвета для значков. Тем не менее, мы можем добавить эти стили вручную. Вот мое решение, а вот JS Bin :
источник
Классы контекста для
badge
действительно удаляются из Bootstrap 3, поэтому вам придется добавить несколько пользовательских CSS, чтобы создать такой же эффект, как ...Bootply
источник
Другой возможный способ сделать цвета немного более интенсивными:
Смотрите Bootply
источник
Если вы используете версию SASS (например, thomas-mcdonald's ), вы можете захотеть быть немного более динамичными (учитывать существующие переменные) и создавать все контексты значков, используя ту же технику, что и для меток:
Меньше эквивалент должен быть простым.
источник
Как и ответ выше, но здесь используются имена и цвета начальной загрузки 3:
источник
При использовании версии LESS вы можете импортировать mixins.less и создавать свои собственные классы для цветных значков:
То же самое для других цветов; просто замените предупреждение на опасность, успех и т. д.
источник
Что ж, это ужасно поздний ответ, но я думаю, что я все еще буду помещать свои два цента ... Я мог бы опубликовать это как комментарий, потому что этот ответ по существу не добавляет никакого нового решения, но он добавляет ценность к сообщению как еще одна альтернатива. Но в комментарии я не смог бы дать все детали из-за ограничения количества символов.
ПРИМЕЧАНИЕ. Для этого необходимо отредактировать файл начальной загрузки CSS - переместите определения стилей
.badge
выше.label-default
. Не удалось найти никаких практических побочных эффектов из-за изменений в моем ограниченном тестировании.Хотя решение broc.seib, вероятно, является наилучшим способом достижения требований OP с минимальным добавлением к CSS, можно достичь того же эффекта без какого-либо дополнительного CSS, как решение Jens A. Koch или используя
.label-xxx
контекстные классы, потому что они легко запомнить по сравнению сprogress-bar-xxx
классами. Я не думаю, что.alert-xxx
занятия дают такой же эффект.Все, что вам нужно сделать, это просто использовать
.badge
и.label-xxx
классы вместе (но в этом порядке). Не забудьте внести изменения, указанные в примечании выше.<a href="#">Inbox <span class="badge label-warning">42</span></a>
выглядит так:ВАЖНО: Это решение может нарушить ваши стили, если вы решите обновить и забыть внести изменения в ваш новый локальный файл CSS. Моим решением этой проблемы было скопировать все
.label-xxx
стили в моем собственном файле CSS и загрузить его после всех других файлов CSS. Этот подход также помогает, когда я использую CDN для загрузки BS3.** PS: ** У обоих самых рейтинговых ответов есть свои плюсы и минусы. Это просто способ, которым вы предпочитаете делать свой CSS, потому что не существует «единственно правильного» способа сделать это.
источник