Najlepszy samouczek bootstrap odznaka W 2024 r. W tym samouczku możesz dowiedzieć się
Przykłady,Przykłady,Aktywowany stan nawigacji,Przykłady,
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:
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: