[WordPress] 外掛分享: Rad Bootstrap 3 Blocks

首頁外掛目錄 › Rad Bootstrap 3 Blocks
20+
安裝啟用
★★★★★
5/5 分(1 則評價)
2578 天前
最後更新
問題解決
WordPress 5.0+ PHP 5.6+ v1.2.1 上架:2019-02-18

內容簡介

這個外掛是為 WordPress 5.x 及更新版本所設計,不支援不使用 WordPress 新版 Gutenberg 區塊編輯器的網站。

使用方法

啟用後,只需點擊「新增區塊」按鈕,往下滾動找到新類別「Bootstrap Blocks」。若要新增一個 Bootstrap 樣式的按鈕,點擊「Bootstrap Button」,若要新增 Bootstrap 欄位,點擊「Bootstrap Columns」。

欄位和容器可在「設定側邊欄」中進行配置,請確保此側邊欄已開啟以獲得完整體驗。若按下欄位中的「container」區塊,您可以在範圍選擇器中新增或移除欄位。 若要變更欄寬,請點擊欄位並在設定面板中變更「Column Width」,由於 Bootstrap 是一個響應式的框架,您可以設定在何種螢幕大小時將欄位「拆分」成全寬。這表示當螢幕變小時,欄位將會疊放在彼此之上。編輯器中欄位的寬度和拆分大小會以 css「class」的形式顯示。因此,「col-xs-6」表示它是一個寬度為 6 個欄位(共 12 個)的欄位,只有在螢幕特別小時才會拆分。

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.2.1) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Rad Bootstrap 3 Blocks」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

This plugin is intedended for WordPress 5.x and up. This will not work on sites that do not utilize WordPress’s new Gutenberg block editor.
USAGE
Once activated, simply click on the “Add Block” button and scroll down to see the new category “Bootstrap Blocks”. To add a Bootstrap styled button, click “Bootstrap Button.” To add Bootstrap Columns, click “Bootstrap Columns”.
Columns and containers can be configured in the Settings sidebar. Be sure to have that sidebar open to get the full experience. If you click on the “container” block of the columns, you can add more or remove columns in the range selector. To change the width of the column, click on the column and change the “Column Width” in the settings panel. Since bootstrap is a responsive framework, you can change at what screen to “break” column into full width. This means that the columns will stack on top of each other at smaller screens. As a visual cue of the width and breaksize, the column in the editor will display the css “class” that it is configured for. Thus, “col-xs-6” means that it is a column that is 6 columns wide (out of 12) and will break only if the screen is extra small.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon