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

Agregar elementos CSS como sugerencias, botones de colores y efectos de desplazamiento puede hacer que su contenido se destaque. El problema es que la mayoría de las personas no saben cómo usar CSS para agregar botones de colores, tablas, etiquetas, etc. 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 le ayuda a mejorar rápidamente el diseño y la funcionalidad de su sitio. Fue desarrollado por Mark Otto y Jacob Thornton en Twitter como un marco para fomentar la coherencia entre sus herramientas internas. Más tarde fue lanzado como una herramienta de código abierto. Es hermoso, simple y compatible con todos los navegadores.

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

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

Bajo el elemento de menú de Twitter Bootstrap en su administrador, hay un enlace para configurar los ajustes CSS de Bootstrap. Al hacer clic en él, accederá a la página de configuración, donde podrá cambiar la configuración para que se adapte a sus necesidades. Tiene la opción de elegir qué versión de Bootstrap CSS desea utilizar. A continuación encontrará las opciones más adecuadas para usuarios avanzados.

Ahora que hemos visto la configuración, agreguemos algunos elementos CSS de bootstrap a una publicación de blog. Simplemente pegue códigos cortos como este en el contenido de su publicación o 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:

Hay muchos otros elementos CSS que puede agregar a sus publicaciones. Consejos sobre herramientas, menús de acordeón, ventanas emergentes, barras de progreso, etc. documentación sobre cómo utilizar estas funciones. Si tiene curiosidad acerca de los íconos, puede consultar el sitio oficial de Twitter Bootstrap para conjunto completo de iconos que puede utilizar.

Sabemos que pinturas temáticas como Génesis y otras tienen sus propias opciones. ¿Usas elementos CSS en tus publicaciones? Háganos saber dejando un comentario a continuación.