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

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

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

1. ブラウザのサポート

2. 画像

3. レスポンシブツール

4. 遭遇した問題

5. まとめ

ブラウザのサポート

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

サポートされているブラウザ

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

Chrome (Mac、Windows、iOS、Android) Safari (Mac と iOS のみで利用可能、Windows 版は基本的に廃止) Firefox (Mac、Windows) Internet Explorer Opera (Mac、Windows)

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

インターネットエクスプローラー8および9

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

写真

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

クロスブラウザ互換性

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


コードをコピー
コードは次のとおりです。
<img src="http://placehold.it/150x150" class="img-rounded"> <img src="http://placehold.it/150x150" class="img-circle"> <img src="http://placehold.it/150x150" class="img-thumbnail">

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

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


コードをコピー
コードは次のとおりです。
<img src="..." class="img-responsive">

レスポンシブツール

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

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

利用可能なクラス

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

印刷クラス

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

テストケース

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

発生した問題

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 プラグインなど、フロントエンド開発をよりシンプルかつ強力にするより優れた機能が今後登場する予定です。

<<:  CSS3 トランジション回転パースペクティブ 2D3D アニメーションおよびその他の効果のサンプル コード

>>:  Vue で @person 関数を実装する方法

推薦する

And キーワードを使用した MySQL の複数条件クエリ ステートメント

AND キーワードを使用した MySQL 複数条件クエリ。MySQL では、AND キーワードを使用...

「いいね!」機能では MySQL と Redis のどちらを使用すればよいでしょうか?

目次1. 初心者が陥りがちな間違い2. Iteratorのremove()メソッドを使用する3. f...

ウェブページの読み込み速度を上げる6つのヒント

第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...

Linux システムで TCP 接続を作成するプロセスの紹介

目次LinuxでTCPを作成する手順サーバクライアントTCP確立プロセスサンプルコードLinuxでT...

CSS ファンタスティックボーダーアニメーション効果の実装

今日、私はブログサイト shoptalkshow を閲覧していて、非常に興味深いこのインターフェース...

CSSファイルをインポートする3つの方法の詳細な説明

CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...

オブジェクト内のフィールドを削除する js メソッド

この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有し...

Vueカスタムコンポーネントは双方向バインディングを実装します

シナリオ:一般的に使用される親コンポーネントと子コンポーネント間の相互作用方法は次のとおりです。親コ...

CentOS システムのディスク パーティションを拡張する方法

問題/障害/シナリオ/要件Eve-ng の仮想マシン OVA のハードディスクは 38G しかないた...

dockerでsshd操作を有効にする

まず、docker に openssh-server をインストールします。インストールが完了したら...

Linux サーバーが処理できる接続数をご存知ですか?

序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...

Centos7でのMySQLインストールチュートリアル

MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...

MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル(MAC)

この記事では、主にMACオペレーティングシステムでのMySQL5.7とMySQLWorkbenchの...

MySQL のあまり知られていないソート方法

序文ORDER BY 字段名升序/降序、このソートステートメントは皆さんご存知だと思いますが、特殊な...