Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?
Bootstrap -kehys tarjoaa monia helppokäyttöisiä ominaisuuksia, ja edistymispalkit ovat yksi niistä. Bootstrapilla voidaan luoda monia erilaisia edistymispalkkeja, ja tässä artikkelissa keskustelemme joistakin niistä CSS -koodin kanssa. Tutustu täydellisiin opetusohjelmiin, joilla voit luoda edistymispalkkeja Bootstrap 5: n avulla.
Kuinka lisätä Bootstrap -edistymispalkit Weeblyyn?
Vaihe 1 – Linkitä Bootstrap CSS
Edistymispalkkien lisäämiseksi ensimmäinen askel on linkittää Bootstrap CSS Weebly -sivustoosi. Lisää alla oleva koodi kohtaan "Asetukset> SEO> Otsikkokoodi ".
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">Voit myös linkittää tyylitaulukon sivutasolla, jos haluat edistymispalkit vain kyseisellä sivulla.
Vaihe 2 – CSS: n lisääminen edistymispalkkeihin
Lisää alla oleva CSS -koodi sen sivun Otsikkokoodi -osioon, johon haluat lisätä edistymispalkit. Luokkaa ".margin” luodaan 10 pikselin marginaali, jotta palkit eivät katkea.
<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>Vaihe 3 – HTML -koodin lisääminen edistymispalkkeihin
Alla on HTML -koodi ja kuva siitä, miltä se näyttää Weebly -sivustolla. Tankoja voidaan käyttää täysleveänä elementtinä tai osana saraketta. Teksti, prosenttiosuus ja värit voidaan räätälöidä tarpeidesi mukaan.
Ohuet edistymispalkit
<!-- 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 -->Keskikokoinen
<!-- 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 -->Paksu koko
<!-- 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 -->Oletuskoko
<!-- 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 -->Värilliset baarit
Värit määritellään CSS: n vaiheessa 2, ja voit lisätä haluamasi värin.
Palkit on sijoitettu kahteen sarakkeeseen käyttämällä luokkaa "col-md-6". Voit poistaa palkin koko leveydellä poistamalla tämän luokan.
<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 -->Värilliset palkit, joissa on tekstiä
<!-- 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 -->Raidatangot
<!-- 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 -->Animoidut baarit
<!-- 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 -->Huomautus: Koska Bootstrap on kehys, se voi olla ristiriidassa muiden Weebly -sivuston tyylien kanssa. Siksi suosittelemme käyttämään widget -koodeja sivutasolla, jotta voit helposti tarkistaa kaikki sivun elementit.