TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap 5 -kort?

2

Bootstrap 4 introducerade en ny komponent som kallas kort. Komponenterna som paneler, miniatyrbilder och brunnar i Bootstrap 3 togs bort och tillverkades som en enda komponent som kallades kort i Bootstrap 4. Kort är mobilvänliga element och blev mest populära med användningen i Google Material Design. Låt oss i denna handledning diskutera hur du skapar olika kort i realtid med den senaste Bootstrap 5.

Du kan ladda ner exemplen som används i den här självstudien här.

Handledning för Bootstrap 5 -kort

Denna handledning täcker följande kapitel:

  1. Vad är kortkomponent?
  2. Grundläggande Bootstrap 5 -kort
  3. Storlek på kort
  4. Kort med undertexter och länkar
  5. Justera text
  6. Lägger till sidhuvud och sidfot
  7. Använda navigeringsflikar
  8. Bild längst ner på kortet
  9. Kort med bildöverlägg
  10. Inverterat eller svart kort
  11. Kort med bakgrundsfärger
  12. Konturkort
  13. Kortlayouter

1 Vad är kort i Bootstrap?

Kort är vätskebehållare innehåller sidhuvud, sidfot och innehåll. Innehållsdelen kan ha olika typer av element som titel, beskrivning, bild, knappar etc. Med mix och match av olika element finns det många möjligheter att skapa olika typer av kort. Vi täcker kort med grundläggande och mest tilltalande utseende.

2 grundläggande kort

Den grundläggande kortkomponenten kommer att ha en bild, titel, beskrivning och en knapp. Detta är den mest generiska formen för att använda kort på bloggar och sidlayoutdesigner.

Hur skapar jag Bootstrap 5 -kort?

Kodavsnittet för att skapa grundkortet ges nedan med komplett startmall :

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Basic Card with Image, Title and Description --> <div class="card" style="width:20rem;"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Helst finns det inget behov av skript för kort så länge bara enkla element används i kortblocket. Som du har märkt finns det många CSS -klasser som används för att skapa ett kort.

  • Kortet ska identifieras med klassen ".card" inslaget med a

    märka.

  • Bilden är ett valfritt element på kortet. För att inkludera bilden överst bör du lägga till en klass ".card-img-top". Den extra klassen ".img-fluid" läggs till för att säkerställa att bilden är lyhörd och passar in i behållarens bredd.

  • Kortet kan ha flera kortblock inslagna i ett separat

    tagg med en CSS-klass ".card-body". Varje kortblock innehåller innehållet för det blocket, till exempel titel, beskrivning, etc.

  • I vårt exempel har vi använt

    rubrik på titel med klassen ".card-title". Efter titeln har vi en kort beskrivning med

    tag med klassen ".card- text". Slutligen har vi en knapp identifierad med normal Bootstrap -knappklass.

Kom ihåg att ".card" och ".card-body" är tillräckliga för att ha ett kort med någon typ av innehåll inuti blocket.

3 Storlek på kortkomponent

Kortkomponenten är som standard flytande och sprids till behållarens hela bredd. I exemplet ovan har vi använt “style =" width: 20rem; “” för att begränsa bredden till 20 rem. Du kan använda olika sätt att begränsa bredden.

  • Använd inline -stil som i exemplet ovan.
  • Använda rutnätlayout.
  • Använda verktygsklasser för att justera bredd och höjd.

I alla våra exempel kommer vi att använda inline -stil för att göra kortet till en specifik bredd.

4 kort med textning och länkar

Låt oss börja ändra det grundläggande kortet för att ha en undertext och länkar istället för knappen. Undertexten kan läggas till med hjälp av ".card-subtitle" -klassen och bottenmarginalen ska läggas till för att skapa nödvändigt gap mellan titel och undertext. Länkar skapas med vanliga HTML -ankartaggar.

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This card has no image but has subtitle and two links instead of button.</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div>

Detta bör ge följande resultat i webbläsaren:

Hur skapar jag Bootstrap 5 -kort?

5 kort med textjustering

Som standard är kortelementen inriktade till vänster som kan ändras till höger och mitt med hjälp av ".text-höger" respektive ".text-center" klasserna till ". Kort-block" klassen.

<!-- Card with Center Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-center"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with center text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Card with Right Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-right"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with right text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

Det slutliga resultatet kommer att se ut nedan:

Hur skapar jag Bootstrap 5 -kort?

Bildelementet tas bort i exemplet ovan för att visa textjusteringen.

6 Lägga till sidhuvud och sidfot

Vad sägs om att lägga till sidhuvud och sidfot på kortet som liknar panelkomponenten i Bootstrap 3? Ja, du kan lägga till sidhuvud och sidfot med klasserna ".card-header" och ".card-footer" som nedan:

<div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-primary">Button</a> </div> <div class="card-footer"> This is a Footer </div> </div>

Kom ihåg att lägga till rubrik- eller sidfotsklasser för att separera

taggar före och efter avsnittet ".card-block". Utmatningen av kortet med sidhuvud och sidfot anges nedan:

Hur skapar jag Bootstrap 5 -kort?

7 Använda navigeringsflikar på kortet

Kortets rubrikdel kan använda standardnavigeringskomponenten för att konvertera kortet som en horisontell flik som nedan.

Hur skapar jag Bootstrap 5 -kort?

Koden för kortet med navigation ges nedan:

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link active" href="#">Tab1</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link" href="#">Tab2</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link disabled" href="#">Tab3</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">This is a title for tab 1</h4> <p class="card-text">This card uses navigation with default navigation components.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

8 Bild längst ner

Standardkortet har bilden ovanpå kortet som visas i det grundläggande kortexemplet. Du kan flytta bilden ner till kortet med ".card-img-bottom" och flytta

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> <img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down"> </div>

Kortet med bilden nere kommer att se ut nedan:

Hur skapar jag Bootstrap 5 -kort?

9 Kort med bildöverlägg

Istället för att ha bilden upp eller ner kan du lägga till alla textelement ovanpå bilden som ett överlägg som nedan:

Hur skapar jag Bootstrap 5 -kort?

<div class="card bg-dark text-white" style="width:20rem;"> <img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a short description to explain what this card is about.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> </div>

Klassen ".card-img-overlay" används inom

tag som täcker alla textelement för att överlagra dem på bilden. Här har vi använt “.card-inverse” för att konvertera texten till ljus färg eftersom vi har använt mörk bakgrundsbild. Du kan läsa mer om inverterat kort i nästa exempel.

10 Inverterat eller svart kort

Som standard använder textelementen på ett kort mörka färger förutsatt att bakgrundsfärgen är ljusfärgad (i allmänhet vit). Textfärgen kan enkelt omvandlas till en ljus färg med klassen ".text-vit". Kom ihåg att detta bara kommer att vända textfärgerna och du bör förklara bakgrunden manuellt till en mörk färg med klassen ".bg-dark" för att säkerställa läsbarheten.

Nedan visas koden för inverterat kort med svart bakgrundsfärg som deklareras med inline -stil.

<div class="card bg-dark text-white mb-3" style="background-color: #333;"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Go somehwere</a> </div> </div>

Det inverterade kortet ska se ut nedan:

Hur skapar jag Bootstrap 5 -kort?

11 kort med olika bakgrundsfärger

Att titta på korten med vit bakgrund blir tråkigt. Använd någon av bakgrundsverktygsklasserna för att lägga till färgstark bakgrund till kortkomponenten. Du kan byta till en av bakgrundsfärgerna som primär, sekundär, framgång, ljus, mörk, varning, info eller fara. Nedan visas kortet med rubrik och olika bakgrundsfärger.

<div class="card text-white bg-primary mb-3"> <div class="card-header">Primary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card text-white bg-secondary mb-3"> <div class="card-header">Secondary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with secondary color background.</p> </div> </div> <div class="card text-white bg-success mb-3"> <div class="card-header">Success</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card text-white bg-info mb-3"> <div class="card-header">Info</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card text-white bg-warning mb-3 text-center"> <div class="card-header">Warning</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p> </div> </div> <div class="card text-white bg-danger mb-3 text-center"> <div class="card-header">Danger</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background and aligned center.</p> </div> </div> <div class="card bg-light mb-3 text-center"> <div class="card-header">Light</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with light color background and aligned center.</p> </div> </div> <div class="card text-white bg-dark mb-3 text-center"> <div class="card-header">Dark</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with dark color background and aligned center.</p> </div> </div>

Kom ihåg att inkludera klassen ".text-vit" eftersom alla dessa bakgrunder är mörkare, vilket kräver att texten är ljusare.

Kort med olika bakgrundsfärger visas nedan:

Hur skapar jag Bootstrap 5 -kort?

12 konturkort

Konturkorten kommer att ha vanlig vit bakgrund med olika kantfärger med ".card-outline-primary", ". Card-outline-sekundär", ". Card-outline-success", ". Card-outline-info", " .kort-kontur-varning “och”. kort-kontur-fara “klasser.

<div class="card border-primary mb-3 text-center"> <div class="card-header">Primary Border</div> <div class="card-body text-primary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-secondary mb-3 text-center"> <div class="card-header">Secondary Border</div> <div class="card-body text-secondary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-light mb-3 text-center"> <div class="card-header">Light Border</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-dark mb-3 text-center"> <div class="card-header">Dark Border</div> <div class="card-body text-dark"> <p>This is a card text paragraph with secondary color background without title.</p> <footer>Quote by <cite title="Source Title">Someone said</cite></footer> </div> </div> <div class="card border-success mb-3 text-center"> <div class="card-header">Success Border</div> <div class="card-body text-success"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card border-info mb-3 text-center"> <div class="card-header">Info Border</div> <div class="card-body text-info"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card border-warning mb-3 text-center"> <div class="card-header">Warning Border</div> <div class="card-body text-warning"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background.</p> </div> </div> <div class="card border-danger text-center"> <div class="card-header">Danger Border</div> <div class="card-body text-danger"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background.</p> </div> </div>

Konturkort kommer att se ut nedan:

Hur skapar jag Bootstrap 5 -kort?

13 Bootstrap 5 kortlayouter

Alla ovanstående exempel handlar om att skapa kort som en enda komponent. Bootstrap erbjuder också tre klasser för att skapa kortlayout som är mer lämpad för blogglayouter.

  • kortgrupp
  • kortlek
  • kortkolumner

Vi kommer att diskutera dessa kortlayoutklasser i vår nästa handledning.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer