Twitter Bootstrap 3.0 bagaimana cara saya "lencana-penting lencana" sekarang


218

Dalam versi dua saya bisa menggunakan

badge-badge penting

Saya melihat bahwa elemen .badge tidak lagi memiliki kelas kontekstual (-success, -primary, dll.).

Bagaimana saya mencapai hal yang sama di versi 3?

Misalnya. Saya ingin lencana peringatan dan lencana penting di UI saya


1
Mereka seharusnya menyediakan .danger, .successdll. Definisi gaya kelas di luar kotak untuk kasus penggunaan umum seperti ini.
Fr0zenFyr

Jawaban:


256

Cukup tambahkan kelas satu baris ini di CSS Anda, dan gunakan labelkomponen bootstrap .

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

Bandingkan ini labeldan badgeberdampingan:

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

masukkan deskripsi gambar di sini

Mereka tampak sama. Tapi di CSS, labelgunakan emjadi skala dengan baik, dan masih memiliki semua kelas "-color". Jadi label akan menskala ke ukuran font yang lebih besar dengan lebih baik, dan dapat diwarnai dengan label-success, label-warning, dll. Berikut adalah dua contoh:

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

masukkan deskripsi gambar di sini

Atau tempat yang lebih besar:

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

masukkan deskripsi gambar di sini


11/16/2015 : Melihat bagaimana kita akan melakukan ini di Bootstrap 4

Sepertinya .badgekelas benar-benar hilang. Tapi ada .label-pillkelas bawaan (di sini) yang terlihat seperti yang kita inginkan.

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

Dalam penggunaannya terlihat seperti ini:

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

masukkan deskripsi gambar di sini


11/04/2014 : Ini adalah pembaruan mengapa kelas waspada penyerbukan silang .badgetidak begitu bagus. Saya pikir gambar ini merangkum:

masukkan deskripsi gambar di sini

Kelas peringatan itu tidak dirancang untuk digunakan dengan lencana. Ini membuat mereka dengan "petunjuk" dari warna yang dimaksudkan, tetapi pada akhirnya konsistensi dibuang keluar jendela dan keterbacaan dipertanyakan. Lencana yang di-retas itu tidak kohesif secara visual.

The .label-as-badgesolusi hanya memperluas desain bootstrap. Kami menjaga keutuhan semua keputusan yang dibuat oleh desainer bootstrap, yaitu pertimbangan yang mereka berikan untuk keterbacaan dan kohesi di semua warna yang mungkin, serta pilihan warna itu sendiri. The .label-as-badgekelas hanya menambah sudut membulat, dan tidak ada lagi. Tidak ada definisi warna yang diperkenalkan. Dengan demikian, satu baris CSS.

Yep, lebih mudah untuk hanya hack pergi dan drop pada mereka .alert-xxxxxkelas - Anda tidak perlu menambahkan setiap baris CSS. Atau Anda bisa lebih peduli tentang hal-hal kecil dan menambahkan satu baris.


3
ini asik asalkan Anda tidak ingin menggunakan lencana di daftar grup, maka mereka tidak mengambang ... saya dapat melihat pengereman ini dari waktu ke waktu karena bootstrap diubah. hack yang bagus.
nodrog

2
Ya, poin bagus @nodrog. The list-groupdengan badgesadalah bagus out-of-the-box fitur dalam bootstrap. Bagi yang menonton, inilah tampilannya: getbootstrap.com/components/#list-group-badges
broc.seib

1
Saya tidak yakin dengan argumen "penyerbukan silang". Reusage dan rekombinasi kelas / atribut CSS terjadi setiap saat. Argumen tersembunyi di balik istilah Anda mungkin, bahwa Anda lebih suka nama kelas dan subkelas css semantik. Ini pada dasarnya "fleksibilitas / usabilitas dan kebenaran semantik". Nama kelas semantik harus mendukung peran elemen. "label-as-badge" menunjukkan transformasi elemen. - Sidenote: Jawabannya pada dasarnya adalah komentar saya dari 22 September dengan solusi untuk masalah "tidak terlalu bulat pada label" dengan menambahkan garis css.
Jens A. Koch

3
Jika Anda ingin mendapatkan grup daftar khusus mengambang, tambahkan saja ini! .list-group-item > .label-as-badge { float: right; } .list-group-item > .label-as-badge + .label-as-badge { margin-right: 5px; }
Gausie

2
Jawaban yang sangat bagus. Mungkin juga ingin melempar di sana padding untuk mencocokkan .badge sebagai berikut:.label-as-badge { border-radius: 1em; padding: 3px 7px; }
Matt Borja

254

Singkatnya: Ganti badge-importantdengan alert-dangeratau progress-bar-danger.

Ini terlihat seperti ini: Bootply Demo .


Anda dapat menggabungkan kelas CSS badgedengan alert-*atau progess-bar-*untuk mewarnainya:

Dengan 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

Alerts Docu: http://getbootstrap.com/components/#alerts

Dengan class="badges progress-bar-*"(seperti yang disarankan oleh @ 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

Progress-Bar Docu: http://getbootstrap.com/components/#progress-alternatives


4
Saya tidak suka cara lansiran menghiasi lencana, jadi saya memilih untuk menggunakan label. getbootstrap.com/components/#labels
Mike Purcell

6
Ini sedikit jawaban hack-ish. Tentu itu berhasil, dan itu sederhana. Tapi Anda seharusnya menggunakan kelas-kelas peringatan kontekstual dengan peringatan. Anda mungkin mendaftar sendiri untuk gaya rusak di masa mendatang. @ JasonHuang menjawab sesederhana itu, dan memberi Anda kontrol yang lebih besar.
mikesigs

2
Apa yang mendorong saya untuk membuat jawaban di atas adalah bahwa Visual Studio Web Essentials menunjukkan peringatan untuk kode di atas. Yaitu, "Saat menggunakan 'peringatan-bahaya', Anda juga harus menentukan kelas 'peringatan'."
mikesigs

3
Orang-orang mendarat di halaman ini, karena orang-orang bootstrap membuat banyak pertimbangan desain, yang membuang pertimbangan desain yang mereka lakukan sebelumnya :) - Saya baru saja mengkombinasikan ulang kelas css yang ada, untuk bisa mendekati mantan "badge-important" . Di sini kita pergi dengan hal-hal yang mereka gunakan di luar kotak: itu saja. Saya tidak berpikir ada satu cara yang benar untuk membuat CSS. Halaman ini menawarkan banyak cara untuk menyelesaikan masalah. Tapi tolong berhenti berteriak "Aaah! Tidak! Ini bukan caranya! Anda melakukan sesuatu yang salah".
Jens A. Koch

1
@ Jens-AndréKoch Anda benar tentang "Aaah !! Tidak !!". Ini tidak terdengar seperti saya memberitahu orang-orang "Anda melakukannya salah", dan saya tidak punya tempat untuk mengatakan itu. Maaf.
broc.seib

45

Bootstrap 3 menghapus opsi warna itu untuk lencana. Namun, kami dapat menambahkan gaya tersebut secara manual. Inilah solusi saya, dan inilah Bin JS :

.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;
}

25

Kelas konteks untuk badgememang dihapus dari Bootstrap 3, jadi Anda harus menambahkan beberapa CSS khusus untuk membuat efek yang sama seperti ...

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

Bootply


20
Mengapa mereka menyingkirkan mereka?
Peter

4
+! Saya juga bertanya-tanya mengapa mereka menyingkirkan mereka. Anda dapat menggunakan label tetapi tidak sejajar dengan benar pada wadah pil. Setidaknya itu tidak terpusat secara vertikal.
cbmeeks

2
kuno. migrasi naik dari 2 ke 3 adalah rasa sakit total.
Kevin

Jawaban oleh Jens-André Koch adalah solusi hanya Bootstrap 3.0. Saya pikir ini jalan yang benar?
Josh Petitt

2
@ Peter: Lihat github.com/twbs/bootstrap/pull/6342 . TLDR: lencana dimaksudkan untuk digunakan sebagai penghitung 'belum dibaca', dan tidak boleh digunakan untuk menyampaikan status lainnya.
Bobby Jack

20

Cara lain yang mungkin, untuk membuat warna sedikit lebih intens, adalah yang ini:

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

Lihat Bootply


18

Jika menggunakan versi SASS (misalnya: versi thomas-mcdonald ), maka Anda mungkin ingin sedikit lebih dinamis (menghormati variabel yang ada) dan membuat semua konteks lencana menggunakan teknik yang sama seperti yang digunakan untuk label:

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

Setara KURANG harus langsung.


5

Seperti jawaban di atas tetapi di sini menggunakan nama dan warna bootstrap 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;
}


2

Saat menggunakan versi KURANG Anda dapat mengimpor mixins.less dan membuat kelas Anda sendiri untuk lencana berwarna:

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

Sama untuk warna lainnya; ganti saja peringatan dengan bahaya, kesuksesan, dll.


2

Yah, ini adalah jawaban yang sangat terlambat tapi saya pikir saya masih akan memasukkan dua sen saya ... Saya bisa memposting ini sebagai komentar karena jawaban ini pada dasarnya tidak menambahkan solusi baru tetapi itu menambah nilai pada posting sebagai alternatif lain. Tetapi dalam komentar saya tidak akan bisa memberikan semua detail karena batas karakter.

CATATAN: Ini perlu diedit untuk mem-bootstrap file CSS - memindahkan definisi gaya untuk di .badgeatas .label-default. Tidak dapat menemukan efek samping praktis karena perubahan dalam pengujian terbatas saya.

Sementara solusi broc.seib mungkin merupakan cara terbaik untuk mencapai persyaratan OP dengan penambahan minimal pada CSS, dimungkinkan untuk mencapai efek yang sama tanpa CSS tambahan sama sekali seperti solusi Jens A. Koch atau dengan menggunakan .label-xxxkelas kontekstual karena mereka mudah diingat dibandingkan dengan progress-bar-xxxkelas. Saya tidak berpikir bahwa .alert-xxxkelas memberikan efek yang sama.

Yang harus Anda lakukan adalah hanya menggunakan .badgedan .label-xxxkelas bersama (tetapi dalam urutan ini). Jangan lupa untuk melakukan perubahan yang disebutkan dalam CATATAN di atas.

<a href="#">Inbox <span class="badge label-warning">42</span></a> terlihat seperti ini:

Lencana dengan peringatan bg

PENTING: Solusi ini dapat merusak gaya Anda jika Anda memutuskan untuk meningkatkan dan lupa untuk membuat perubahan pada file CSS lokal baru Anda. Solusi saya untuk tantangan ini adalah menyalin semua .label-xxxgaya dalam file CSS khusus saya dan memuatnya setelah semua file CSS lainnya. Pendekatan ini juga membantu ketika saya menggunakan CDN untuk memuat BS3.

** PS: ** Kedua jawaban teratas mendapat pro dan kontra. Itu hanya cara Anda lebih suka melakukan CSS Anda karena tidak ada "hanya cara yang benar" untuk melakukannya.


saya pikir Anda tidak perlu memindahkan .badge jika Anda menempatkan label-xxxxx sebelum badge
Khaled AbuShqear
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.