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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

2

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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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ä

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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

Kuinka lisätä Bootstrap -edistymispalkit Weebly -sivustoon?

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

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