ブートストラップの 3 つのコアとは何ですか?

Bootstrap により、フロントエンド開発がより迅速かつ簡単になります。すべての開発者がすぐに開始でき、すべてのデバイスを適応させることができ、すべてのプロジェクトに適用できます。

Bootstrap が提供する CSS スタイル シートを直接使用することもできますが、Bootstrap のソース コードは最も一般的な CSS 前処理スクリプトに基づいて開発されていることを忘れないでください - Lessそしてサス。プリコンパイルされた CSS ファイルを使用して迅速に開発することも、ソース コードから必要なスタイルをカスタマイズすることもできます。 (推奨学習: Bootstrap ビデオ チュートリアル )

Bootstrap を利用すると、Web サイトとアプリケーションを同じコードを通じて携帯電話、タブレット、PC デバイスに迅速かつ効果的に適応させることができます。そのうち、CSS メディア クエリの結果です。

Bootstrap は、包括的で美しいドキュメントを提供します。ここでは、HTML 要素、HTML および CSS コンポーネント、jQuery プラグインに関する詳細なドキュメントをすべて見つけることができます。

Bootstrap の 3 つのコア コンポーネント

基本 CSS: グローバル CSS スタイルを設定し、基本的な HTML 要素はクラスを通じてスタイル設定でき、拡張効果を得ることができます。および高度なグリッド システム。

コンポーネント: フォント アイコン、ドロップダウン メニュー、ナビゲーション、警告バー、ポップアップ ボックスなどを含む無数の再利用可能なコンポーネント;

JS プラグイン: Bootstrap 13 個の jQuery が付属プラグインは、Bootstrap のコンポーネントに「命」を与えます。

モバイル ファースト

モバイル ファーストは、Bootstrap 3 の最も重要な変更です。

以前の Bootstrap バージョン (2.x まで) では、プロジェクト全体をモバイル対応にするために別の CSS を手動で参照する必要がありました。

今は違います。Bootstrap 3 のデフォルト CSS 自体はモバイル対応です。

Bootstrap 3 は、モバイルを第一に、デスクトップを第二に設計されています。モバイルデバイスを使用するユーザーがますます増えているため、これは実際には非常にタイムリーな変化です。

Bootstrap で開発された Web サイトをモバイル対応にし、適切な描画とタッチスクリーンのスケーリングを保証するには、Web ページの先頭にビューポート メタ タグを追加する必要があります。

以下に示すように:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性はデバイスの幅を制御します。 Web サイトがさまざまな画面解像度のデバイスで表示されることを想定して、Web サイトをデバイス幅に設定すると、さまざまなデバイスで正しくレンダリングされます。

initial-scale=1.0 を指定すると、Web ページが読み込まれるときに、スケーリングなしで 1:1 の比率でレンダリングされます。

モバイル デバイス ブラウザでは、ビューポート メタ タグに user-scalable=no を追加することでズーム機能を無効にできます。

ブートストラップ関連の技術記事の詳細については、こちらをご覧ください。ブートストラップ チュートリアル 列!

以上がブートストラップの 3 つのコアとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。