如何在 WordPress 中使用短碼添加 Twitter Bootstrap CSS

07/27/2023

如何在 WordPress 中使用短碼添加 Twitter Bootstrap CSS

為您的內容添加 CSS 元素如工具提示、多彩按鈕和滾動效果,可以幫助您的網站更具吸引力。問題在於大多數人並不知道如何使用 CSS 來添加多彩的按鈕,表格,標籤等。我們已經向您展示了如何在 WordPress 中添加多彩的 widgets 和表格。在這篇文章中,我們將展示如何使用短碼在 WordPress 中添加 Twitter Bootstrap CSS。

Twitter Bootstrap 是一個幫助快速提升網站設計和功能的 CSS 和 JavaScript 框架,它由 Twitter 的 Mark Otto 和 Jacob Thornton 開發,作為鼓勵內部工具一致性的框架。後來它被釋放為一個開源工具。它是漂亮的,簡單的,並且兼容所有瀏覽器。

安裝和激活插件

首先,您需要安裝並啟用 WordPress Twitter Bootstrap CSS 插件。啟用後,插件會在您的 WordPress 管理後台添加一個 Twitter Bootstrap 菜單項。點擊它將進入插件的儀表板。

在儀表板上,您會看到許多插件作者添加的廣告。瀏覽過它們,您會看到可以添加到文章中的短碼。每個短碼都鏈接到插件的支持頁面,您可以在那裡查看這些短碼的更多用法示例。

配置 Bootstrap CSS 設置

在管理後台的 Twitter Bootstrap 菜單項下,有一個鏈接來配置 Bootstrap CSS 設置。點擊該鏈接將進入配置頁面,您可以根據需要更改設置。您可以選擇要使用的 Bootstrap CSS 版本。下面的選項更適合進階用戶。

在文章中添加 Bootstrap CSS 元素

現在我們已經了解了配置,讓我們將一些 Bootstrap CSS 元素添加到博客文章中。只需將如下短代碼粘貼到您的文章或頁面內容中:

[TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]下載[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]取消[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]了解更多[/TBS_BUTTON]
圖標:
[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"]警告:標籤[/TBS_LABEL]
[TBS_LABEL class="danger"]危險:標籤[/TBS_LABEL]
[TBS_LABEL class="success"]綠色:標籤[/TBS_LABEL]
[TBS_ALERT class="success"]設置已保存[/TBS_ALERT]

這些短碼在博客文章中將顯示如下:

還有更多的 CSS 元素可以添加到您的文章中。工具提示、手風琴菜單、彈出框、進度條等。這個插件的網站有更多關於如何使用這些功能的文件。如果您對圖標感到好奇,可以查看 Twitter Bootstrap 的官方網站,該網站上有完整的圖標集,您可以使用。

我們知道像 Genesis 和其他主題框架包含他們自己的選項。您在文章中使用 CSS 元素嗎?請在下面留言告訴我們。



Related Posts

  • 2025-01-31
  • WordPress 插件

通知评论者他们的评论已获批准是在您的网站上鼓励对话的简单而有效的方法。然而,WordPress 默认情况下不会在评论发布时通知用户,这可能导致他们对评论的状态感到困惑。有许多网站拥有者问我们如何解决此问题,因此我们编写了这篇指南来帮助您!在这篇文章中,我们将展示如何轻松通知用户他们的评论已在 WordPress 中被批准,以保持互动积极并吸引更多观众参与。

閱讀更多
  • 2025-01-31
  • WordPress 插件

想知道我们在 WPressize Me 如何通过添加标题属性和 nofollow 标签来改善用户体验和SEO吗?默认的 WordPress 编辑器并不容易提供这些选项。本文将为您简要介绍如何在 WordPress 的插入链接弹出窗口中为链接添加标题和 nofollow 属性选项,以便简化工作流程和提升您的SEO努力。

閱讀更多
  • 2025-01-28
  • WordPress 插件

你是否想在你的WordPress网站上启用Imagick?大多数情况,WordPress会自动使用Imagick来管理所有网站的图像。然而,通过调整默认的Imagick设置,你可以提高网站性能或向访客展示更高质量的图像。在本文中,我们将展示如何在你的WordPress网站上启用Imagick,并自定义其设置以改善访客体验。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>