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

¿Cómo crear widgets de cotización de bloques de Bootstrap personalizados?

102

Bootstrap es uno de los marcos gratuitos populares que ayuda a crear hermosos diseños web. Hay muchos temas gratuitos y premium disponibles usando el diseño de cuadrícula de Bootstrap. Además de utilizar el marco completo, también puede agregar elementos Bootstrap individuales en su sitio web. En este artículo, analicemos cómo crear citas en bloque Bootstrap con diferentes estilos.

Aprenda a crear citas en bloque en Weebly y WordPress.

Bootstrap ofrece muchos elementos individuales como widgets atractivos como barras de progreso y tablas. Sin embargo, necesita el marco CSS y JavaScript para usar esos widgets. La mayoría de los propietarios de sitios no utilizan Bootstrap, ya que utilizan otros sistemas de gestión de contenido como Weebly o WordPress. La inserción de Bootstrap CSS romperá los otros elementos al superponerse con la hoja de estilo principal del tema.

Puede superar este problema utilizando solo el estilo del widget requerido. Alternativamente, puede replicar el estilo del elemento Bootstrap a su propio estilo personalizado. También crearemos las comillas en bloque haciendo referencia solo a las clases CSS requeridas sin usar la hoja de estilo "bootstrap.min.css" completa.

Debe descargar el CSS / HTML e insertar el código en su sitio web para crear widgets de cotizaciones en bloque. Los diferentes creadores de sitios web y sistemas de gestión de contenido ofrecen diferentes métodos para insertar código HTML / CSS. Por ejemplo, puede utilizar el elemento Código incrustado en Weebly mientras que el bloque HTML personalizado en el editor de WordPress Gutenberg. Si está utilizando un sitio HTML o Bootstrap, agregue el código CSS en la sección "Encabezado" y el código HTML en la sección "Cuerpo" de la página.

Componentes de los widgets de cotización del bloque Bootstrap

Cada cotización en bloque contiene dos componentes:

  • Citar texto y
  • Texto de referencia o autor

Con estas dos cosas podemos jugar con los bordes, el fondo y los colores. Primero, creemos un estilo de cotización en bloque simple como se muestra a continuación. Usamos el mismo color primario # c97e69 usado en el marco de Bootstrap.

CSS para cotizaciones de bloques de estilo Bootstrap

Aquí hay un CSS completo para los widgets. Hemos proporcionado el código dentro de las etiquetas de estilo. Si su página HTML ya contiene etiquetas de estilo, asegúrese de eliminarlas del código.

<style> blockquote { border: 1px solid #b3b3b3; border-left: 10px solid #b3b3b3; border-radius: 0px; background: #fafafa; font-size: 18px; margin: 10px; padding: 10px 20px; } blockquote p { margin: 0; line-height: 30px; padding-bottom: 20px; } blockquote .small { display: block; font-size: 80%; color: brown; text-align: right; }  </style>

Hemos utilizado las clases "blockquote p" y "blockquote .small" para diseñar el texto y el nombre del autor respectivamente. La cita en bloque en una página web con el CSS anterior debería verse como a continuación (expliquemos la parte HTML más adelante).

¿Cómo crear widgets de cotización de bloques de Bootstrap personalizados?

Blockquote básico de Bootstrap

Manteniendo esto como un estilo básico, podemos agregar cinco estilos más con diferentes colores de fondo, bordes y alineaciones.

blockquote.bg-gray { background: #555555; border: 1px solid #b3b3b3; border-left: 10px solid #b3b3b3; color: #ffffff; } blockquote.bg-primary { background: #c97e69; border: 1px solid #c97e69; border-left: 10px solid #c97e69; color: #ffffff; } blockquote.primary { border: 1px solid #c97e69; border-left: 10px solid #c97e69; } blockquote.right.primary { border-color: #c97e69; border-left: 1px solid #c97e69; border-right: 10px solid #c97e69; } blockquote.right { text-align: right; border-width: 1px 10px 1px 1px; }

HTML para cotizaciones de bloques de Bootstrap

Ahora que todos hemos requerido CSS y tiempo para jugar con HTML combinando diferentes clases. Por ejemplo, puede crear una cita en bloque con un fondo gris y un color de borde primario como # c97e69. A continuación se muestra el código HTML para ese widget:

<blockquote class="bg-gray primary"> <p> <em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</em> </p> <small>Someone famous in <cite title="Source Title">Source Title</cite> </small> </blockquote>

La salida se verá a continuación:

¿Cómo crear widgets de cotización de bloques de Bootstrap personalizados?

Bootstrap Blockquote con estilo personalizado

Al hacer diferentes combinaciones, puede crear seis estilos diferentes de citas en bloque, como se muestra a continuación.

¿Cómo crear widgets de cotización de bloques de Bootstrap personalizados?

Estilos Bootstrap Blockquote

Fuente de grabación: www.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