Latest web development tutorials

lencana bootstrap

Bab ini akan menjelaskan lencana Bootstrap (Lencana). Lencana dan tag yang sama, perbedaan utama adalah bahwa lencana sudut lebih bulat.

Lencana (lencana) terutama digunakan untuk produk baru atau belum dibaca disorot. Untuk menggunakan lencana, hanya menempatkan<span class = "lencana"> ditambahkan ke link, navigasi Bootstrap, dll elemen ini dapat.

Contoh berikut menggambarkan hal ini:

contoh

Tampilkan pesan yang belum dibaca:

<A href = "#"> Mailbox < rentang class = "lencana"> 50 < / span> </ a>

Coba »

Hasilnya adalah sebagai berikut:

Lencana (lencana)

Ketika tidak ada item baru atau belum dibaca, melaluiCSS: kosong pemilih, lencana akan dilipat, menunjukkan dalam kosong.

contoh

Menampilkan belum dibaca menghilang:

<Div class = "container"> <H2> badge </ h2> <P> kelas .badge menentukan jumlah pesan yang belum dibaca: </ p> <P> <a href = "#"> Inbox <span class = "badge"> 21 < / span> </ a> </ p> </ Div>

Coba »

Status navigasi diaktifkan

Anda dapat menempatkan sebuah lencana dalam navigasi kapsul negara dan daftar navigasi aktif. Dengan menggunakan<span class = "lencana"> untuk mengaktifkan link, seperti yang ditunjukkan dalam contoh berikut:

contoh

<H4> kapsul navigasi aktif </ h4> <Ul class = "nav nav-pil" > <Li class = "aktif"> <A href = "#"> Home <span class = "lencana"> 42 < / span> </ A> </ Li> <Li> <A href = "#"> Pengantar </ a> </ Li> <Li> <A href = "#"> berita <span class = "lencana"> 3 < / span> </ A> </ Li> </ Ul> Situs <H4> daftar menu aktif </ h4> <Ul class = "nav nav-pil nav -stacked" style = "max-width: 260px ;"> <Li class = "aktif"> <A href = "#"> <Span class = "lencana pull-benar" > 42 </ span> Rumah </ a> </ Li> <Li> <A href = "#"> Pengantar </ a> </ Li> <Li> <A href = "#"> <Span class = "lencana pull-benar" > 3 </ span> berita </ a> </ Li> </ Ul>

Coba »

Hasilnya adalah sebagai berikut:

Status navigasi diaktifkan