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

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

9

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.

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

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:

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

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

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

Käyttäjäprofiilikortti valkoisella taustalla

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

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

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

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

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

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