Bootstrap | Merker og etiketter

Nettstedsmerker er vanligvis liten grafikk på alle applikasjoner. Merkene er også kjent som nettstedsknapper som er lenket til et annet nettsted eller brukt til et bestemt formål. I Bootstrap 3 var det en egen klasse for etiketter, men mens vi bruker Bootstrap 4, er etikettklassen erstattet med "skilt”Klasse.

Denne artikkelen vil dekke følgende perspektiver for å demonstrere bruken av Bootstrap -merker:

• Hvordan bruke Bootstrap -merket for ytterligere informasjon?
• Hvordan bruke Bootstrap -merket for kontekstuell informasjon?
• Hvordan legge til tilpassede stiler til Bootstrap Badge?
• Hvordan legge til ikoner i bootstrap -merket?
• Hvordan du kobler bootstrap -merket til en annen kilde?
• Hvordan lage merker avrundet?
• Hvordan du bruker bootstrap -merket som en teller?

Hva er bootstrap -merker?

Merker er de grunnleggende komponentene som brukes til å vise en indikator. For eksempel kan de brukes som en numerisk teller for å vise antall varsler eller meldinger:

De kan også brukes til å vise ytterligere informasjon, for eksempel vist i det gitte bildet:

Hvordan bruke Bootstrap -merket for ytterligere informasjon?

Bootstrap -merker kan legges til i HTML -elementene som skal brukes som tilleggsinformasjon. Sjekk ut eksemplet nevnt nedenfor for demonstrasjonen.

Eksempel

For å bruke Bootstrap -merket for tilleggsinformasjon, for det første:

• Legg til "

  ”Og“

  ”Elementer.

• Plasser "”Element med“skilt”Og“skilt-*”Klasser. Klassen “Badge-*” refererer til merket med den spesifiserte fargen:

arrangementerNy

Stipend Ny

Det kan observeres at to merker legges til relevante overskrifter:

Hvordan bruke Bootstrap -merket for kontekstuell informasjon?

Bootstrap -merker kan også brukes til å gi kontekstuell informasjon som "Badge-Danger”Viser merket i rød farge og kan brukes til å vise noen mislykkede meldinger som avbryt, ugyldig eller mer. “Badge-Success”Brukes der vi vil vise en suksessmelding.

Eksempel

Se på den gitte koden for å forstå det diskuterte scenariet:

Konto ikke bekreftet
Dette er merket
Konto i påvente av godkjenning
Konto bekreftet

Produksjon

Hvordan legge til tilpassede stiler til Bootstrap Badge?

Du kan også bruke CSS for å legge til litt unik styling i bootstrap -merkene. For en bedre forståelse, en klasse med navnet “tilpasset”Er lagt til i“”Element. Deretter brukes følgende egenskaper:

Konto ikke bekreftet
Dette er merket
Konto i påvente av godkjenning
Konto bekreftet

Stil “tilpasset” klasse

.tilpasset
Font-størrelse: 18px;
Font-vekt: 100;
Brev-avstand: 1px;
polstring: 8px 15px;

“.tilpasset”Brukes til å få tilgang til“tilpasset”Klasse. Følgende egenskaper brukes på det:

• “skriftstørrelse”Justerer skriftstørrelsen.
• “Fontvekt”Oppgir tykkelsen på skriften.
• “avstand mellom bokstavene”Legger til plass mellom bokstavene.
• “polstring”Gir plass rundt elementets innhold.

Produksjon

Hvordan legge til ikoner i bootstrap -merket?

Vi kan også legge til forskjellige ikoner til merkene. For å gjøre det, er det flere klasser som kan brukes av denne årsaken. For mer informasjon, besøk nettstedet Font Awesome.

Eksempel

I HTML, legg til en "”Element. Innenfor dette elementet, plasser inline -elementet “”Eller“ ”for å sette inn ikonklassen:

Konto ikke bekreftet


Konto bekreftet

Produksjon

Hvordan du kobler bootstrap -merket til en annen kilde?

For å gjøre Bootstrap -merkene klikkbare, plasser du “skilt”Klasser i HTML””Tag og gi referansen til den koblede siden i“href" Egenskap:

Avbryt
Sende inn

Produksjon

Hvordan lage merker avrundet?

For å gjøre merket kanter mer avrundet, legg til en klasse “Badge-pill”. Denne klassen støtter en større “Border-Radius”Og horisontalt”polstring" egenskaper:

Konto ikke bekreftet
Konto i påvente av godkjenning
Konto bekreftet

Produksjon

Hvordan du bruker bootstrap -merket som en teller?

For å opprette en knapp med en teller, legg til en HTML “”Tag med type”knapp”Og tilordne det knappeklassene”btn”Og“BTN-suksess”. Inkluder da “”Element for å plassere en teller:

Varsler 4

Produksjon

Det handlet om bootstrap -merker og deres relevante etiketter i Bootstrap.

Konklusjon

Bootstrap “skilt”Klasse brukes til å legge til merker på nettstedet. For eksempel klasser som "Badge-Danger”,“Badge-Info”, Og mer kan brukes til å legge til kontekstuell informasjon til merkene som etiketten. Noen klasser blir brukt for å legge til ikoner i merkene, for eksempel "FAR FA-TIMES-CIRCLE”For å plassere et kryss-sirkelikon. Dette innlegget har gitt en omfattende guide til Bootstrap -merker og etiketter.