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

推薦する

Windows の MySQL net start mysql MySQL サービスの起動エラーが発生する システムエラーの解決

目次1- エラーの詳細2-シングルソリューション2.1-ディレクトリ C:\Windows\Syst...

MySQL ユーザー権限管理の分析例

この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...

Dockerはローカルディレクトリとデータボリュームコンテナ操作をマウントします

1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...

要素テーブルの行と列のドラッグを実装する例

要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...

MySQL接続クエリにおけるととwhereの違いの簡単な分析

1. テーブルを作成する テーブル「学生」を作成( `id` int(11) NULLではない、 `...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

Linux で MySQL スケジュール タスク バックアップ データを実装する方法

序文バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

MySQL ifnull のネスト使用手順

MySQL ifnull のネストされた使用ifnull をネストする方法があるかどうかオンラインで...

MySQL データベースは何をしますか?

MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...

Vue は小数点付きの星評価を実装します

この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...

Mac OS に MySQL 5.7.20 をインストールするための詳細なグラフィックとテキストの説明

Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

ウェブサイトをIE6、7、8、9の古いバージョンに対応させるための3つのソリューション

Microsoft は後からブラウザの研究開発に力を入れてきましたが、実際のところ、最新の IE ブ...

カスタムスクロールバー効果を実現するJavaScript

実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...