TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare un widget per la scheda del profilo utente con Bootstrap?

5

Bootstrap ha componenti più potenti rispetto alla precedente versione 3. Indubbiamente il componente della scheda è uno dei più eleganti e mobile friendly tra gli altri. Fondamentalmente puoi mescolare e abbinare le carte per creare diversi tipi di widget. In questo articolo parliamo di come creare un widget per la scheda del profilo utente Bootstrap. Usiamo Bootstrap versione 4 e puoi scaricare tutti i file necessari per questo widget qui.

Come appare?

Di seguito è riportato come apparirà il widget e puoi personalizzare i colori e l’aspetto secondo le tue necessità con le proprietà del colore di sfondo predefinite.

Come creare un widget per la scheda del profilo utente con Bootstrap?

Il widget ha le seguenti parti:

  • Nome, profilo, competenze e dettagli della piattaforma
  • Immagine del profilo
  • Tre dettagli del profilo social (puoi utilizzarli anche per scopi diversi)

Creiamo il widget

Di seguito è riportato il codice completo per il widget.

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

I primi tre tag div con "container-fluid", "row" e "col-12" idealmente non sono necessari per un singolo widget. Ma abbiamo usato per garantire che il widget possa essere inserito ovunque tra il layout Bootstrap con appropriati margini.

La parte principale del widget è fondamentalmente un componente della scheda con sottosezioni. Abbiamo usato la carta predefinita con "carta inversa" e usiamo lo stile in linea per assegnare i colori di sfondo e bordo come #333. La prossima è una sezione "card-block" con un elemento "row" diviso in griglie come di seguito:

Come creare un widget per la scheda del profilo utente con Bootstrap?

Fondamentalmente ci sono 5 griglie, una con “col-md-8 col-sm-8" e le restanti sono con classi “col-md-4 col-sm-4” per suddividere l’area. La sezione superiore ha 8+4 griglie e la sezione social inferiore ha 4+4+4 griglie.

Nota, abbiamo usato "md" e "sm" nelle classi della griglia come "col-md-8" e "col-sm-8". Questo creerà i punti di interruzione su dispositivi medi e piccoli per avere reattività.

Ora il layout di base è pronto e il passo successivo è aggiungere contenuti e abbellirli.

Sezione superiore

  • Nella prima sezione col-8, puoi aggiungere "titolo della carta" e "testo della carta" come nome e dettagli del profilo. La sezione della piattaforma utilizza il componente badge predefinito per evidenziare i tag in un colore diverso.
  • La seconda sezione col-4 ha un’immagine del profilo con le dimensioni di 128 × 128 pixel.

Sezione inferiore

  • La sezione inferiore ha tre sezioni "col-4" con collegamenti e descrizione del profilo social.

CSS aggiuntivi

Dovresti includere il collegamento CDN delle fantastiche icone dei caratteri per mostrare le icone sui pulsanti. Inoltre abbiamo personalizzato l’elemento pulsante utilizzando CSS aggiuntivi:

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

La stessa classe CSS viene utilizzata con l’immagine del profilo per avere un effetto ombra e lo stile in linea "border-radius:50%" viene utilizzato sull’immagine del profilo per cambiarla in forma di cerchio.

Variazioni

Puoi creare diversi stili di auto del profilo utente mescolando e abbinando i colori e il layout della griglia. Di seguito sono riportate alcune delle possibilità mostrate ad esempio:

Scheda profilo con immagine a sinistra

Come creare un widget per la scheda del profilo utente con Bootstrap?

Scheda del profilo utente con sfondo bianco

Come creare un widget per la scheda del profilo utente con Bootstrap?

Scheda profilo con sfondo principale (puoi impostare informazioni, avvisi, pericoli o colori di successo)

Come creare un widget per la scheda del profilo utente con Bootstrap?

Scheda utente con due colonne

Come creare un widget per la scheda del profilo utente con Bootstrap?

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More