城市简码
Adding CSS elements like tooltips, colorful buttons, and roll-over effects can help your content stand out. The problem is that most people don’t know how to use CSS to add colorful buttons, tables, labels, etc. We have shown you how to add 丰富多彩的小部件 and WordPress 中的表格. In this article, we will show you how to use Twitter Bootstrap CSS in WordPress using shortcodes.
添加CSS元素(如工具提示，彩色按钮和鼠标悬停效果)可以帮助您的内容脱颖而出。 问题是大多数人不知道如何使用CSS添加彩色按钮，表格，标签等。我们已经向您展示了如何在 WordPress 中添加丰富多彩的小部件和床单 。 在本文中，我们将向您展示如何使用简码在WordPress中使用Twitter Bootstrap CSS。
Twitter Bootstrap 是一个 CSS 和 JavaScript 框架，可帮助快速提升网站设计和功能。它是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，作为一个框架来鼓励内部工具的一致性。后来它作为开源工具发布。它美观、简单并且兼容所有浏览器。
Twitter Bootstrap 是一个 CSS 和 JavaScript 框架，可帮助您快速改进网站设计和功能。它由 Twitter 的 Mark Otto 和 Jacob Thornton 开发，旨在鼓励内部工具的一致性。后来它作为开源工具发布。它美观、简单并且兼容所有浏览器。
First thing you need to do is install and activate the WordPress Twitter Bootstrap CSS plugin. Upon activation, the plugin will add a Twitter Bootstrap menu item in your WordPress admin. Clicking on it will take you to plugin’s dashboard.
您需要做的第一件事是安装并激活WordPress Twitter Bootstrap CSS插件。 激活后，该插件将在您的WordPress管理员中添加一个Twitter Bootstrap菜单项。 单击它会将您带到插件的仪表板。
在仪表板上，您会看到插件作者添加的大量广告。向下滚动经过它们，您将看到可以在帖子中添加的短代码。每个短代码都链接到插件的支持页面，您可以在其中查看这些短代码的更多使用示例。
在仪表板上你会看到插件作者添加的大量广告。向下滚动它们，您将看到可以添加到帖子中的短代码。每个短代码都链接到插件的支持页面，您可以在其中查看这些短代码的更多使用示例。
在管理员的 Twitter Bootstrap 菜单项下，有一个用于配置 Bootstrap CSS 设置的链接。单击该按钮将带您进入配置页面，您可以在其中更改设置以满足您的需求。您可以选择要使用的 Bootstrap CSS 版本。在下面，您将找到更适合高级用户的选项。
在管理员的 Twitter Bootstrap 菜单项下，有一个用于配置 Bootstrap CSS 设置的链接。单击此按钮将带您进入配置页面，您可以在其中更改设置以满足您的需求。您可以选择使用哪个 Bootstrap CSS 版本。在其下方，您会发现更适合高级用户的选项。
现在我们已经查看了配置，让我们向博客文章中添加一些 bootstrap css 元素。只需将这样的短代码粘贴到您的帖子或页面内容中即可：
现在我们了解了配置，让我们向博客文章中添加一些 bootstrap css 元素。只需将此短代码粘贴到您的帖子或页面内容中即可：
<!--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]
这些短代码在博客文章中如下所示：
这些短代码在博客文章中如下所示：
There are many more CSS elements that you can add to your posts. Tooltips, accordian menus, popup boxes, progress bars, etc. This plugin’s website has more 文档 on how to use these features. If you are curious about icons, then you can look at Twitter Bootstrap’s official site for the 完整的图标集 that you can use.
您可以在帖子中添加更多CSS元素。 工具提示，Accordian菜单，弹出框，进度栏等。此插件的网站上有更多有关如何使用这些功能的文档 。 如果您对图标感到好奇，则可以在Twitter Bootstrap的官方网站上找到可以使用的完整的图标集 。
We know that 主题框架 like Genesis and others come with their own options. Do you use CSS elements in your posts? Let us know by leaving a comment below.
我们知道，Genesis之类的主题框架和其他框架都有其自己的选择。 您是否在帖子中使用CSS元素？ 让我们在下面留下评论。
翻译自: https://www.wpbeginner.com/plugins/how-to-add-twitter-bootstrap-css-in-wordpress-using-shortcodes/
城市简码