TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 kortin asettelut?

1

Edellisessä opetusohjelmassa olemme selittäneet erilaisia ​​tapoja luoda kortteja yksittäisenä osana. Koska kortit ovat kokoelma erilaisia ​​elementtejä, voit käyttää niitä täydellisten sivuasettelujen luomiseen, kuten muurausblogin hakemistosivut. Bootstrap 5 tarjoaa kolme CSS -oletusluokkaa sivun asettelujen luomiseen korteilla. Tässä opetusohjelmassa tarkastellaan lisää korttien asettelujen luomisesta.

Voit ladata tässä opetusohjelmassa käytettyjä asettelukoodeja täältä.

Korttien asettelutyypit

Bootstrap käyttää seuraavia kolmea CSS -luokkaa korttien asettelujen luomiseen:

  • kortti-ryhmä
  • korttipakkaus
  • kortti-sarakkeet

Näiden luokkien lisäksi voit luoda asettelun sijoittamalla yksittäisiä kortteja ruudukon oletusasettelusarakkeisiin .

Asettelu 1: Korttiryhmäasettelu

Voit käyttää ".card-group" -luokkaa ryhmittääksesi yksittäiset kortit joustavaksi laatikkoasetteluksi, jossa on yhtä korkeat sarakkeet. Alla on esimerkki kolmen kortin asettamisesta asetteluksi yhdessä korttiryhmien avulla.

Kuinka luoda Bootstrap 5 kortin asettelut?

Kuten näette, korttiryhmä näyttää kauniilta ilman yksittäisten korttien välistä aukkoa. Voit sekoittaa ja sovittaa kortin eri elementtejä Bootstrap -korttien opetusohjelmassa kuvatulla tavalla. Tässä esimerkissä olemme käyttäneet kolmea samanlaista korttia, joissa on kuva, otsikko, kuvaus ja alatunniste. Alla on korttiryhmäasettelun täydellinen koodi, periaatteessa olemme lisänneet korttiryhmäkoodin Bootstrap -aloitusmallin rungon väliin :

<!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>

Asettelu 2: Korttipakan asettelu

Luokka ".card-deck" luo korttiryhmän kaltaisen asettelun, mutta poikkeus on, että yksittäisten korttien välillä on marginaalinen ero, kuten alla on esitetty:

Kuinka luoda Bootstrap 5 kortin asettelut?

Korttipakan asettelussa käytetään myös joustavaa laatikkoa, jotta sarakkeessa on yhtä korkeat sarakkeet yksittäisten korttien sisällön koosta riippumatta.

Alla on täydellinen koodi korttipakan asettelun luomiseksi.

<!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>

Asettelu 3: Korttisarakkeiden asettelu tai muurausasettelu

Muurausasettelu on yksi suosituimmista tavoista esitellä blogin hakemistosivu yksittäisillä laatikoilla, jotka sopivat käytettävissä olevaan tilaan. Tässä yksittäisen kortin korkeus vaihtelee kortin todellisen koon mukaan. Alla on, miltä muurausasettelu näyttää .card-column-luokan avulla.

Kuinka luoda Bootstrap 5 kortin asettelut?

Alla oleva muurausasettelun täydellinen koodi on annettu alla:

<!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>

Voit lisätä jopa elementtejä tai vetää sen blogilistasta esittelemään sen hakemistosivuna.

Huomioitavaa:

  • Sinun on ehkä lisättävä 100% leveys muurausasettelussa käytettäviin kuviin, kuten .img-fluid {width: 100%;}.

  • Muista, että ".p-3" -luokkia käytetään pehmusteiden lisäämiseen korttiin, joka sisältää vain kuvaustekstin 1rem-täytteen lisäämiseksi.

  • Kortin asettelut eivät reagoi mobiililaitteisiin Bootstrap 5: n ensimmäisen julkaisun yhteydessä.

    • *

Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja