Hvordan bruke Bootstrap 5 -kort

I Bootstrap 5 refererer et kort til en boks som har en grense og polstring rundt teksten. Den har flere alternativer for overskrifter, innhold, farger og bunntekst. Mer spesifikt brukes kortet til å inkludere funksjoner for webapplikasjoner som tabeller, skjemaer og andre bruker interaktive elementer.

Denne oppskrivningen vil illustrere bruken av bootstrap-kort ved å dekke følgende aspekter:

• Hvordan lage et enkelt kort?
• Hvordan lage en korthode og bunntekst?
• Hvordan lage et kort med innhold?
• Hvordan lage et kort med et bilde?
• Hvordan lage en knapp på et kort?
• Hvordan style kortet?
• Hvordan lage et kort med bildeoverlegg?
• Hvordan lage listegrupper på kort?
• Hvordan lage en navigasjonslinje på kortet?

Hvordan lage et enkelt kort?

“kort”Klasse med“Kortkropp”Brukes til å lage et enkelt kort.

La oss gå over eksemplet for å få en bedre forståelse.

Eksempel

Følg trinnene for å lage et enkelt kort i HTML -filen:

• Legg til en "” element og tilordne den en klasse “container”. Dette er en grunnleggende byggestein som inneholder polstring og justering til innholdet i en bestemt enhet.
• Så tilordne den en klasse “kort”Brukes til å lage et grunnleggende kort.
• For å spesifisere innholdet på kortet, oppretter du en div med klassen "Kortkropp”Det inneholder nødvendige data fra kortet:

Linuxhint -kort

---

Et kort i Bootstrap 5 er en boks med polstring rundt teksten og en grense.

Produksjon

Hvordan lage en korthode og bunntekst?

“Korthode" og "Kortfoter”Klasser brukes til å sette ut korthodet og bunnteksten. Å gjøre slik:

• Sett elementet med klassen “container”Og“M-4”.
• Juster div med klassen “kort”.
• Sett ned kortet ved å bruke klassen "Korthode”.
• Kortinformasjonen er plassert ved hjelp av “Kortfoter”Klasse på bunnteksten på kortet:

Bootstrap 5 -kort

Linuxhint School

---

Et kort i Bootstrap 5 er en boks med en grense og polstring rundt teksten.

Kontakt: xxx-xxx-xxxx

Produksjon

Hvordan lage et kort med innhold?

Du kan legge til innhold på kortet ved å bruke "Kortkropp”Utvidbart innholdsbeholder. Under nevnte klasser må inkluderes i denne klassen:

• “Korttittel”Justerer tittelen på kortet.
• “Korttekst”Beskriver teksten med stylingegenskapene på siden.
• “Kort-link”Assosierer en lenke til en annen kilde på siden:

Linuxhint -kort

Linuxhint er et utmerket opplæringsnettsted.

Innledende leksjon
Besøk vår hjemmeside

Produksjon

Hvordan lage et kort med et bilde?

Den mest populære måten å designe et kort er å legge til et bilde på kortet. For å gjøre det, bootstrap “Kort-img-top”Klasse brukes som følger:

Linuxhint School

For å få mer informasjon, besøk vårt offisielle nettsted.

Klikk her


Kontakt: xxx-xxx-xxxx

Produksjon

Hvordan lage en knapp på et kort?

Knappelementet kan legges til kortet. For dette formålet, implementer "btn”Klasse innenfor elementet. “btn-primary”Indikerer hovedaksjonen i en gruppe knapper og legger til ytterligere visuell vekt:

Linuxhint School

For å få mer informasjon, besøk vårt offisielle nettsted.

Klikk her


Kontakt: xxx-xxx-xxxx

Produksjon

Hvordan style kortet?

For å style Bootstrap Cards -beholderen, kan mange klasser brukes slik:

Linuxhint

Primær korttittel

Vi tilbyr artikler og videomelesninger til verden.

Linuxhint

Primær korttittel

Vi tilbyr artikler og videomelesninger til verden.

Produksjon

Hvordan lage et kort med bildeoverlegg?

“Kort-img-overlay”Klasse justerer bildet som bakgrunn. For å bruke det for det første, angi kortbildet ved å bruke "" stikkord. Dessuten er bredden på bildet satt som "100%”:

Videoavdeling

Vi tilbyr videoer av høy kvalitet på datavitenskapelige emner.

Mer informasjon

Produksjon

Hvordan lage listegrupper på kort?

For å identifisere gruppeelementene på et kort, implementerer Div “container”Klasse. Legg deretter til en "div" -beholder sammen med klassen "kort”.

For å opprette en liste, bruk "

”Og“
• ”Tagger med passende klasser:
  
  
  
  
  
  • Html
  
  
  • Støvelhempe
  
  
  • JavaScript
  
  
  
  
  

  Følgende er beskrivelsen av de ovennevnte bootstrap-klassene:

  • For å lage listegrupper, bootstrap “listegruppe”Klasse kan brukes. Det hjelper til å spesifisere en liste over innhold for kortet.
  • Ved å legge til “listegruppe-flush”, Kan du vise kant-til-kant-listegruppeelementer i en foreldrebeholder, i.e., kort. For å gjøre det, fjerner det avrundede hjørner og grenser.
  • “Liste-gruppe-elementer”Definerer listeelementene.

  Produksjon

  Hvordan lage en navigasjonslinje på kortet?

  Du kan også legge til en navigasjonslinje til kortene også. Mer spesifikt opprettes en skikkelig, godt justert navigasjonslinje ved hjelp av flere klasser:

  
  
  
  
  
  • 
    Hjem
    
  
  
  • 
    Selskap
    
  
  
  • 
    funksjonshemmet
    
  
  
  • 
    Kortinfo
    
  
  
  
  
  
  

  Helsekort

  
  

  Følg guiden for registreringen din

  
  Registrering
  
  

  Her:

  • “Nav Nav-Tabs”Klasse brukes til å lage navigasjonsfaner.
  • “Korthode-tabs”Klasse hjelper til med å style fanene i korthodet.
  • “Nav-element”Gir styling til navigasjonselementene.
  • “Nav-link”Brukes til å etablere koblingen til andre navigasjonsblokker.

  Produksjon

  Det handlet om å bruke bootstrap-klassene for å lage godt formaterte kort.

  Konklusjon

  Bootstrap 5 bruker mange klasser for å style og lage kortene. Disse klassene er med på å justere informasjon i et strukturert format. Noen av klassene er “Korttittel”,“Korttekst”,“Korthode”,“Kortfoter", og mange flere. Disse klassene tilbyr funksjonaliteter, for eksempel å spesifisere tittel, tekst, topptekst og kortfoter. Denne artikkelen har vist hvordan du bruker Bootstrap 5 -kort med forskjellige funksjonaliteter.