首頁 > web前端 > Bootstrap教程 > bootstrap有什麼開發工具

bootstrap有什麼開發工具

青灯夜游
發布: 2021-10-29 11:51:03
原創
4791 人瀏覽過

bootstrap開發工具:1、Jetstrap;2、Bootply;3、DivShot;4、Bootstrap Magic;5、Layoutit;6、X-editable;7、Grid Displayer;8、GetkickStrap等。

bootstrap有什麼開發工具

本教學操作環境:Windows7系統、bootsrap3.3.7版、DELL G3電腦

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基於HTML、CSS、JavaScript 開發的簡潔、直覺、強悍的前端開發框架,讓Web 開發更快速。 Bootstrap提供了優雅的HTML和CSS規範,它也就是由動態CSS語言Less寫成。

Bootstrap一推出後頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。國內一些行動開發者較為熟悉的框架,如WeX5前端開源框架等,也是基於Bootstrap原始碼進行效能優化而來。

bootstrap開發工具:

#1、Jetstrap

Jetstrap 是完全基於Web 的,用於Twitter Bootstrap 的介面建立工具,專為開發人員,設計師和打造。 Jetstrap 幫助您快速創建出漂亮網站,只需要花費很少的精力。

2、Bootply

Bootply 讓你可以方便的偵錯 Bootstrap。編輯 CSS ,HTML 和 JavaScript。可以使用 Bootply 設計,原型,擴展或測試 Bootstrap 框架。 Bootply 整合了其他流行的 Bootstrap 插件,微型函式庫和框架。

3、DivShot

Divshot 是一個基於拖放的前端編輯器,允許你使用Twitter Bootstrap(當然Foundation 也可以)建立響應式的網站,不需要自己做編碼,只需要進行簡單的拖放操作即可。

4、Bootstrap Magic

Bootstrap Magic 主題產生器基於 Twitter Bootstrap 3 和 AngularJS 建構。您可以輕鬆快速地創建自己的 Twitter Bootstarp 主題。你可以立即看到你正在改變的內容是什麼,您也可以添加 Google Webfont 的精美網頁字體。

5、Layoutit

LayoutIt 是一個 Twitter Bootstrap 介面產生器,能夠幫助你快速製作網站和介面模型,同時能夠下載產生的網站程式碼。簡單的幾個拖放操作就能做出漂亮的 Twitter Bootstrap 網站。所有的設計都可以是響應式 CSS 和流體,能夠份容易與任何的程式語言集成,您只需下載 HTML 即可開始編碼設計。

6、X-editable

X-editable 支援就地編輯 Twitter Bootstrap, jQuery UI 或純 jQuery。這個庫允許你在自己的網頁上建立可編輯元素。它包括彈出式和內嵌模式。它支援的輸入元素包括文字,文字區域,下拉列表,日期, dateui 和 checklist。它支援客戶端和伺服器端驗證。另外容器的位置是完全可自訂的,使用者可以透過點擊,雙擊自動或手動切換。

7、Grid Displayer

Grid Displayer 是一個書籤工具,可以用來顯示Twitter Bootstrap(固定和流體網格)和Foundation( 2.0 和3.0 )的網格。它支援 Firefox 和 WebKit 核心的瀏覽器。

8、GetkickStrap

Kickstrap 完美結合 Bootstrap,採用頂尖的 Web 技術。它可以運行經過驗證的,資料庫驅動的 Web 應用程序,不需要原生後台。 Kickstrap 結合 JSPM.io 提供了建立在 Require.js 的強大的前端軟體包的依賴關係。 Kickstrap 應用程式是可以在任何時間在 Web 應用程式的生命週期中運行的靜態資源集合。

9、Font Awesome

Font Awesome 是一套專為 Twitter Boostrap 設計的圖示字體庫。這套圖標字體集幾乎囊括了網頁中可能用到的所有圖標,除了包括 Twitter Boostrap 的預設圖標外,還有社交網絡圖標、Web 應用程式圖標和編輯器圖標等等,可以免費用於商業項目。

10、Bootstrap Button Generator

這是一個很好用的Twitter Bootstrap 按鈕產生工具,你只需要輸入你要指派的新的按鈕樣式,並與不同的按鈕顏色搭配,更新就可以即時預覽。

11、Easel

Easel 是令人印象深刻的Twitter Bootstrap 設計工具,可讓你在文件中的特定元素連結到其他文件的原型應用程序中。你甚至可以有你的用戶通過測試讓你得到儘早的在回饋。

12、Fancyboot

Fancyboot 是一個簡單但強大的 Twitter Bootstrap 自訂工具,控制的恰到好處,移除了所有不必要的複雜性。

13、Bootstrap Designer

#

Bootstrap Designer is an online design tool that can create beautiful HTML5 templates based on Twitter Bootstrap. Different design styles can be created: minimalist, black and white, typography-driven, monochrome look, clean and creative, etc.

14. Bootsnipp

Bootsnipp is an element gallery designed for web designers and web developers. Anyone using Twitter Bootstrap will find it a must in their work. Indispensable.

15. PaintStrap

Paintstrap allows you to generate beautiful Twitter Bootstrap themes using Adobe Kuler or COLOURlovers color matching.

Recommended study: "bootstrap usage tutorial"

以上是bootstrap有什麼開發工具的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板