Denne artikkelen vil dekke følgende perspektiver for å demonstrere bruken av Bootstrap-merker:
- Hvordan bruke Bootstrap-merket for tilleggsinformasjon?
- Hvordan bruke Bootstrap Badge for kontekstuell informasjon?
- Hvordan legge til egendefinerte stiler til Bootstrap-merket?
- Hvordan legge til ikoner til Bootstrap-merket?
- Hvordan koble Bootstrap-merket til en annen kilde?
- Hvordan gjøre merker avrundet?
- Hvordan bruke Bootstrap Badge som en teller?
Hva er Bootstrap-merker?
Merker er de grunnleggende komponentene som brukes til å vise en indikator. De kan for eksempel brukes som en numerisk teller for å vise antall varsler eller meldinger:
De kan også brukes til å vise tilleggsinformasjon, slik som vist i det gitte bildet:
Hvordan bruke Bootstrap-merket for tilleggsinformasjon?
Bootstrap-merker kan legges til i HTML-elementene for å bruke som tilleggsinformasjon. Sjekk ut eksemplet nevnt nedenfor for demonstrasjonen.
Eksempel
For å bruke Bootstrap-merket for tilleggsinformasjon, for det første:
- Legge til ' ' og ' 'elementer.
- Plasser ' ' element med ' skilt ' og ' skilt-* ' klasser. Klassen 'badge-*' refererer til merket med den angitte fargen:
< h6 > Stipend < span klasse = 'merkemerke-sekundær' > Ny < / span >< / h6 >
Det kan observeres at to merker er lagt til de relevante overskriftene:
Hvordan bruke Bootstrap Badge for kontekstuell informasjon?
Bootstrap-merker kan også brukes til å gi kontekstuell informasjon som ' merke-fare ' viser merket i rød farge og kan brukes til å vise noen mislykkede meldinger som avbryt, ugyldig eller mer. « merke-suksess ” brukes der vi ønsker å vise en suksessmelding.
Eksempel
Se på den gitte koden for å forstå det diskuterte scenariet:
< span klasse = 'merke-merke-fare' >Kontoen er ikke bekreftet< / span >< span klasse = 'merke-merke-info' >dette er merke< / span >
< span klasse = 'merkemerke-advarsel' >Konto venter til godkjenning< / span >
< span klasse = 'merke-merke-suksess' >Kontobekreftet< / span >
Produksjon
Hvordan legge til egendefinerte stiler til Bootstrap-merket?
Du kan også bruke CSS for å legge til litt unik styling til Bootstrap-merkene. For en bedre forståelse, en klasse med navnet ' tilpasset ' legges til i ' ' element. Deretter brukes følgende egenskaper:
< span klasse = 'merket merke-fare tilpasset' >Kontoen er ikke bekreftet < / span >< span klasse = 'emblem merke-info tilpasset' >Dette er merke< / span >
< span klasse = 'emblem merke-advarsel tilpasset' >Konto venter til godkjenning< / span >
< span klasse = 'merkemerke-suksess tilpasset' >Kontobekreftet< / span >
Stil 'egendefinert' klasse
.tilpasset {skriftstørrelse : 18 piksler ;
font-vekt : 100 ;
avstand mellom bokstavene : 1 px ;
polstring : 8 px 15 piksler ;
}
« .tilpasset ' brukes for å få tilgang til ' tilpasset ' klasse. Følgende egenskaper brukes på den:
- ' skriftstørrelse ” justerer skriftstørrelsen.
- ' font-vekt ” angir tykkelsen på skriften.
- ' avstand mellom bokstavene ” legger til mellomrom mellom bokstavene.
- ' polstring ” gir plass rundt elementets innhold.
Produksjon
Hvordan legge til ikoner til Bootstrap-merket?
Vi kan også legge til forskjellige ikoner på merkene. For å gjøre det, er det flere klasser som kan brukes for denne årsaken. For mer informasjon, besøk Font Awesome nettsted.
Eksempel
I HTML legger du til en ' ' element. Innenfor dette elementet, plasser det innebygde elementet « » eller «» for å sette inn ikonklassen:
< span klasse = 'merket merke-fare tilpasset' > Kontoen er ikke bekreftet< Jeg klasse = 'langt fa-tider-sirkel' >< / Jeg >
< / span >
< span klasse = 'merkemerke-suksess tilpasset' > Konto bekreftet
< Jeg klasse = 'fas fa-brukersjekk' >< / Jeg >
< / span >
Produksjon
Hvordan koble Bootstrap-merket til en annen kilde?
For å gjøre Bootstrap-merkene klikkbare, plasser ' skilt ' klasser i HTML ' ' tag og oppgi referansen til den koblede siden i ' href ' Egenskap:
< en href = '#' klasse = 'merket merke-fare tilpasset' >Avbryt< / en >< en href = '#' klasse = 'emblem merke-info tilpasset' >Send inn< / en >
Produksjon
Hvordan gjøre merker avrundet?
For å gjøre merkekantene mer avrundede, legg til en klasse ' merke-pille '. Denne klassen støtter en større ' grense-radius ' og horisontal ' polstring ' egenskaper:
< span klasse = 'merkemerke-pillemerke-fare tilpasset' >Kontoen er ikke bekreftet < / span >< span klasse = 'merket merke-pille merke-advarsel tilpasset' >Konto venter til godkjenning< / span >
< span klasse = 'merkemerke-pillemerke-suksess tilpasset' >Kontobekreftet < / span >
Produksjon
Hvordan bruke Bootstrap Badge som en teller?
For å lage en knapp med en teller, legg til en HTML '
Varsler < span klasse = 'merke merke-lys' > 4 < / span >
< / knapp >
Produksjon
Det handlet om Bootstrap-merker og deres relevante etiketter i Bootstrap.
Konklusjon
The Bootstrap ' skilt ”-klassen brukes til å legge til merker på nettstedet. For eksempel klasser som ' merke-fare ', ' merke-info ”, og mer kan brukes til å legge til kontekstuell informasjon til merkene som deres etikett. Noen klasser brukes for å legge til ikoner til merkene, for eksempel ' langt fa-tider-sirkel ' for å plassere et ikon i en tverrsirkel. Dette innlegget har gitt en omfattende veiledning om Bootstrap-merker og etiketter.