[twitter-bootstrap] Twitter Bootstrap 3.0 “배지가 중요한”방법은 무엇입니까?

버전 2에서는 사용할 수 있습니다

배지 배지 중요

.badge 요소에 더 이상 상황에 맞는 (성공, 기본 등) 클래스가 없습니다.

버전 3에서 동일한 것을 어떻게 달성합니까?

예 : UI에 경고 배지와 중요한 배지를 원합니다



답변

CSS 에이 단선 클래스를 추가 하고 부트 스트랩 label구성 요소를 사용하십시오 .

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

이 비교 labelbadge나란히 :

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

여기에 이미지 설명을 입력하십시오

그들은 동일하게 나타납니다. 그러나 CSS에서 label사용 em하면 확장 성이 뛰어나고 여전히 모든 “색”클래스가 있습니다. 따라서 레이블은 더 큰 글꼴 크기로 확장되며 레이블 성공, 레이블 경고 등으로 색상을 지정할 수 있습니다. 다음은 두 가지 예입니다.

<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>

여기에 이미지 설명을 입력하십시오


11/16/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>

여기에 이미지 설명을 입력하십시오


11/04/2014 : 교차 수분 경고 클래스 .badge가 그다지 좋지 않은 이유에 대한 업데이트 가 있습니다. 나는이 그림이 요약한다고 생각합니다.

여기에 이미지 설명을 입력하십시오

이러한 경고 클래스는 배지와 함께 사용하도록 설계되지 않았습니다. 의도 한 색상의 “힌트”로 렌더링하지만 결국 일관성이 떨어지고 가독성이 의심됩니다. 이러한 경고 해킹 배지는 시각적으로 응집력이 없습니다.

.label-as-badge용액은 부트 스트랩 디자인으로 연장된다. 우리는 부트 스트랩 디자이너가 내린 모든 의사 결정, 즉 가능한 모든 색상에 대한 가독성과 응집력, 색상 선택 자체에 대한 고려 사항을 그대로 유지합니다. 이 .label-as-badge클래스는 둥근 모서리 만 추가하고 다른 것은 추가하지 않습니다. 소개 된 색상 정의가 없습니다. 따라서 한 줄의 CSS.

네, 그냥 해킹 멀리 그 드롭으로 쉽게 .alert-xxxxx클래스 – 당신은 추가 할 필요가 없습니다 어떤 CSS의 라인. 또는 작은 일에 대해 더 신경을 쓰고 한 줄을 추가 할 수도 있습니다.


답변

한마디로 : 교체 badge-important중 하나와 alert-dangerprogress-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


답변

부트 스트랩 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;
}


답변

에 대한 컨텍스트 클래스 badge는 실제로 Bootstrap 3에서 제거되었으므로 다음과 같은 효과를 내기 위해 사용자 정의 CSS를 추가해야합니다 …

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

전리품


답변

색상을 조금 더 강렬하게 만들 수있는 또 다른 방법은 다음과 같습니다.

<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 참조


답변

SASS 버전 (예 : thomas-mcdonald ‘s one )을 사용하는 경우 , 약간 더 역동적 일 수 있고 (기존 변수를 존중 함) 레이블에 사용 된 것과 동일한 기술을 사용하여 모든 배지 컨텍스트를 만들 수 있습니다.

// 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);
}

LESS 동등 물은 간단해야합니다.


답변

위의 답변과 같지만 부트 스트랩 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;
}