Cómo agregar Twitter Bootstrap CSS en WordPress usando códigos cortos

Agregar elementos CSS como información sobre herramientas, botones coloridos y efectos de rollover puede ayudar a que su contenido se destaque. El problema es que la mayoría de la gente no sabe cómo usar CSS para agregar botones, tablas, etiquetas, etc. coloridos. Le mostramos cómo agregar widgets y tablas coloridos en WordPress. En este artículo, le mostraremos cómo usar Twitter Bootstrap CSS en WordPress usando códigos cortos.

Twitter Bootstrap es un marco de CSS y JavaScript que ayuda a mejorar el diseño y la funcionalidad de su sitio rápidamente. Fue desarrollado por Mark Otto y Jacob Thornton en Twitter como un marco para fomentar la coherencia entre sus herramientas internas. Más tarde se lanzó como una herramienta de código abierto. Es hermoso, simple y compatible en todos los navegadores.

Lo primero que debe hacer es instalar y activar el WordPress Twitter Bootstrap CSS enchufar. Tras la activación, el complemento agregará un elemento de menú de Twitter Bootstrap en su administrador de WordPress. Al hacer clic en él, accederá al panel de control del complemento.

Menú de arranque

En el tablero, verá una gran cantidad de anuncios agregados por el autor del complemento. Desplácese hacia abajo y verá los códigos cortos que puede agregar en sus publicaciones. Cada código abreviado está vinculado a la página de soporte del complemento, donde puede ver más ejemplos de uso de estos códigos abreviados.

Ejemplos de uso de códigos cortos de Bootstrap

Debajo del elemento de menú de Twitter Bootstrap en su administrador, hay un enlace para configurar los ajustes de CSS de Bootstrap. Al hacer clic en eso, lo llevará a la página de configuración donde puede cambiar la configuración para satisfacer sus necesidades. Tiene la opción de elegir qué versión de Bootstrap CSS le gustaría usar. Debajo encontrará opciones más adecuadas para usuarios de nivel avanzado.

Ahora que hemos visto la configuración, agreguemos algunos elementos CSS de arranque a una publicación de blog. Simplemente pegue los códigos cortos como este en su publicación o contenido de la página:


<!--Shortcodes->
[TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn more[/TBS_BUTTON]
Icons:
[TBS_ICON class="icon-globe"]
[TBS_ICON class="icon-globe"]
[TBS_ICON class="icon-chevron-right"]
[TBS_ICON class="icon-music"]
[TBS_ICON class="icon-film"]
[TBS_ICON class="icon-user"]
[TBS_ICON class="icon-wrench"]
[TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] 
[TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] 
[TBS_LABEL class="success"]Green: Label[/TBS_LABEL] 
[TBS_ALERT class="success"]Settings saved[/TBS_ALERT]

Así es como se verán estos códigos cortos en la publicación del blog:

Elementos css de arranque de Twitter agregados a una publicación

Hay muchos más elementos CSS que puedes agregar a tus publicaciones. Información sobre herramientas, menús de acordeón, cuadros emergentes, barras de progreso, etc. El sitio web de este complemento tiene más documentación sobre cómo utilizar estas funciones. Si tiene curiosidad acerca de los íconos, puede consultar el sitio oficial de Twitter Bootstrap para el conjunto completo de iconos que puedes usar.

Sabemos que los marcos temáticos como Génesis y otros vienen con sus propias opciones. ¿Usas elementos CSS en tus publicaciones? Háganos saber dejando un comentario a continuación.

Deja un comentario