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

Widget de tabla de precios de Bootstrap

1

Bootstrap es un marco que funciona basado en el diseño de la cuadrícula que divide el ancho del área de visualización en doce partes iguales. Hay muchos componentes predeterminados como tablas, alertas, modales, etc. que se pueden agregar sin ninguna habilidad de codificación. Pero agregar componentes personalizados en el sitio Bootstrap necesita conocimientos básicos de CSS y HTML junto con el conocimiento del uso de las propiedades disponibles del marco. La tabla de precios es uno de esos componentes que necesitan la mayoría de los propietarios de sitios de Bootstrap. En este artículo, creemos un widget de tabla de precios de Bootstrap con CSS personalizado.

A continuación se muestra la tabla de precios de CSS simple y elegante usando Bootstrap.

Widget de tabla de precios de Bootstrap

Widget de tabla de precios de Bootstrap

La tabla de precios está hecha con CSS puro, por lo que no se necesitan archivos JavaScript. Debe insertar código CSS y HTML en su página para agregar la tabla de precios.

CSS para el widget de tabla de precios

Agregue el siguiente código CSS debajo de la sección de encabezado entre … etiquetas de su página. Puede agregar CSS personalizado en la página usando etiquetas … o guardarlo como una hoja de estilo externa y un vínculo en la página.

La tabla tiene dos secciones: encabezado y detalles. La sección del encabezado contiene el monto del precio que muestra un tamaño de fuente más grande, el símbolo $ se inserta en superíndice y por mes se muestra en un tamaño de fuente pequeño. La sección de detalles es una lista desordenada con "estilo de lista: ninguno" para eliminar las viñetas.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <style> #price-section { background-color: #fafafa; } .pricing .pricing-head { position: relative; background: rgb(158, 188, 133); color: #ffffff; text-align: center; font-weight: bold; } .pricing .price { display: inline-block; position: relative; } .pricing .price sup { position: absolute; top: 50px; left: -10px; font-size: 24px; } .pricing .price .price-amount { font-size: 108px; letter-spacing: -4px; } .pricing .price small { position: relative; left: -10px; font-size: 18px; } .pricing ul { list-style: none; margin: 0; background: #eee; text-align: center; padding-left: 0px; } .pricing ul li { border-bottom: solid 1px #e1e1e1; padding-top: 20px; padding-bottom: 20px; } .pricing .pricing-grab { display: block; text-align: center; font-size: 20px; font-weight: bold; padding: 20px 12px; color: #ffffff; background: rgb(211, 123, 123); } </style>

HTML para widget de tabla de precios

Ahora agregue el siguiente código HTML dentro del cuerpo de su página. El widget de ejemplo contiene tres planes y cada plan contiene un encabezado, 7 funciones y un botón. El código para cada bloque del plan se resalta con comentarios que puede modificar con sus propios detalles.

<div class="row row main-low-margin"> <!-- Details for Plan 1 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">12 </span> <small>per month</small> </span> </div> <ul> <li><strong>BASIC PLAN</strong></li> <li><strong>1 GB </strong> Data</li> <li>10 <strong>Emails</strong></li> <li>Limit Of <strong>10</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> <!-- Details for Plan 2 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">15 </span> <small>per month</small> </span> </div> <ul> <li><strong>MEDIUM PLAN</strong></li> <li><strong>5 GB </strong> Data</li> <li>15 <strong>Emails</strong></li> <li>Limit Of <strong>15</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> <!-- Details for Plan 3 --> <div class="col-md-4 col-sm-4"> <div class="pricing"> <div class="pricing-head"> <span class="price"> <sup>$</sup> <span class="price-amount">18 </span> <small>per month</small> </span> </div> <ul> <li><strong>ADVANCE PLAN</strong></li> <li><strong>10 GB </strong> Data</li> <li>20 <strong>Emails</strong></li> <li>Limit Of <strong>20</strong> Users</li> <li><strong>24x7</strong> Support</li> <li><strong>Online</strong> Access Available</li> <li><strong>Online</strong> Management Tool</li> </ul> <a href="#" class="pricing-grab">GET IT NOW</a> </div> </div> </div>

¡¡¡Eso es todo!!! Guarde sus cambios y vea la página en el navegador para ver una hermosa tabla de precios con tres planes. Asegúrese de reemplazar el contenido con el suyo. Si desea utilizar más planes, ajuste las clases de cuadrícula “col-md-4" y “col-sm-4” según las columnas que necesite.

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