Kuinka luoda mukautettuja Bootstrap -vinoja kortteja?

Meidän Bootstrap opetusohjelmia, olemme selittänyt kortit komponentin yksityiskohtaisesti. Koska korttikomponentti on yksi houkuttelevimmista komponenteista, näet monia muunnelmia kaikkialla Internetissä. Olemme myös selittäneet flip card widgetin ja käyttäjäprofiilin widgetin mukautukseksi. Tässä artikkelissa luomme mukautettuja Bootstrap -vinoja kortteja eri tyyleissä.

Mikä on vino kortti?

Vinous ei ole muuta kuin elementtien kiertäminen johonkin X- tai Y -suuntaan. Tämä on erittäin helppo saavuttaa käyttämällä CSS -muunnosominaisuutta. Luo esimerkissämme seuraavat muunnelmat:

• Vino kortti, jonka aste on negatiivinen X -akselilla
• Vino kortti positiivinen aste X -akselilla
• Vino kortin perspektiivin negatiivinen aste Y -akselilla
• Vino kortin perspektiivi positiivinen aste Y -akselilla
• Vino kortti, jossa on pelkkä teksti ja otsikko

Käytämme upotettua CSS: ää käytettyjen tyylien osoittamiseen. Voit määrittää kaikki tyylit ulkoisessa CSS: ssä, jos sinulla on sellainen Bootstrap -teemallasi. Kaikissa tyypeissä sinun tarvitsee vain lisätä "transform: skewX()" tai "transform: skewY ()" olemassa olevaan .card -luokkaan. Lisäksi olemme käyttäneet myös 1rem (20px) marginaalille ja 20rem marginaalille leveys asianmukaista kohdistusta varten.

Vino kortti, jossa on negatiivinen X -suunta

Luodaan vino kortti, jossa on -8 astetta X -akselin suunnassa, alla on sama koodi:

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewX(-8deg);">
<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-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

Tulos näyttää seuraavalta selaimessa:

Vino kortti positiivisella X -suunnalla

Vaihda nyt negatiivinen aste positiiviseksi skewX (): ssä, jos haluat muuttaa vinouden suuntaa.

<div class="row" style="margin:20px;">
<div class="card" style="width:20rem;transform: skewX(8deg);">
<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-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

Sen pitäisi tuottaa alla oleva lähtö:

Perspektiivikortti negatiivisella Y -akselilla

Vaihda nyt skewX () arvoon vinossa () luodaksesi -8 asteen perspektiivikortin.

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewY(-8deg);">
<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-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

Negatiivisen kulman omaavan perspektiivikortin pitäisi näyttää tältä:

Perspektiivikortti positiivisessa Y -akselissa

Luo samalla tavalla positiivinen perspektiivikortti muuttamalla vinossa () +8 astetta.

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewY(8deg);">
<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-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

Se tuottaa seuraavan tuloksen:

Vino kortti, jossa on pelkkä teksti ja otsikko

Kaikissa yllä olevissa esimerkeissä otsikko, teksti ja painiketeksti ovat myös vinossa, kun vinoutta käytetään korttitasolla. Tämä on järkevää perspektiivitapauksissa (Y -akseli), mutta kun vinossa käytetään X -akselia, tekstin sisältöä ei tarvitse vääristää. Jos haluat palauttaa tekstin normaaliksi, käytä samoja asteita vastakkaiseen suuntaan.

Alla on esimerkkikoodi, jossa +8 astetta käytetään korttitasolla ja -8 astetta kortin rungon tasolla tekstin normalisoimiseksi.

<div class="row" style="margin:1rem;">
<div class="card" style="width:20rem;transform: skewX(8deg);">
<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" style="transform: skewX(-8deg);">
<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-md btn-primary">Primary Button</a>
</div>
</div>
</div>

Väärän kortin, jossa on pelkkää tekstiä, pitäisi näyttää alla olevalta, jolloin tekstistä tulee luettavampaa.

Säätö mobiililaitteissa

Yllä olevat vääristyneet kortit voivat näyttää hyvältä pöytäkoneilla. Mutta ne menevät mobiililaitteiden näytön ulkopuolelle luoden vaakasuuntaisen vierityspalkin. Käytä alla olevaa CSS -mediakyselyä saadaksesi kortin näyttämään normaalilta mobiililaitteissa alle 480 kuvapistettä. Tämä tarkoittaa lähinnä sitä, että teemme kortin ilman vinoutumista mobiililaitteissa, kun taas vinous näkyy suuremmissa laitteissa.

<style>
@media screen and (max-width: 480px) {
.card {
width:20rem !important;
margin: 0 !important;
flex-direction: column !important;
-ms-flex-direction: column !important;
transform: skewX(0deg) !important;
transform: skewY(0deg) !important;
border-radius: 0 !important;
}
.card-body {
transform: skewX(0deg) !important; 
}
}
</style>

Mukautuksia

Jos olet huomannut, kaikkiin yllä oleviin koodeihin on lisätty "btn-md" -luokka painike-elementtiin. Tämä ei ole oletusarvoinen Bootstrap -luokka, vaan olemme lisänneet ruudun varjotehosteen näyttämiseen. Myös joitain lisätehosteita voidaan lisätä reunan säteen siirtämiseksi ja poistamiseksi.

<style>
.card:hover {
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.19),0 0.3rem 0.3rem rgba(0,0,0,.23);
}
.btn-md {
border-width: 0;
outline: none;
border-radius: 0 !important;
box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, .6);
cursor: pointer;
}
.btn-md:hover {
background-color: black;
}
.card, .card-img-top {
border-radius: 0 !important;
}
</style>

Voit käyttää mediakyselyä ja muita mukautustyylejä ulkoisessa tyylitaulukossa. Jos lisäät tyylejä sivusi otsikon sisälle, älä unohda käyttää yhdistelmää ja laita kaikki koodit… -tagien sisään. Muista luoda erilliset CSS-luokat kullekin vaaditulle tyylille, kuten ".btn-md" -luokalle, ja käytä sivullasi tarvittavia kortteja. Muussa tapauksessa kaikki sivun korttielementit kärsivät, jos käytät tyylejä pääosassa tai ulkoisessa tyylitaulukossa.