Componente dell'interfaccia utente dell'avatar reattivo per Bootstrap 5

Blog

Componente dell'interfaccia utente dell'avatar reattivo per Bootstrap 5

Avatar di Bootstrap

Una raccolta di CSS fissi e reattivi per lo styling degli avatar.



dove comprare zap coin

Installazione

jsDelivr CDN

La versione CDN può essere utilizzata senza Bootstrap se lo si desidera.

Build bootstrap

Il pacchetto contiene un file chiamato |_+_| che può essere incorporato negli strumenti di compilazione standard di Bootstrap.



Installa tramite npm:

_avatar.scss

Aggiungi la seguente riga (o simile) al tuo file scss di primo livello:



npm install bootstrap-avatar

Esempi

Avatar con icone Bootstrap

@import 'node_modules/bootstrap-avatar/scss/avatar';

Avatar con testo arrotondato

Avatar con icone Bootstrap

Avatar reattivi

Puoi creare avatar che ridimensionano di base sulla larghezza della finestra:

b b b b b b b

Questo esempio usa il Bootstrap persona-cerchio icon come SVG in linea quindi aggiunge le classi responsive |_+_|, |_+_| ecc in modo che l'immagine cresca con le dimensioni dello schermo.

nodo js deep learning

Questi esempi e altri possono essere trovati nell'esempio index.html .

Sviluppo

Impostare

  • Clona il repository
  • Esegui |_+_|

Costruire

I file CSS sono generati da |_+_| attraverso:

Servire

-md-24

Questo repository è gestito da Ghoststead .

Scarica i dettagli:

Autore: ghoststead

Codice sorgente: https://github.com/ghoststead/bootstrap-avatar

#bootstrap #javascript #css