文章彙整

使用bootply測試您的Bootstrap 網頁

Astral WebBy Astral Web 6 years agoNo Comments
首頁  /  網站技術與設計  /  前端開發  /  使用bootply測試您的Bootstrap 網頁

使用bootply測試您的Bootstrap 網頁

您正在學習 Bootstrap 嗎?或是需要測試某個 Bootstrap javascript 的功能。您可以試試bootply。

bootply是一個線上編輯器,直接內建了jQuery、Bootstrap,還可以選擇是否要載入一些常用的外掛,例如:FontAwesome, jQuery UI…。您可以直接在bootply編輯您的bootstrap頁面,做一些測試,省略建立bootstrap環境的步驟及節省一些時間。

註冊一個新的bootply帳號

點擊Login 展開登入畫面

步驟一-使用bootply測試您的Bootstrap 網頁

 

點擊New User? Sign-up..展開註冊新帳號畫面

步驟二-使用bootply測試您的Bootstrap 網頁

 

填完註冊訊息、按下Sign Up 送出註冊資料。

步驟三-使用bootply測試您的Bootstrap 網頁

 

開啟新測試頁面

登入bootply

步驟四-使用bootply測試您的Bootstrap 網頁

 

開啟新頁面

步驟五-使用bootply測試您的Bootstrap 網頁

 

這是bootply的操作介面。左邊Setting的部份可以設定要載入的jQuery及Bootstrap版本、以及是否要載入其他的外掛,例如:FontAwesome。

步驟六-使用bootply測試您的Bootstrap 網頁

 

值得一提的是:Bootply有一個Bootstrap 的快速編輯器(Bootstrap editor),只要按一下就可以在HTML的編輯框中快速輸入範例碼,如果有需要的話也會同時在Javascirpt編輯框輸入需要的範例碼。

步驟七-使用bootply測試您的Bootstrap 網頁

 

按一下左上角的Run,底下的預覽框就會出現結果。

步驟八-使用bootply測試您的Bootstrap 網頁

 

您可以直接在底下的預覽框確認頁面的效果,包含一些javascript 的特效。

步驟九-使用bootply測試您的Bootstrap 網頁

步驟十-使用bootply測試您的Bootstrap 網頁

 

如果您希望跟朋友分享您的頁面,那麼您就要先存檔。

步驟十一-使用bootply測試您的Bootstrap 網頁

 

存檔之後您會得到一個網址。您可以直接將這個網址分享給您的朋友,您的朋友就可以利用這個連結直接看到您完成的頁面。

步驟十二-使用bootply測試您的Bootstrap 網頁

 

另外bootply還提供視覺編輯器,只要按下Visual就可以切換到視覺編輯器,有興趣的朋友可以自己嘗試看看。

 

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  前端開發網站技術與設計網站測試

留下回應

你的電子郵件地址不會被公開.