ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップにはどのような開発ツールがありますか?

ブートストラップにはどのような開発ツールがありますか?

青灯夜游
青灯夜游オリジナル
2021-10-29 11:51:034676ブラウズ

ブートストラップ開発ツール: 1. Jetstrap; 2. Bootply; 3. DivShot; 4. Bootstrap Magic; 5. Layoutit; 6. X-editable; 7. Grid Displayer; 8. GetkickStrap など。

ブートストラップにはどのような開発ツールがありますか?

このチュートリアルの動作環境: Windows 7 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

Bootstrap は、アメリカの Twitter 企業 Mark Otto は、Jacob Thornton と協力して、HTML、CSS、および JavaScript に基づいたシンプルで直感的で強力なフロントエンド開発フレームワークを開発し、Web 開発を高速化しました。 Bootstrap は、動的 CSS 言語 Less で記述されたエレガントな HTML および CSS 仕様を提供します。

Bootstrap は発売以来非常に人気があり、NASA の MSNBC (Microsoft National Broadcasting Company) Breaking News など、GitHub 上の人気のオープンソース プロジェクトとなっています。 WeX5 フロントエンド オープン ソース フレームワークなど、国内のモバイル開発者に馴染みのある一部のフレームワークも、Bootstrap ソース コードに基づいてパフォーマンスが最適化されています。

ブートストラップ開発ツール:

1. Jetstrap

Jetstrap は完全に Web ベースです。 、Twitter Bootstrap 用のインターフェイス構築ツールで、開発者、デザイナーなどのために構築されています。 Jetstrap は、ほとんど労力をかけずに美しい Web サイトを迅速に作成するのに役立ちます。

2. Bootply

Bootply を使用すると、Bootstrap を簡単にデバッグできます。 CSS、HTML、JavaScriptを編集します。 Bootply を使用して、Bootstrap フレームワークの設計、プロトタイプ、拡張、またはテストを行うことができます。 Bootply は、他の人気のある Bootstrap プラグイン、マイクロ ライブラリ、およびフレームワークと統合します。

3. DivShot

Divshot は、Twitter Bootstrap を使用できるドラッグ アンド ドロップ ベースのフロントエンド エディターです (もちろん Foundation も使用できます) ) 応答性の高い Web サイトを構築します。DIY コーディングは、単純なドラッグ アンド ドロップ操作です。

4. Bootstrap Magic

Bootstrap Magic テーマ ジェネレーターは Twitter Bootstrap 3 と AngularJS に基づいて構築されています。独自の Twitter Bootstarp テーマをすばやく簡単に作成できます。変更内容をすぐに確認でき、Google Webfont から美しい Web フォントを追加できます。

5. Layoutit

LayoutIt は、Web サイトとインターフェース モデルを迅速に作成し、同時に生成された Web サイト コードをダウンロードするのに役立つ Twitter Bootstrap インターフェース ジェネレーターです。わずか数回のドラッグ アンド ドロップ操作で、美しい Twitter Bootstrap Web サイトを作成できます。すべてのデザインはレスポンシブな CSS と流動的なものにすることができ、あらゆるプログラミング言語と簡単に統合できます。HTML をダウンロードするだけでデザインのコーディングを開始できます。

6、X-editable

X-editable は、Twitter Bootstrap、jQuery UI、または純粋な jQuery を使用したインプレース編集をサポートします。このライブラリを使用すると、Web ページ上に編集可能な要素を作成できます。これには、ポップアップ モードとインライン モードが含まれます。テキスト、テキストエリア、ドロップダウンリスト、日付、dateui、チェックリストなどの入力要素をサポートします。クライアント側とサーバー側の検証をサポートします。さらに、コンテナの位置は完全にカスタマイズ可能で、ユーザーはシングルクリックまたはダブルクリックで自動または手動で切り替えることができます。

7. Grid Displayer

Grid Displayer は、Twitter Bootstrap (固定および流動グリッド) および Foundation (2.0 および 3.0) グリッドを表示するために使用できるブックマーク ツールです。 。 Firefox および WebKit ベースのブラウザをサポートします。

8. GetkickStrap

Kickstrap は Bootstrap を完璧に組み合わせ、一流の Web テクノロジーを使用します。ネイティブ バックエンドを必要とせずに、実証済みのデータベース駆動型 Web アプリケーションを実行できます。 JSPM.io と組み合わせた Kickstrap は、Require.js 上に構築された強力なフロントエンド パッケージの依存関係を提供します。キックストラップ アプリケーションは、Web アプリケーションのライフ サイクル中いつでも実行できる静的リソースのコレクションです。

9. Font Awesome

Font Awesome は、Twitter Boostrap 用に特別に設計されたアイコン フォント ライブラリのセットです。このアイコンフォントセットは、Webページで使用されるほぼすべてのアイコンを網羅しており、Twitter Boostrapのデフォルトアイコンのほか、ソーシャルネットワークアイコン、Webアプリケーションアイコン、エディタアイコンなども含まれており、Webページで無料で使用できます。商業プロジェクト。

10. Bootstrap Button Generator

これは非常に便利な Twitter Bootstrap ボタン生成ツールです。割り当てたい新しいボタン スタイルを入力するだけです。ボタンの色が異なると、更新を即座にプレビューできます。

11、Easel

Easel は、ドキュメント内の特定の要素を他のファイルのプロトタイプ アプリケーションにリンクできる、印象的な Twitter Bootstrap デザイン ツールです。ユーザーにテストに合格してもらい、早期にフィードバックを得ることができます。

12. Fancyboot

Fancyboot は、適切な量の制御を備え、不必要な複雑さをすべて取り除いた、シンプルかつ強力な Twitter Bootstrap カスタマイズ ツールです。

13、ブートストラップ デザイナー

Bootstrap Designer 是一個線上設計工具,可以製作出非常漂亮的基於 Twitter Bootstrap 的 HTML5 模板。可以創造不同的設計風格:簡約風格,黑白,排版驅動的,單色的外觀,乾​​淨及創意等。

14、Bootsnipp

Bootsnipp 是一個元素畫廊,為網頁設計師和Web 開發人員設計,任何人使用Twitter Bootstrap 都會發現在他們的工作是必必不可少的。

15、PaintStrap

Paintstrap 讓你可以產生使用漂亮的 Twitter Bootstrap 主題,使用 Adob​​​​e Kuler 或 COLOURlovers 配色。

推薦學習:《bootstrap使用教程

以上がブートストラップにはどのような開発ツールがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。