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暗黑祕技!將網路上喜歡的版型直接搬回家


相關文章

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具





回應本篇 »

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

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