Latest web development tutorials

bootstrap odznaka

Ten rozdział wyjaśni Bootstrap odznaczenia (znaczki). Odznaki i etykiety podobne, główną różnicą jest to, że odznaka bardziej zaokrąglone rogi.

Odznaki (plakietki) stosowana jest głównie dla nowych lub nieprzeczytanych elementów podświetlona. Aby korzystać z logo, wystarczy umieścić<span class = "badge"> dodany do linku, Bootstrap nawigacji, itd. Elementy te mogą być.

Poniższy przykład ilustruje ten punkt:

Przykłady

Pokaż nieprzeczytane wiadomości:

<a href = "#"> Mailbox < rozpiętość class = "znaczek"> 50 < / span> </ a>

Spróbuj »

Wyniki przedstawiają się następująco:

Odznaki (odznaki)

Gdy nie ma żadnych nowych lub nieprzeczytanych elementów, poprzezCSS: selektor pusty,odznaczenia zostaną złożone, pokazując wnętrze pusty.

Przykłady

Wyświetla nieprzeczytane zniknąć:

<div class = "container"> <H2> </ h2 odznaka> <P> class .badge określa liczbę nieprzeczytanych wiadomości: </ p> <P> <a href = "#"> Odebrane <span class = "znaczek"> 21 < / span> </ a> </ p> </ Div>

Spróbuj »

Aktywowany stan nawigacji

Można umieścić odznakę w aktywnej nawigacji kapsuła państwa i listy nawigacji. Za pomocą<span class = "blaszka"> do aktywacji łącza, jak pokazano w poniższym przykładzie:

Przykłady

<H4> Nawigacja aktywna kapsułka </ h4> <ul class = "nav nav-pigułki" > <Li class = "aktywny"> <a href = "#"> Start <span class = "znaczek"> 42 < / span> </ A> </ Li> <Li> <a href = "#"> Wprowadzenie </ a> </ Li> <Li> <a href = "#"> Wiadomości <span class = "znaczek"> 3 < / span> </ A> </ Li> </ Ul> Największa <H4> lista aktywnej nawigacji </ h4> <ul class = "nav nav-pigułki nav -stacked" style = "max-width: 260px ;"> <Li class = "aktywny"> <a href = "#"> <span class = "odznaka pull-right" > 42 </ span> Start </ a> </ Li> <Li> <a href = "#"> Wprowadzenie </ a> </ Li> <Li> <a href = "#"> <span class = "odznaka pull-right" > 3 </ span> Aktualności </ a> </ Li> </ Ul>

Spróbuj »

Wyniki przedstawiają się następująco:

Aktywowany stan nawigacji