Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺

梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
  先前曾分享過Pinegrow Web Editor這套視覺化的RWD開發工具,透過Pinegrow Web Editor不但可快速的設計出RWD的網頁外,同時支援的模組也相當的多,像是大家所熟悉的Bootstrap、960、Foundation、AngularJS甚至就連Wordpress也可透過Pinegrow來完成,但這麼強大的軟體並非免費,若今天只需使用到Bootstrap來開發RWD的網頁,最近梅干發現另一套,與Pinegrow Web Editor相當雷同的工具,除了視覺化的操作界面,並全面的支援Bootstrap與內建Bootstrap特效,直接拖拉即可完成,因此對於不習慣寫code的朋友,這款Pingendo免費的RWD開發工具,不妨可考慮一下囉!

Pingendo
軟體名稱:Pingendo
軟體性質:免費
支援平台:Windows/MAC/Liunx
下載網址:http://pingendo.com/

Step1
進到軟體網站後,從下方可選擇自己所需的平台,目前支援三大系統,因此無論是使用windows、mac、liunx都可用。
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
Step2
下載安裝完畢後,雙響開啟Pingendo後,點一下畫面中的文字,就可建立新網頁。
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
Step3
接著選擇左邊的空白頁面。
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
Step4
進入軟體後,可看到畫面相當的簡潔,左邊是所有Bootstrap的元件區,右邊是屬性設定,下方是原始碼區,中間是工作區。
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
Step5
操作方式很簡單,採全面拖拉的方式。
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
Step6
當拖曳進來的元素,可透過右邊來修改屬性。
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
Step7
而在廣告輪播系統,不得不稱讚一下Pingendo,設計的相當方便與好控制。
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺
Step8
甚至在媒體區域中,有各式各樣的元件可使用,因此有了這工具後,要將RWD頁面套用Bootstrap就更加的簡單,重點是完全免費,身為網設的你也趕快來試試囉!
梅問題-Pingendo免費全視覺化Bootstrap開發工具,設計RWD網頁更直覺

延伸文章

Pinegrow Web Editor全視覺化的Bootstrap開發工具

Pinegrow Web Editor全視覺化的Bootstrap開發工具

Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具

Chrome外掛-Pinegrow Web Designer免費版Bootstrap視覺化開發工具

Pinegrow Web Editor暗黑祕技!將網路上喜歡的版型直接搬回家

Pinegrow Web Editor暗黑祕技!將網路上喜歡的版型直接搬回家


相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

近期講座

更多講座