モバイル 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 デプロイメントの実装例

推薦する

mysql5.7 でユーザーの初期パスワードを変更する方法

ユーザーが初めて MySQL データベースをインストールするとき、初期のルート パスワードを変更する...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

JavaScript 操作要素の例

操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、...

Vue+flaskで動画合成機能を実現(ドラッグ&ドロップアップロード)

目次ドラッグアンドドロップアップロードについては以前の記事で書きました。ファイルをアップロードするF...

大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

目次解決策1: EUIの転送コンポーネントをコピーして変更し、プロジェクトディレクトリに導入する解決...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

HTML タグのネスト規則の紹介

XHTML タグには、div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、s...

VueRouterルーティングの詳細な説明

目次vueルーター1. ルーティングの概念を理解する1.1 ルーティングとは何ですか? 1.2. バ...

MySQL LOAD_FILE() 関数メソッドの概要

MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...

Reactコンポーネントのライフサイクル機能についての簡単な説明

React コンポーネントのライフサイクル機能とは何ですか?ライフサイクル関数は、ES6 構文クラス...

MySQLのメモリ使用量を表示する方法の詳細な説明

序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...

IE における条件付きコメントの利点と欠点

IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...

MySQLでNULL値を判定する際の落とし穴事例

目次序文Mysql の case when 構文:事例実践:要約:序文今日、プログラムを開発している...

ReactとReduxの関係を詳しく説明

目次1. reduxとreactの関係2. Reactのマルチコンポーネント共有3. reduxの3...