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

Hur skapar jag Bootstrap 5 -kortlayouter?

2

I vår tidigare handledning har vi förklarat olika sätt att skapa kort som en individuell komponent. Eftersom kort är en samling av olika element kan du använda dem för att skapa kompletta sidlayouter som murade bloggindexsidor. Bootstrap 5 erbjuder tre standard CSS -klasser för att skapa sidlayouter med kort. Låt oss i den här självstudien utforska mer om hur du skapar kortlayouter.

Du kan ladda ner exempel på layoutkoder som används i den här självstudien här.

Typer av kortlayouter

Bootstrap använder följande tre CSS -klasser för att skapa kortlayouter:

  • kortgrupp
  • kortlek
  • kortkolumner

Förutom dessa klasser kan du skapa layout genom att placera enskilda kort i standardkolumner för rutnätlayout.

Layout 1: Kortgruppslayout

Du kan använda klassen ".card-group" för att gruppera enskilda kort i en flexbox-layout med kolumner med samma höjd. Nedan följer ett exempel som grupperar tre kort som en layout tillsammans med kortgrupper.

Hur skapar jag Bootstrap 5 -kortlayouter?

Som du kan se kommer kortgruppen att se vacker ut utan mellanrum mellan enskilda kort. Du kan blanda och matcha olika element inuti korten som diskuteras i Bootstrap -kortens handledning. I det här exemplet har vi använt tre liknande kort med bild, titel, beskrivning och sidfot. Nedan är den fullständiga koden för kortgruppslayouten, i princip har vi infogat kortgruppskod mellan kroppen i Bootstrap -startmallen :

<!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> <!-- Start of Card Groups Layout --> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 3"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Groups Layout --> <!-- 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>

Layout 2: Layout för kortdäck

Klassen ".card-deck" skapar layout som liknar kortgruppen med undantag för att det kommer att finnas ett marginellt gap mellan enskilda kort enligt nedan:

Hur skapar jag Bootstrap 5 -kortlayouter?

Kortlekens layout använder också flexbox för att ha kolumner med samma höjd i en behållare oavsett innehållsstorlek för enskilda kort.

Nedan finns hela koden för att skapa en kortlekslayout.

<!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> <!-- Start of Card Deck Layout --> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Deck Layout --> <!-- 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>

Layout 3: Kortkolumner Layout eller Murverk Layout

Murverkslayout är ett av de populära sätten att visa upp bloggindex med individuella rutor som passar in i det tillgängliga utrymmet. Här kommer höjden på det enskilda kortet att vara annorlunda baserat på kortets faktiska storlek. Nedan ser du hur murverkets layout kommer att se ut med klassen ".card-columns".

Hur skapar jag Bootstrap 5 -kortlayouter?

Den fullständiga koden för ovanstående murverkslayout ges nedan:

<!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> <!-- Start of Card Columns Layout --> <div class="card-columns"> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and you can enter longer text to check the cards are aligned perfectly like on the masonry layout.</p> </div> </div> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 bg-dark text-white"> <blockquote class="blockquote mb-0"> <p>This is a blockquote and you can enter any quote from anyone.</p> <footer> <small class="text-muted"> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card bg-primary p-3 text-center text-white"> <blockquote class="blockquote mb-0"> <p>Here is a description for primary card.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p>Here is a short description of the card without image.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Here is a short description without title and image.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a long description for your card, enter anything you would like to enter here.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card"> <img class="card-img img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Image Only Card"> </div> </div> <!-- End of Card Columns Layout --> <!-- 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>

Du kan lägga till så många som element eller dra det från bloggrullen för att visa det som en indexsida.

Poäng att notera:

  • Du kan behöva lägga till 100% bredd till de bilder som används i murverkslayouter som .img-fluid {width: 100%;}.

  • Kom ihåg att ".p-3" -klassen används för att lägga till stoppning på kortet som endast innehåller beskrivningstext för att lägga till 1rem-stoppning.

  • Kortlayouter reagerar inte på mobila enheter med den första Bootstrap 5 -versionen.

    • *

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