Bootstrap 3.0 学習ノート CSS関連補足

この記事の主な内容は次のとおりです。

1. ブラウザのサポート

2. 画像

3. レスポンシブツール

4. 遭遇した問題

5. まとめ

ブラウザのサポート

Bootstrap は最新のデスクトップ ブラウザーとモバイル ブラウザーで最高のパフォーマンスを発揮することを目指しています。そのため、一部のコンポーネントは古いブラウザーでは若干異なって見える場合がありますが、機能はそのままです。

特に、Bootstrap は次のブラウザの最新バージョンを強力にサポートします。

Bootstrap は Chromium、Linux 版 Chrome、Linux 版 Firefox、Internet Explorer 7 でも正常に動作しますが、Bootstrap はこれらを公式にはサポートしていません。

Internet Explorer 8 および 9 はサポートされていますが、角丸四角形やドロップ シャドウなど、多くの CSS3 プロパティと HTML5 要素はサポートされていないことに注意してください。さらに、Internet Explorer 8 では、メディア クエリをサポートするために Respond.j が必要です。

写真

<img> 要素にさまざまなクラスを追加することで、スタイルを簡単に変更できます。

Internet Explorer 8 は角丸四角形をサポートしていないことに注意してください。

ちなみにレスポンシブ画像

.img-responsive クラスを追加することで、Bootstrap 3 の画像をレスポンシブ レイアウトに適したものにすることができます。重要なのは、画像に max-width: 100%; と height: auto; の属性を指定して、画像を比例的に拡大縮小し、親要素のサイズを超えないようにすることです。

レスポンシブツール

これらのユーティリティ クラスを使用して、画面やさまざまなメディア クエリに基づいてページ コンテンツを表示または非表示にすることで、モバイル デバイスの開発をスピードアップします。

これらのクラスを使用して、異なるデバイス向けに最適化するために同じサイトの異なるバージョンを作成しないようにしてください。レスポンシブ ツールは現在、ブロック レベル要素でのみ機能し、インライン要素やテーブル要素はサポートしていません。

利用可能なクラス

以下のクラスを個別または組み合わせて使用​​することで、さまざまな画面サイズに応じてページ コンテンツを非表示または表示できます。

印刷クラス

通常のレスポンシブ クラスと同様に、プリンターのコンテンツを非表示または表示するには、次のクラスを使用します。

テストケース

上記のツール クラスをテストするには、ブラウザ ウィンドウのサイズを変更するか、このページを別のデバイスに読み込みます。

発生した問題

1. ブラウザの互換性: これは以前にも導入されています。今のところ、IE10、Chromeの最新バージョン、FireFoxの最新バージョンを主に使用しています。

2. ブラウザの幅が変わると CSS ファイルは再読み込みされますか? 現時点では、現在のサイズに適したスタイル クラスのみが再読み込みされるため、答えは「いいえ」です。 （この説明が妥当かどうかは分かりません）

3.PrntScr スクリーン印刷。まだ Bootstrap で見つけていません。どこかで見つけたら、教えてください。

4. require.js を皆さんが知っているかは分かりません。主に Web 閲覧の速度向上のために使用されるはずですが、使い方や Bootstrap との併用方法が分かりません。

5. !important の役割: 多くのフロントエンドの攻城エンジニアは、これについて非常に明確に理解しているはずです。

6.Bootstrap.js 参照: 最初に jQuery ライブラリを参照し、順序が明確であることを確認してください。

もちろん他にも質問はたくさんあると思いますが、今は思いつかないので、とりあえずこの6つを覚えておいてください。

要約する

Bootstrap CSS を簡単に整理しました。 多くのスタイル クラス、簡単な組み合わせと適用、使用すべき要素を理解します。そうすれば、フロントエンドについてあまり知らなくても、優れたインターフェイスを設計できます。もちろん、Bootstrap コンポーネントや JavaScript プラグインなど、フロントエンド開発をよりシンプルかつ強力にするより優れた機能が今後登場する予定です。