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

Kuinka luoda Bootstrap 5 -kortteja?

4

Bootstrap 4 esitteli uuden komponentin nimeltä kortit. Bootstrap 3: n osat, kuten paneelit, pikkukuvat ja kaivot, poistettiin ja niistä tehtiin yksi komponentti, nimeltään Bootstrap 4: n kortit. Kortit ovat mobiiliystävällisiä elementtejä ja niistä tuli suosituimpia Googlen materiaalisuunnittelussa. Tässä opetusohjelmassa keskustelemme kuinka luoda erilaisia ​​kortteja reaaliajassa uusimman Bootstrap 5: n avulla.

Voit ladata tässä opetusohjelmassa käytetyt esimerkit täältä.

Bootstrap 5 -korttien opetusohjelma

Tämä opetusohjelma kattaa seuraavat luvut:

  1. Mikä on kortin komponentti?
  2. Basic Bootstrap 5 -kortti
  3. Korttien mitoitus
  4. Kortti tekstityksellä ja linkkeillä
  5. Tasaus teksti
  6. Ylätunnisteen ja alatunnisteen lisääminen
  7. Navigointivälilehtien käyttäminen
  8. Kuva kortin alareunassa
  9. Kortti, jossa on kuvakerros
  10. Käänteinen tai musta kortti
  11. Kortit taustavärillä
  12. Ääriviivat kortit
  13. Korttien asettelut

1 Mitä kortit ovat Bootstrapissa?

Kortit ovat nestesäiliö, joka sisältää otsikon, alatunnisteen ja sisällön. Sisältöosassa voi olla erityyppisiä elementtejä, kuten otsikko, kuvaus, kuva, painikkeet jne. Eri elementtien sekoittamisella on monia mahdollisuuksia luoda erilaisia ​​kortteja. Peitämme kortit, joilla on yksinkertainen ja houkuttelevin ulkonäkö.

2 Peruskorttia

Peruskorttikomponentissa on kuva, otsikko, kuvaus ja painike. Tämä on yleisin tapa käyttää kortteja blogeissa ja sivun ulkoasumalleissa.

Kuinka luoda Bootstrap 5 -kortteja?

Koodinpätkä peruskortin luomiseksi on annettu täydellisellä aloitusmallilla :

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

Ihannetapauksessa kortteja varten ei tarvita skriptejä, kunhan korttilohkossa käytetään vain yksinkertaisia ​​elementtejä. Kuten olet huomannut, kortin luomiseen käytetään paljon CSS -luokkia.

  • Kortti on tunnistettava ".card" -luokalla, joka on kääritty a

    tag.

  • Kuva on valinnainen elementti kortissa. Jos haluat lisätä kuvan päälle, sinun on lisättävä luokka ".card-img-top". Lisäluokka ".img-fluid" lisätään sen varmistamiseksi, että kuva reagoi ja mahtuu säiliön leveyteen.

  • Kortissa voi olla useita korttilohkoja, jotka on kääritty erilliseen korttiin

    tunniste CSS-luokalla .card-body. Jokainen korttilohko sisältää kyseisen lohkon sisällön, kuten otsikon, kuvauksen jne.

  • Esimerkissämme olemme käyttäneet

    otsikko otsikolle luokalla ".card-title". Otsikon jälkeen meillä on lyhyt kuvaus

    tunnisteella luokalla ".card- text”. Lopuksi meillä on painike, joka on tunnistettu normaalilla Bootstrap -painikeluokalla.

Muista, että ".card" ja ".card-body" riittävät korttiin, jossa on kaikenlaista sisältöä lohkon sisällä.

3 Kortin osan mitoitus

Kortin osa on oletuksena nestemäinen ja levitetty säiliön koko leveydelle. Yllä olevassa peruskorttiesimerkissä olemme käyttäneet "style =" width: 20rem; "" rajoittaaksesi leveyden 20rem. Voit rajoittaa leveyttä eri tavoilla.

  • Sisäisen tyylin käyttäminen kuten yllä olevassa esimerkissä.
  • Ruudukon asettelun käyttäminen.
  • Leveyden ja korkeuden säätäminen hyödyllisyysluokkien avulla.

Kaikissa esimerkeissämme käytämme inline -tyyliä kortin asettamiseksi tietylle leveydelle.

4 Kortti tekstityksellä ja linkkeillä

Aloitetaan peruskortin muokkaaminen siten, että siinä on tekstitys ja linkit painikkeen sijaan. Tekstitys voidaan lisätä käyttämällä .card-subtitle -luokkaa ja alareunus on lisättävä, jotta otsikon ja tekstityksen välille syntyy vaadittu aukko. Linkit luodaan tavallisilla HTML -ankkuritunnisteilla.

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

Tämän pitäisi tuottaa seuraava tulos selaimessa:

Kuinka luoda Bootstrap 5 -kortteja?

5 Kortti tekstin kohdistuksella

Oletusarvoisesti korttielementit on kohdistettu vasemmalle, mikä voidaan muuttaa oikealle ja keskelle käyttämällä ".text-right" ja ".text-center" -luokkia vastaavasti ".card-block" -luokkaan.

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

Lopputulos näyttää tältä:

Kuinka luoda Bootstrap 5 -kortteja?

Kuvaelementti poistetaan yllä olevasta korttiesimerkistä tekstin kohdistuksen esittelemiseksi.

6 Ylä- ja alatunnisteen lisääminen

Entä otsikon ja alatunnisteen lisääminen korttiin, joka muistuttaa Bootstrap 3: n paneelikomponenttia? Kyllä, voit lisätä ylätunnisteen ja alatunnisteen käyttämällä ".card-header"-ja ".card-footer" -luokkia, kuten alla:

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

Muista lisätä ylä- tai alatunnisteluokat erotettavaksi

tunnisteita ennen ja jälkeen .card-block-osion. Ylätunnisteen ja alatunnisteen sisältävän kortin tulos on esitetty alla:

Kuinka luoda Bootstrap 5 -kortteja?

7 Kortin navigointivälilehtien käyttäminen

Kortin otsikko -osassa voidaan käyttää oletusnavigointikomponenttia kortin muuntamiseen kuten alla oleva vaakasuora välilehti.

Kuinka luoda Bootstrap 5 -kortteja?

Navigointikortin koodi on annettu alla:

<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 Kuva alhaalla

Oletuskortilla on kuva kortin päällä, kuten peruskorttiesimerkissä. Voit siirtää kuvan alas kortille käyttämällä ".card-img-bottom" ja siirtää

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

Kortti, jossa kuva on alaspäin, näyttää tältä:

Kuinka luoda Bootstrap 5 -kortteja?

9 Kortti, jossa on kuvan peittokuva

Sen sijaan, että kuva olisi ylös tai alas, voit lisätä kaikki tekstielementit kuvan päälle kuten alla oleva peittokuva :

Kuinka luoda Bootstrap 5 -kortteja?

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

Sisällä käytetään luokkaa .card-img-overlay

-tunniste, joka kattaa kaikki tekstielementit ja peittää ne kuvassa. Tässä olemme käyttäneet ".card-käänteistä" tekstin muuttamiseksi vaaleaksi, kun olemme käyttäneet tummaa taustakuvaa. Voit lukea lisää käänteisestä kortista seuraavassa esimerkissä.

10 Käänteinen tai musta kortti

Oletuksena kortin tekstielementit käyttävät tummia värejä olettaen, että taustaväri on vaalea (yleensä valkoinen). Tekstin väri voidaan helposti muuttaa vaaleaksi käyttämällä ".text-white" -luokkaa. Muista, että tämä vain kääntää tekstin värit ja sinun tulee julistaa tausta manuaalisesti tummaksi käyttämällä .bg-dark-luokkaa luettavuuden varmistamiseksi.

Alla on käänteisen kortin koodi, jonka musta taustaväri on ilmoitettu inline -tyylillä.

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

Käänteisen kortin pitäisi näyttää tältä:

Kuinka luoda Bootstrap 5 -kortteja?

11 korttia erilaisilla taustavärillä

Valkoisella taustalla olevien korttien katsominen on tylsää. Käytä mitä tahansa taustatyökaluluokkia lisätäksesi värikkäitä taustoja korttikomponenttiin. Voit vaihtaa johonkin taustaväristä, kuten ensisijainen, toissijainen, menestys, vaalea, tumma, varoitus, tiedot tai vaara. Alla on kortti otsikolla ja erilaisilla taustavärillä.

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

Muista sisällyttää ".text-white" -luokka, koska kaikki nämä taustat ovat tummempia, joten tekstin on oltava vaaleampaa.

Kortit, joissa on eri taustavärit, on esitetty alla:

Kuinka luoda Bootstrap 5 -kortteja?

12 ääriviivakorttia

Ääriviivakorttien taustalla on tavallinen valkoinen tausta ja eri reunusvärit käyttämällä ".card-outline-ensisijainen", ". Card-outline-toissijainen", ". Card-outline-success", ". Card-outline-info", " .card-outline-varoitus “ja” .card-outline-riski “-luokat.

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

Outline -kortit näyttävät tältä:

Kuinka luoda Bootstrap 5 -kortteja?

13 Bootstrap 5 kortin asettelu

Kaikki yllä olevat esimerkit käsittelevät kortin luomista yhdeksi komponentiksi. Bootstrap tarjoaa myös kolme luokkaa kortin asettelun luomiseksi, joka sopii paremmin blogin asetteluihin.

  • kortti-ryhmä
  • korttipakkaus
  • kortti-sarakkeet

Keskustelemme näistä korttiasetteluluokista seuraavassa opetusohjelmassa.


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