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

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

1

Il framework Bootstrap offre molte funzionalità facili da usare e le barre di avanzamento sono una di queste. Molti tipi diversi di barre di avanzamento possono essere creati con Bootstrap e in questo articolo ne discuteremo alcuni con il codice CSS. Scopri i tutorial completi su come creare barre di avanzamento con Bootstrap 5.

Come aggiungere barre di avanzamento Bootstrap su Weebly?

Passaggio 1 – Collegamento CSS Bootstrap

Per aggiungere barre di avanzamento il primo passo è collegare il CSS Bootstrap al tuo sito Weebly. Aggiungi il codice seguente in "Impostazioni > SEO > Codice intestazione ".

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

Puoi anche collegare il foglio di stile a livello di pagina se vuoi che le barre di avanzamento siano solo su quella pagina.

Passaggio 2: aggiunta di CSS aggiuntivi per le barre di avanzamento

Aggiungi il codice CSS sottostante nella sezione "Codice intestazione" della pagina in cui desideri aggiungere le barre di avanzamento. La classe ".margin" viene utilizzata per creare un margine di 10px in modo che le barre non vengano troncate.

<style> .margin { margin: 10px; } .progress { background-color: #FFFFFF; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .progress-label { font-size: 18px; padding: 8px 0; } .progress-xxs { height: 3px; } .progress-xs { height: 8px; } .progress-sm { height: 12px; } .progress-bar-red { background: #8b2626; } .progress-bar-blue { background: #43668c; } .progress-bar-green { background: #649f2b; } .progress-bar-aqua { background: #86b998; } .progress-bar-yellow { background: #d0b426; } .progress-bar-brown { background: #6f6f55; } .progress-bar-violet { background: #8270a4; } .progress-bar-orange { background: #ae6926; } .sr-only { position: relative !important </style>

Passaggio 3: aggiunta di HTML per le barre di avanzamento

Di seguito è riportato il codice HTML insieme all’immagine di come appare sul sito Weebly. Le barre possono essere utilizzate come elementi a tutta larghezza o come parte di una colonna. Il testo, la percentuale e i colori possono essere personalizzati secondo le tue esigenze.

Barre di avanzamento sottili

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

<!-- Thin Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Thin Size Progress Bars -->

Di medie dimensioni

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

<!-- Medium Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Medium Size Progress Bars -->

Dimensione spessa

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

<!-- Thick Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Thick Size Progress Bars -->

Dimensione predefinita

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

<!-- Default Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Default Size Progress Bars -->

Barre colorate

I colori sono definiti nel CSS aggiuntivo nel passaggio 2 e puoi aggiungere qualsiasi colore desideri.

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

Le barre sono posizionate in due colonne usando la classe "col-md-6", puoi rimuovere questa classe per rendere le barre a tutta larghezza.

<div class="col-md-6"> <!-- Red --> <h3 class="progress-label">Red <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> </div> </div> <!-- End Red --> <!-- Blue --> <h3 class="progress-label">Blue <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%"> </div> </div> <!-- End Blue --> <!-- Green --> <h3 class="progress-label">Green <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%"> </div> </div> <!-- End Green --> <!-- Aqua --> <h3 class="progress-label">Aqua <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> <!-- End Aqua --> </div> <div class="col-md-6"> <!-- Yellow --> <h3 class="progress-label">Yellow <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> </div> </div> <!-- End Yellow --> <!-- Brown --> <h3 class="progress-label">Brown <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-brown" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%"> </div> </div> <!-- End Brown --> <!-- Violet --> <h3 class="progress-label">Violet <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-violet" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%"> </div> </div> <!-- End Violet --> <!-- Orange --> <h3 class="progress-label">Orange <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> <!-- End Orange --> </div> <!-- End Colored Progress Bars -->

Barre colorate con testo sopra

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

<!-- Colored Progress Bars with Text --> <div class="margin"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete (info)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60%Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete (danger)</span> </div> </div> </div> <!-- End Colored Progress Bars with Text -->

Barre a righe

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

<!-- Striped Progress Bars --> <div class="margin"> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80% Complete (info)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60%Complete (warning)</span> </div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete (danger)</span> </div> </div> </div> <!-- End Striped Progress Bars -->

Barre animate

Come aggiungere barre di avanzamento Bootstrap sul sito Weebly?

<!-- Animated Progress Bars --> <div class="margin"> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete (info)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80%Complete (warning)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete (danger)</span> </div> </div> </div> <!-- End Animated Progress Bars -->

Nota: poiché Bootstrap è un framework, potrebbe entrare in conflitto con altri stili sul sito Weebly. Pertanto, ti consigliamo di utilizzare i codici widget a livello di pagina in modo da poter controllare facilmente tutti gli elementi su quella pagina.

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