ホームページ >ウェブフロントエンド >htmlチュートリアル >フロントエンド開発フレームワーク_html/css_WEB-ITnose

フロントエンド開発フレームワーク_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:19:021050ブラウズ

1. Bootstrap

Boostrap は間違いなく現在最も人気があり、広く使用されているフレームワークです。これは、クロスブラウザー互換性のある美しいページを開発するために使用できる、美しく直感的かつ強力な Web デザイン ツールキットです。シンプルなスタイル、グリッド システム、一般的に使用されるいくつかの JavaScript プラグインを備えた多くの人気のある UI コンポーネントが提供されます。

Bootstrap は動的言語 LESS で書かれており、主に 4 つの部分で構成されています:

  • Scaffolding - グローバル スタイル、応答性の高い 12 列グリッド レイアウト システム。 Bootstrap にはデフォルトではレスポンシブ レイアウト機能が含まれていないことに注意してください。したがって、デザインに応答性の高いレイアウトが必要な場合は、この機能を手動で有効にする必要があります。
  • 基本 CSS - テーブル、フォーム、ボタン、画像などの基本的な HTML ページ要素が含まれており、これらの要素にエレガントで一貫したスタイルを提供します。
  • コンポーネント - ドロップダウン、ボタン グループ、ナビゲーション コントロールなどの多数の再利用可能なコンポーネントのコレクション - タブ、ピル、リスト タグ、ブレッドクラム ナビゲーション (パンくずリスト)、およびページネーション、サムネイル、プログレス バー、メディアが含まれます。オブジェクトなど
  • JavaScript - コンポーネントの動的なページ効果を実現できる一連の jQuery プラグインが含まれています。プラグインには主にモーダル、ツールチップ、ポップオーバー、スクロールスパイ、カルーセル、タイプアヘッドなどが含まれます。
  • Bootstrap は、さまざまな形式の Web インターフェイスを実装するのに十分強力です。 Bootstrap による開発をより便利にするために、多くのツールとリソースを組み合わせて使用​​できます。その一部を以下に示します。

    jQuery UI Bootstrap - これは、jQuery および Bootstrap の愛好家にとって非常に優れたリソースであり、Bootstrap の更新されたインターフェイス コンポーネントを jQuery UI に導入できます。
  • jQuery モバイル ブートストラップ テーマ - 前述の jQuery UI テーマと同様、これは jQuery モバイル用に構築されたテーマです。 Bootstrap で開発された Web サイトに携帯電話でもエレガントにアクセスできるようにしたい場合、このリソースは非常に便利で使いやすいです。
  • Fuel UX - いくつかの軽量の JavaScript コントロールを Bootstrap に追加します。 Fuel UI は、インストール、変更、更新、最適化が簡単で便利です。
  • StyleBootstrap.info - Bootstrap は独自のインターフェイス スタイルをいくつか提供し、さらに多くのカラー マッチング オプションを提供し、各コンポーネントに異なる色を適用できます。
  • BootSwatchr - このツールを使用すると、テーマの変更の効果を即座に確認できます。変更ごとに、このアプリケーションは他のユーザーと共有するための一意の URL を生成します。また、いつでもテーマを変更することもできます。
  • Bootswatch - 多数の無料の Bootstrap テーマを提供します。
  • Bootsnipp - オンライン フロントエンド フレームワークのインタラクティブなコンポーネント作成ツールで、デザイナーと開発者向けの Bootstrap HTML/CSS/JavaScript アーキテクチャに基づく無料の要素です。
  • LayoutIt - インターフェイスのドラッグ アンド ドロップ ビルダーを使用して、ブートストラップ ベースのフロントエンド コードを迅速かつ簡単に作成します。ドラッグ アンド ドロップ操作を通じてブートストラップ スタイルのコンポーネントを個人のデザインに追加し、そのプロパティを簡単に変更できるため、シンプルで便利です。
  • 2. Fbootstrap

    Fbootstrap は Bootstrap に基づいており、Facebook iframe アプリと同じ機能とデザインを提供します。タイポグラフィ、フォーム、ボタン、テーブル、グリッド、ナビゲーションなどを含むすべての標準コンポーネントの基本的な CSS と HTML が Facebook に似たスタイルで含まれています。

    3. BootMetro

    BootMetro フレームワークは、Metro UI CSS からインスピレーションを受け、Bootstrap フレームワークに基づいて構築され、Windows 8 Metro スタイルの Web サイトを作成するために使用されます。これには、Bootstrap のすべての機能が含まれており、ページ タイル、アプリ バーなどの追加機能がいくつか追加されています。

    4. キックストラップ

    キックストラップはブートストラップの一種です。これは Bootstrap に基づいており、その上に多くのアプリ、テーマ、追加機能が追加されます。これにより、他に何もインストールする必要がなく、Web サイトを構築するためにフレームワークをスタンドアロンで使用できるようになります。あなたのウェブサイトにそれを配置して使用するだけです。

    アプリは、ページが読み込まれた後に読み込まれて実行される JavaScript および CSS パッケージ ファイルです。デフォルトでロードされるアプリには、Knockout.js、Retina.js、Firebug Lite、および Updater が含まれます。さらにアプリを自分で追加することもできます。

    さまざまなテーマを選択すると、Bootstrap で構築された多くの同様の Web サイトの中であなたの Web サイトを目立たせることができます。

    追加関数は、Bootstrap UI ライブラリを拡張するために使用されるいくつかの添付ファイルであり、その構文は基本的に同じか類似しています。

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