Kuinka luoda käyttäjäprofiilikortti -widget Bootstrapilla?

Bootstrapissa on tehokkaampia komponentteja kuin edellisessä versiossa 3. Epäilemättä korttikomponentti on yksi tyylikkäistä ja mobiiliystävällisistä. Pohjimmiltaan voit sekoittaa ja sovittaa kortteja erilaisten widgetien luomiseksi. Tässä artikkelissa keskustellaan Bootstrap -käyttäjäprofiilikortin widgetin luomisesta. Käytämme Bootstrap -versiota 4 ja voit ladata kaikki tähän widgettiin tarvittavat tiedostot täältä.

Miltä se näyttää?

Alla on, miten widget näyttää ja voit muokata värejä ja näyttää tarpeidesi mukaan taustavärien oletusominaisuuksilla.

Widgetissä on seuraavat osat:

• Nimi, profiili, taidot ja alustan tiedot
• Profiilikuva
• Kolme sosiaalisen profiilin tietoa (voit käyttää myös eri tarkoituksiin)

Luo widget

Alla on widgetin täydellinen koodi.

<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-block">
<div class="row">
<div class="col-md-8 col-sm-8">
<h2 class="card-title">Name: Stffanie Osterich</h2>
<p class="card-text"><strong>Profile: </strong> Web Developer </p>
<p class="card-text"><strong>Skills: </strong> Theme, plugin and website development </p>
<p><strong>Platform: </strong>
<span class="badge bg-primary">WordPress</span> 
<span class="badge bg-info">Weebly</span>
<span class="badge bg-warning">Bootstrap</span>
<span class="badge bg-success">Wix</span>
</p>
</div>
<div class="col-md-4 col-sm-4 text-center">
<img class="btn-md" src="assets/images/card-image.png" alt="" style="border-radius:50%;">
</div>         
<div class="col-md-4 col-sm-4 text-center">
<h2><strong> 5.2K </strong></h2>                    
<p><small>Fans</small></p>
<button class="btn btn-primary btn-block btn-md"><span class="fa fa-facebook-square"></span> Like  </button>
</div>
<div class="col-md-4 col-sm-4 text-center">
<h2><strong>1.4K</strong></h2>                    
<p><small>Following</small></p>
<button class="btn btn-success btn-block btn-md"><span class="fa fa-twitter-square"></span> Tweet </button>
</div>
<div class="col-md-4 col-sm-4 text-center">
<h2><strong>3.8K</strong></h2>                    
<p><small>Followers</small></p>
<button type="button" class="btn btn-danger btn-block btn-md"><span class="fa fa-google-plus-square"></span> Follow </button>  
</div>
</div>
</div>
</div>
</div>
</div> 
</div>

Kolme ensimmäistä div-tunnistetta, joissa on "container-fluid", "row" ja "col-12", eivät ole ihanteellisia yhdelle widgetille. Mutta varmistimme, että widget voidaan lisätä mihin tahansa Bootstrap-asettelun väliin sopivalla tavalla marginaalit.

Widgetin pääosa on pohjimmiltaan korttikomponentti, jossa on alaosia. Olemme käyttäneet oletuskorttia "käänteiskortilla" ja käytämme inline-tyyliä taustan ja reunuksen värien määrittämiselle #333. Seuraavaksi on korttilohko-osa, jossa on rivi-elementti, joka on jaettu alla oleviin ruudukkoihin:

Pohjimmiltaan on 5 ruudukkoa, joista toisessa on "col-md-8 col-sm-8" ja loput luokissa "col-md-4 col-sm-4" alueen jakamiseksi. Yläosassa on 8+4 ruudukkoa ja alemmassa sosiaalisessa osassa on 4+4+4 ristikkoa.

Huomaa, että olemme käyttäneet "md” ja “sm” ruudukoluokissa “col-md-8” ja “col-sm-8”. Tämä luo keskeytyskohdat keskikokoisille ja pienille laitteille reagoimaan.

Nyt perusasettelu on valmis ja seuraava askel on lisätä sisältöä ja kaunistaa sitä.

Yläosa

• Ensimmäisen sarakkeen 8 osion alle voit lisätä “kortin otsikon” ja “kortin tekstin” nimellä ja profiilin tiedoilla. Alusta osio käyttää oletuksena merkki komponentti korostamaan tunnisteet eri väriä.
• Toisessa col-4-osassa on profiilikuvan koko, jonka koko on 128 × 128 pikseliä.

Alaosa

• Alaosassa on kolme col-4-osaa, joissa on sosiaalisen profiilin linkit ja kuvaus.

Lisä CSS

Sinun pitäisi lisätä fontin mahtavien kuvakkeiden CDN -linkki, jotta kuvakkeet voidaan näyttää painikkeissa. Lisäksi olemme räätälöineet painike -elementtiä käyttämällä ylimääräistä CSS: tä:

<style>
.btn{
border-radius: 0;
}
.btn-md {
border-width: 0;
outline: none;
border-radius: 0;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
cursor: pointer;
} 
</style>

Samaa CSS-luokkaa käytetään profiilikuvan kanssa varjotehosteen saamiseksi, ja profiilikuvassa käytetään sisäistä tyyliä "border-radius: 50%" sen muuttamiseksi ympyrän muotoiseksi.

Muunnelmat

Voit luoda erilaisia ​​käyttäjäprofiiliautojen tyylejä sekoittamalla ja sovittamalla värejä ja ruudukon asettelua. Alla on muutamia esimerkkejä näytetyistä mahdollisuuksista:

Profiilikortti ja vasen kuva

Käyttäjäprofiilikortti valkoisella taustalla

Profiilikortti ensisijaisella taustalla (voit asettaa tieto-, varoitus-, vaara- tai menestysvärit)

Käyttäjäkortti, jossa on kaksi saraketta