Title: Lewe Bootstrap Visuals
Author: George Lewe
Published: <strong>2020 年 1 月 6 日</strong>
Last modified: 2026 年 3 月 27 日

---

搜尋外掛

![](https://ps.w.org/shortcode-bootstrap-visuals/assets/banner-772x250.png?rev=3492900)

![](https://ps.w.org/shortcode-bootstrap-visuals/assets/icon-256x256.png?rev=2223135)

# Lewe Bootstrap Visuals

 由 [George Lewe](https://profiles.wordpress.org/glewe/) 開發

[下載](https://downloads.wordpress.org/plugin/shortcode-bootstrap-visuals.3.0.1.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/shortcode-bootstrap-visuals/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/shortcode-bootstrap-visuals/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/shortcode-bootstrap-visuals/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/shortcode-bootstrap-visuals/#developers)

 [技術支援](https://wordpress.org/support/plugin/shortcode-bootstrap-visuals/)

## 外掛說明

Lewe Bootstrap Visuals is a comprehensive WordPress plugin that brings the power
of Bootstrap 5 to your WordPress site through an extensive collection of shortcodes.
This plugin replaces the legacy shortcode-bootstrap-visuals plugin with modern Bootstrap
5.

**Key Features:**

 * **Bootstrap 5.3.8** – Latest Bootstrap version with modern CSS and JavaScript
 * **Prefix Support** – All CSS classes use the `bsv-` prefix to avoid conflicts
 * **Modern WordPress Standards** – Built following current WordPress Plugin Development
   Handbook
 * **Comprehensive Components** – Alerts, badges, buttons, cards, modals, progress
   bars, and more
 * **Responsive Grid System** – Bootstrap 5 grid with responsive breakpoints
 * **CDN Integration** – Automatic loading of Bootstrap 5.3.8 from CDN
 * **Shortcode API** – Simple shortcodes for all Bootstrap components using dash
   syntax
 * **TinyMCE Integration** – Visual editor buttons for easy shortcode insertion
 * **Admin Interface** – Clean settings page with component documentation

**Available Shortcodes:**

_Layout Components:_
 * `[bsv-container]` – Bootstrap container * `[bsv-row]` – 
Bootstrap row * `[bsv-column]` – Bootstrap column with responsive sizes

_UI Components:_
 * `[bsv-alert]` – Alert messages with optional dismiss button *`[
bsv-badge]` – Badges and labels * `[bsv-button]` – Buttons with various styles and
sizes * `[bsv-card]` – Cards with headers, footers, and images * `[bsv-panel]` –
Alias for card (backward compatibility)

_Content Components:_
 * `[bsv-blockquote]` – Styled blockquotes * `[bsv-code]` –
Inline and block code formatting * `[bsv-highlight]` – Highlighted text * `[bsv-
lead]` – Lead paragraphs * `[bsv-text]` – Text with utility classes * `[bsv-list]`–
Styled lists

_Interactive Components:_
 * `[bsv-modal]` – Modal dialogs * `[bsv-collapse]` – 
Collapsible content * `[bsv-accordion]` – Accordion panels * `[bsv-tooltip]` – Tooltips*`[
bsv-popover]` – Popovers

_Progress & Loading:_
 * `[bsv-progress]` – Progress bars * `[bsv-spinner]` – Loading
spinners

**Migration from Legacy Plugin:**

If you’re migrating from the old shortcode-bootstrap-visuals plugin, most shortcodes
work with the new dash syntax (`[bsv-alert]` instead of `[bsv_alert]`). The plugin
maintains backward compatibility where possible while following modern WordPress
shortcode conventions.

### Support

For support, documentation, and feature requests, please visit:

 * [Plugin Documentation](https://lewe.gitbook.io/lewe-bootstrap-visuals/)
 * [WordPress Support Forum](https://wordpress.org/support/plugin/shortcode-bootstrap-visuals/)
 * [Lewe Service Desk](https://georgelewe.atlassian.net/servicedesk/customer/portal/5/)

### Credits

 * Based on [Bootstrap](https://getbootstrap.com/)
 * Follows [WordPress Coding Standards](https://developer.wordpress.org/coding-standards/)

## 螢幕擷圖

[⌊Example of various Bootstrap components in action⌉⌊Example of various Bootstrap
components in action⌉[

Example of various Bootstrap components in action

[⌊TinyMCE editor integration with shortcode buttons⌉⌊TinyMCE editor integration 
with shortcode buttons⌉[

TinyMCE editor integration with shortcode buttons

## 安裝方式

 1. Upload the plugin files to the `/wp-content/plugins/shortcode-bootstrap-visuals`
    directory, or install the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress.
 3. Use the Settings > Bootstrap Visuals screen to configure the plugin.
 4. Start using shortcodes in your posts and pages.

## 常見問題集

### Does this plugin include Bootstrap CSS and JavaScript?

Yes, the plugin automatically loads Bootstrap CSS and JavaScript from CDN. You can
disable this in the settings if you prefer to load Bootstrap manually.

### Are the shortcodes compatible with the old plugin?

The new plugin uses dash syntax (`[bsv-alert]`) instead of underscore syntax (`[
bsv_alert]`) to follow WordPress standards. Most functionality remains the same 
with improved Bootstrap 5 support.

### Can I customize the Bootstrap components?

Yes, all components use the `bsv-` prefix, so you can add custom CSS to override
or extend the default Bootstrap styles without conflicts.

### Does this work with my theme?

Yes, the plugin is designed to work with any properly coded WordPress theme. The
prefixed CSS classes prevent conflicts with your theme’s styles.

### Is this plugin responsive?

Yes, all components are fully responsive and support Bootstrap 5’s responsive breakpoints(
sm, md, lg, xl, xxl).

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈Lewe Bootstrap Visuals〉的開發相關工作。

參與者

 *   [ George Lewe ](https://profiles.wordpress.org/glewe/)

[將〈Lewe Bootstrap Visuals〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/shortcode-bootstrap-visuals)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/shortcode-bootstrap-visuals/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/shortcode-bootstrap-visuals/)，
或透過 [RSS](https://plugins.trac.wordpress.org/log/shortcode-bootstrap-visuals/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/shortcode-bootstrap-visuals/)。

## 變更記錄

#### 3.0.1

 * Update asset images

#### 3.0.0

 * Complete rewrite for Bootstrap 5.3.8
 * Modern WordPress standards compliance
 * Improved admin interface
 * Enhanced shortcode system with dash syntax
 * TinyMCE editor integration
 * Better performance and security
 * Prefixed CSS classes to avoid conflicts
 * Responsive grid system updates
 * New component options and styling

#### 2.x.x

 * Legacy version (deprecated)

## 中繼資料

 *  版本 **3.0.1**
 *  最後更新 **4 個月前**
 *  啟用安裝數 **10+**
 *  WordPress 版本需求 ** 5.0 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.9.6**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/shortcode-bootstrap-visuals/)
 *  [進階檢視](https://tw.wordpress.org/plugins/shortcode-bootstrap-visuals/advanced/)

## 評分

這個項目尚無任何評論記錄。

[Your review](https://wordpress.org/support/plugin/shortcode-bootstrap-visuals/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/shortcode-bootstrap-visuals/reviews/)

## 參與者

 *   [ George Lewe ](https://profiles.wordpress.org/glewe/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/shortcode-bootstrap-visuals/)

## 贊助

想要支援這個外掛的發展嗎？

 [ 贊助這個外掛 ](https://www.paypal.me/GeorgeLewe)