モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決する

Bootstrap は、次の問題を解決する CSS フレームワークです。

デバイス間でのレスポンシブな Web ページ レイアウトの問題。携帯電話、タブレット、さまざまな解像度の画面の登場により、フロントエンドのセットをすべてのデバイスに自由に適応させるにはどうすればよいでしょうか。
複数人でのコラボレーションのためのフロントエンドのレイアウトとスタイルの標準化の問題。ボタン、リンク、フォーム、テーブル、ページング コンポーネント、ドロップダウン メニュー、ナビゲーション バー、アイコンなどの一般的なフロントエンド CSS コンポーネント。フォーム検証、ヒント、ポップアップなどの一般的な JS フロントエンド コンポーネント (拡張 JS サポートが必要)。

jQuery Mobile は、js、html、css を含むモバイル フロントエンド フレームワークです。モバイル フロントエンド開発コンポーネントの完全なセットを提供します。Android 開発フレームワークに似ています。モバイル アプリのすべての機能を可能な限り提供します。解決する問題は次のとおりです。

モバイル ナビゲーション バー、タブ、下部メニュー、リスト、フォームなどのモバイル Web アプリでよく使用されるコンポーネントは、Bootstrap が提供するコンポーネントとは大きく異なります。jQuery Mobile はモバイル アプリに似たコンポーネントを提供しますが、これはモバイル Web ページにのみ使用されます。一方、Bootstrap はすべてのデバイス用のコンポーネントを提供し、モバイル デバイスを特に考慮していません。これは、モバイル アプリのコンポーネント エクスペリエンスとは異なります。
ウェブページ間の遷移効果のための非同期データ読み込み

関数
Bootstrap のコアは主に CSS スタイルのフレームワークです。CSS のメディア クエリ機能に基づいてレスポンシブ レイアウトを実装し、フロントエンド開発者が迅速にレイアウト、開発、開発の共同作業を行うのに役立ちます。 Ajax データ相互作用を実装するには、jQuery に似た js フレームワークを使用する必要があります。
jQuery Mobile のコアは、完全な WebAPP フレームワークです。Dom 操作を実装するために軽量の jQuery が追加されています。jQuery に基づいて、モバイル アプリに似た一連のウィジェット (ビュー コンポーネント) を提供し、優れたページ遷移効果のセットを提供し、Ajax を介してバックエンド データと対話できます。

適用可能なシナリオ
Bootstrap は通常、Web サイトをさまざまなデバイスで簡単に閲覧できるようにするための Web サイトのレスポンシブ レイアウト開発や、Web サイトのバックエンド管理システムのフロントエンド CSS フレームワークとして使用されます。
jQuery Mobile は通常、モバイル アプリと同様のエクスペリエンスが期待される WebAPP に使用されます。プロジェクトは携帯電話でのみ実行され、コンピューター デバイスでの表示には使用されません (表示することはできますが、効果は良くありません)。

要約する
クロスデバイス対応のレスポンシブなフロントエンドを作成する場合は、Boostrap を選択します。モバイル側のみで作業し、APP に似た WebAPP を取得する場合は、jQuery Mobile を使用します。
製品レベルの WebAPP を作成している場合、jQuery Mobile の現在の機能では満足できない可能性があり、独自のレスポンシブ レイアウト フレームワークと WebApp コンポーネントを開発することが避けられない道となります。

最近、モバイル Web サイトを改訂したいと考えており、モバイル開発には Bootstrap を使用する予定です。ただし、インターネット上の多くの人からのフィードバックによると、Bootstrap は比較的大きいようです。PC とモバイルが統合され、適応する場合に使用されると言うべきです。モバイル サイトを作成するだけであれば、このような肥大化したものを使用する必要はありません。

<<:  CSS で実装された円形のプログレスバー

>>:  Docker rocketmq デプロイメントの実装例

推薦する

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...

MySQL データベースの手動およびスケジュールされたバックアップ手順

目次手動バックアップタイマーバックアップ手動バックアップ1) cmd コンソール: mysqldum...

JavaScriptはクリックするとランダムなグラフィックを生成します

この記事では、クリックするとランダムグラフィックの生成を実現するJavaScriptの具体的なコード...

WeChatミニプログラム開発のためのコンポーネント設計仕様

WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...

Centos7 での MySQL のインストールに関するチュートリアル

最近、自宅サーバーにクラウドディスクを導入する予定なので、一連の環境構築作業を始めました。MySQL...

USE DB 輻輳に対する MySQL ソリューションの詳細な説明

障害に遭遇すると、障害の根本的な原因を考えるのではなく、障害を解決する方法を考えることがよくあります...

Vue要素はテーブルの追加、削除、データの変更を実装します

この記事では、テーブル内のデータを追加、削除、変更するためのvue要素の具体的なコードを参考までに共...

Vueはechart円グラフの凡例のパーセンテージを表示するメソッドを実装します

この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...

JavaScript 手ぶれ補正のケーススタディ

原理手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒...

Node.js とブラウザのグローバル オブジェクトの違いの概要

Node.js では、.js ファイルは完全なスコープ (モジュール) です。したがって、var に...

画像プレビュー付きのアップロードフォームの完全な HTML

画像プレビュー機能付きのアップロードフォーム、完全なHTMLコードは次のとおりです。 <htm...

CSSはマウスが画像に移動したときにマスク効果を実現します

1.マスクレイヤーのHTMLコードと画像をdivに配置する.img_div に入れました。 <...

Nginx ロケーションマッチングルールの例

1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...