如何在 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

  • 2024-12-14
  • WordPress 插件

在WordPress中嵌入Google幻灯片演示是分享互动且视觉上吸引人内容的好方法。您可以展示详细的产品展示或最新报告的幻灯片,从而帮助您向听众传达信息或说服他们。我们经过研究发现了一些可靠的方法来完成这项工作,而且您无需成为技术专家即可实现。本文将向您展示两种轻松的方法来将Google幻灯片演示文稿添加到您的WordPress网站。

閱讀更多
  • 2024-11-16
  • WordPress 插件

在保护您的WordPress网站免受攻击时,使用正确的防火墙插件是至关重要的。在多年的发展中,我们的需求也在不断增长。因此,我们转向使用Cloudflare以提供更强的保护。本文详细比较了六个优秀的WordPress防火墙插件,以帮助您选择最适合的解决方案。

閱讀更多
  • 2024-11-15
  • WordPress 插件

您不希望访客单击其他网站的链接后就此离开您的网站。这就是为什么在新窗口或标签中打开外部链接对于提供流畅用户体验至关重要。在WPressize Me,我们认真对待读者的参与度。我们确保网站上的所有外部链接都在新标签页中打开,这样读者可以在不丢失原位的情况下浏览内容。这篇初学者指南将教您如何轻松在WordPress中设置外部链接在新标签中打开,从而提升用户参与度并令读者满意。

閱讀更多

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