Твиттер Bootstrap 3.0, как мне теперь пометить значок

218

Во второй версии я мог бы использовать

знак значок важный

Я вижу, что элемент .badge больше не имеет контекстных (-success, -primary и т. Д.) Классов.

Как мне добиться того же в версии 3?

Например. Я хочу предупреждающие значки и важные значки в моем интерфейсе

Питер
источник
1
Они должны были предоставить .dangerи .successт. Д. Определения стиля класса "из коробки" для общих случаев использования, подобных этому.
Fr0zenFyr

Ответы:

256

Просто добавьте этот однострочный класс в свой CSS и используйте labelкомпонент начальной загрузки .

.label-as-badge {
    border-radius: 1em;
}

Сравните это labelи badgeрядом:

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

введите описание изображения здесь

Они появляются одинаково. Но в CSS, labelиспользует emтак , что весы хорошо, и она до сих пор все «-Цвет» классов. Таким образом, метка будет лучше масштабироваться до больших размеров шрифта и может быть окрашена с помощью label-success, label-warning и т.д. Вот два примера:

<span class="label label-success label-as-badge">Yay! Rah!</span>

введите описание изображения здесь

Или где вещи больше:

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

введите описание изображения здесь


16.11.2015 : Посмотрим, как мы это сделаем в Bootstrap 4

Похоже, .badgeклассы полностью ушли. Но есть встроенный .label-pillкласс (здесь), который выглядит так, как мы хотим.

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

В использовании это выглядит так:

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

введите описание изображения здесь


04.11.2014 : Вот обновленная информация о том, почему перекрестные опыления с классами оповещений .badgeне так хороши. Я думаю, что эта картина подводит итог:

введите описание изображения здесь

Эти классы оповещения не были предназначены для значков. Он отображает их с «намеком» на предполагаемые цвета, но в итоге последовательность выбрасывается в окно, и читаемость сомнительна. Эти бдительные значки не являются визуально связными.

.label-as-badgeРешение расширяет только конструкцию начальной загрузки. Мы не затрагиваем все решения, принимаемые дизайнерами начальной загрузки, а именно то внимание, которое они уделяли удобочитаемости и связности всех возможных цветов, а также самим цветовые решения. .label-as-badgeКласс только добавляет закругленные углы, и больше ничего. Нет введенных определений цвета. Таким образом, единственная строка CSS.

Да, проще просто взломать и .alert-xxxxxоставить эти классы - вам не нужно добавлять какие-либо строки CSS. Или вы можете больше заботиться о мелочах и добавить одну строку.

broc.seib
источник
3
это круто, если вы не хотите использовать значки в групповых списках, тогда они не плавают ... я могу видеть это торможение с течением времени при изменении начальной загрузки. хороший хак хотя.
nodrog
2
Да, хороший момент @nodrog. list-groupС badgesхорошим вне коробки особенности в загрузчике. Для тех, кто смотрит, вот как это выглядит: getbootstrap.com/components/#list-group-badges
broc.seib
1
Я не убежден аргументом "перекрестного опыления". Повторное использование и рекомбинация CSS-классов / атрибутов происходит постоянно. Скрытый аргумент в пользу вашего термина может заключаться в том, что вы предпочитаете семантические имена классов и подклассов CSS. Это в основном «гибкость / возможность повторного использования и семантическая корректность». Семантическое имя класса должно поддерживать роль элемента. «label-as-badge» указывает на преобразование элемента. - Sidenote: ответ в основном на мой комментарий от 22 сентября с решением проблемы «не очень круглые края на этикетках» путем добавления строки CSS.
Йенс А. Кох
3
Если вы хотите получить плавающую специальную группу списков, просто добавьте это! .list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
Gausie
2
Отличный ответ. Могу также захотеть добавить туда отступы для соответствия .badge следующим образом:.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Мэтт Борха
254

Вкратце: замените badge-importantлибо на, alert-dangerлибо progress-bar-danger.

Это выглядит так: Bootply Demo .


Вы можете объединить класс CSS badgeс alert-*или progess-bar-*раскрасить их:

С участием class="badges alert-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

Оповещения Docu: http://getbootstrap.com/components/#alerts

С class="badges progress-bar-*"(как предложено @ clami219)

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

Прогресс-бар Документ: http://getbootstrap.com/components/#progress-alternatives

Йенс А. Кох
источник
4
Мне не понравилось, как предупреждение украшало значки, поэтому я решил использовать вместо них ярлыки. getbootstrap.com/components/#labels
Майк Перселл,
6
Это немного хакерский ответ. Конечно, это работает, и это просто. Но вы должны использовать эти классы контекстных оповещений с оповещениями. Вы можете подписаться на сломанные стили в будущем. Ответ @ JasonHuang такой же простой и дает вам больший контроль.
Майкисиг
2
Что подтолкнуло меня сделать ответ выше, так это то, что Visual Studio Web Essentials отображает предупреждение для кода выше. А именно: «При использовании« alert-danger »вы также должны указать класс« alert »».
Майкизиг
3
Люди попадают на эту страницу, потому что пользователи начальной загрузки сделали много конструктивных соображений, которые отбрасывают конструктивные соображения, которые они делали раньше :) - Я просто рекомбинировал существующие классы CSS, чтобы приблизиться к прежнему «значению, важному для значка» , Здесь мы идем с материалом, который они используют из коробки: вот и все. Я не думаю, что есть один верный способ создать CSS. Эта страница предлагает множество способов решить проблему. Но, пожалуйста, перестаньте кричать: «Ааа! Нет! Это не так! Вы делаете что-то не так».
Йенс А. Кох
1
@ Jens-AndréKoch ты прав насчет моего "Ааааааааа !!" Это делает звук , как я говорю людям «что вы делаете это неправильно», и у меня нет места , чтобы сказать , что. Сожалею.
broc.seib
45

Bootstrap 3 убрал эти варианты цвета для значков. Тем не менее, мы можем добавить эти стили вручную. Вот мое решение, а вот JS Bin :

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}
Adams.H
источник
25

Классы контекста для badgeдействительно удаляются из Bootstrap 3, поэтому вам придется добавить несколько пользовательских CSS, чтобы создать такой же эффект, как ...

.badge-important{background-color:#b94a48;}

Bootply

Zim
источник
20
Почему они от них избавились?
Питер
4
+! Мне также интересно, почему они избавились от них. Вы можете использовать этикетку, но она не выстраивается должным образом на контейнере для таблеток. По крайней мере, это не по центру вертикально.
cbmeeks
2
ламе. миграция вверх от 2 до 3 - полная боль.
Кевин
Ответ от Йенса-Андре Коха - решение только для Bootstrap 3.0. Я думаю, что это правильный путь?
Джош Петитт
2
@Peter: См github.com/twbs/bootstrap/pull/6342 . TLDR: значки предназначены для использования в качестве «непрочитанных» счетчиков и не должны использоваться для передачи других статусов.
Бобби Джек,
20

Другой возможный способ сделать цвета немного более интенсивными:

<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

Смотрите Bootply

clami219
источник
18

Если вы используете версию SASS (например, thomas-mcdonald's ), вы можете захотеть быть немного более динамичными (учитывать существующие переменные) и создавать все контексты значков, используя ту же технику, что и для меток:

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

.badge-warning {
  @include label-variant($label-warning-bg);
}

.badge-danger {
  @include label-variant($label-danger-bg);
}

Меньше эквивалент должен быть простым.

PowerKiKi
источник
5

Как и ответ выше, но здесь используются имена и цвета начальной загрузки 3:

/*css to add back colours for badges and make use of the colours*/
.badge-default {
  background-color: #999999;
}

.badge-primary {
  background-color: #428bca;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-danger {
  background-color: #d9534f;
}

jumptiger13
источник
2

При использовании версии LESS вы можете импортировать mixins.less и создавать свои собственные классы для цветных значков:

.badge-warning {
    .label-variant(@label-warning-bg);
}

То же самое для других цветов; просто замените предупреждение на опасность, успех и т. д.

ThiefMaster
источник
2

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

ПРИМЕЧАНИЕ. Для этого необходимо отредактировать файл начальной загрузки 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> выглядит так:

Значок с предупреждением BG

ВАЖНО: Это решение может нарушить ваши стили, если вы решите обновить и забыть внести изменения в ваш новый локальный файл CSS. Моим решением этой проблемы было скопировать все .label-xxxстили в моем собственном файле CSS и загрузить его после всех других файлов CSS. Этот подход также помогает, когда я использую CDN для загрузки BS3.

** PS: ** У обоих самых рейтинговых ответов есть свои плюсы и минусы. Это просто способ, которым вы предпочитаете делать свой CSS, потому что не существует «единственно правильного» способа сделать это.

Fr0zenFyr
источник
я думаю, вам не нужно перемещать .badge, если вы поместили label-xxxxx перед значком
Khaled AbuShqear