TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar barras de progreso de Bootstrap en el sitio de Weebly?

3

Bootstrap framework ofrece muchas funciones fáciles de usar y las barras de progreso son una de ellas. Se pueden crear muchos tipos diferentes de barras de progreso con Bootstrap y en este artículo discutiremos algunas de ellas con el código CSS. Aprenda los tutoriales completos sobre cómo crear barras de progreso con Bootstrap 5.

¿Cómo agregar barras de progreso Bootstrap en Weebly?

Paso 1 – Enlace Bootstrap CSS

Para agregar barras de progreso, el primer paso es vincular el CSS Bootstrap a su sitio Weebly. Agregue el siguiente código en "Configuración> SEO> Código de encabezado ".

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

También puede vincular la hoja de estilo a nivel de página si desea que las barras de progreso solo estén en esa página.

Paso 2: agregar CSS adicional para las barras de progreso

Agregue el siguiente código CSS en la sección "Código de encabezado" de la página a la que desea agregar las barras de progreso. La clase ".margin" se utiliza para crear un margen de 10px para que las barras no se trunquen.

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

Paso 3: agregar HTML para las barras de progreso

A continuación se muestra el código HTML junto con la imagen de cómo se ve en el sitio de Weebly. Las barras se pueden utilizar como elemento de ancho completo o como parte de una columna. El texto, el porcentaje y los colores se pueden personalizar según sus necesidades.

Barras de progreso delgadas

¿Cómo agregar barras de progreso de Bootstrap en el sitio de 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 -->

Talla mediana

¿Cómo agregar barras de progreso de Bootstrap en el sitio de 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 -->

Tamaño grueso

¿Cómo agregar barras de progreso de Bootstrap en el sitio de 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 -->

Tamaño predeterminado

¿Cómo agregar barras de progreso de Bootstrap en el sitio de 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 -->

Barras de colores

Los colores se definen en el CSS adicional en el paso 2 y puede agregar el color que desee.

¿Cómo agregar barras de progreso de Bootstrap en el sitio de Weebly?

Las barras se colocan en dos columnas usando la clase "col-md-6", puede eliminar esta clase para hacer las barras de ancho completo.

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

Barras de colores con texto

¿Cómo agregar barras de progreso de Bootstrap en el sitio de 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 -->

Barras de rayas

¿Cómo agregar barras de progreso de Bootstrap en el sitio de 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 -->

Barras animadas

¿Cómo agregar barras de progreso de Bootstrap en el sitio de 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: Dado que Bootstrap es un marco, puede entrar en conflicto con otros estilos en el sitio de Weebly. Por lo tanto, recomendamos utilizar los códigos de widget en el nivel de la página para que pueda verificar fácilmente todos los elementos de esa página.

Fuente de grabación: webnots.com
Deja una respuesta

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