ブートストラップは応答性がありますか?

# ブートストラップについて詳しく知りたい場合は、次をクリックしてください:

#Bootstrap チュートリアル

##レスポンシブ Web デザインとは何ですか?

レスポンシブ Web デザインは、ユーザーがさまざまなサイズのデバイスで Web サイトを閲覧して優れた視覚効果を得ることができる方法です。例えば、パソコンのモニターでウェブサイトを閲覧し、次にスマートフォンで閲覧する場合、スマートフォンの画面サイズはパソコンのモニターに比べてはるかに小さいですが、違いはほとんど感じられず、両者のユーザーエクスペリエンスはほぼ同じです。これは、Web サイトのレスポンシブ デザインが素晴らしい仕事をしていることを意味します。

#レスポンシブ Web デザインはどのように機能しますか?

レスポンシブ Web デザインを適用するには、さまざまなデバイス サイズに適応するスタイルを含む CSS を作成する必要があります。さまざまなフォントやメディア クエリなどの Web 開発技術を使用してページが特定のデバイスに読み込まれると、最初にデバイスのビューポート サイズが検出され、デバイス固有のスタイルが読み込まれます。

レスポンシブ Web デザインの CSS について詳しく調べてみませんか?

「bootstrap-sensitive.css」を学習することで、「レスポンシブ デザイン」がニュアンスをどのように実装するかを学びます。この前に、Web ページの先頭領域に次のコード行を追加する必要があります。

ビューポートのメタ タグは、デフォルトのビューポートをオーバーライドし、特定のビューポートに関連するコンテンツの読み込みに役立ちます。ビューポートのスタイル。

width 属性は画面の幅を設定します。これには、320 ピクセルを表す 320 や、ブラウザーにネイティブ解像度を使用するように指示する「device-width」などの値が含まれます。

initial-scale プロパティは、ビューポートの初期スケールです。 1.0 に設定すると、デバイスのネイティブ幅がレンダリングされます。

もちろん、以下に示すように、Bootstrap のレスポンシブ CSS を追加する必要があります:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

さて、レスポンシブ CSS ファイルを探すと、次のものが見つかります。 、いくつかの public 宣言 (行番号 10 から 22 まで) の後、「@media」で始まるさまざまな領域があります。これは、さまざまなデバイスで機能するスタイルを作成する方法です。 最初の領域は「

@media (max-width: 480px)

」で始まり、最大幅 480 ピクセルのデバイスのスタイルを設定します。

2 番目の領域は「@media (max-width: 767px)」で始まり、最大幅 767 ピクセルのデバイスのスタイルを設定します。

3 番目の領域は、'@media (min-width: 768px) および

(max-width: 979px)'

で始まり、最小幅は 768 ピクセルです。最大幅 979 ピクセルのデバイス スタイル。 次の領域は、最大幅 979 ピクセルのデバイスのスタイルを設定することです。したがって、「@media (最大幅: 979px)」で始まります。 最後の 2 つの領域は、それぞれ「

@media (min-width: 980px)

」と「

@media (min-width: 1200px)

」で始まり、その後に続きます。 1 つは最小幅 980 ピクセルのデバイスにスタイルを設定する方法で、後者は最小幅 1200 ピクセルのデバイスにスタイルを設定する方法です。 したがって、このスタイル シートの基本的な機能は、「min-width」属性と「max-width」属性を使用して、デバイスの最大幅と最小幅に基づいて使用するスタイルを決定することです。

説明

レイアウトの応答性を高めるために、Bootstrap は次の 3 つのことを行います。
1 。グリッドの列の幅を変更しました。

2. 必要に応じて、フローティング要素の代わりにスタック要素を使用します。スタック要素が何なのかまだわからない場合は、w3.org の次のフォームが役立つ場合があります。

ルート要素 (html) はスタック コンテキストのルートを形成し、他のスタック コンテキストは次のとおりです。配置された要素から生成されます (「auto」ではなく「z-index」の計算値を持つ、相対的に配置された要素を含みます)。スタック コンテキストは、それを含むブロックに対して必要ありません。

3. タイトルとテキストサイズを正しくレンダリングします。

モバイル対応のレイアウトをより迅速に開発します。

#Bootstrap には、モバイル フレンドリーなレイアウトを開発するための便利なクラスがいくつかあります。これらのクラスは「response.less」で見ることができます。
.visible-phone、幅 767 ピクセル以下の携帯電話で表示され、幅 979 ピクセルから 768 ピクセルのタブレットで非表示になり、デスクトップで非表示になります。これがデフォルトです。

.visible-tablet、幅 767 ピクセル以下の携帯電話では非表示、幅 979 ピクセルから 768 ピクセルのタブレットでは表示、デスクトップでは非表示、これがデフォルトです。

.visible-desktop、幅 767 ピクセル以下の携帯電話では表示されません。979 ピクセルから 768 ピクセルのタブレットでは表示されません。デスクトップでは表示されます (デフォルト)。

.hidden-phone、幅 767 ピクセル以下の携帯電話では表示されません。タブレットでは 979 ピクセルから 768 ピクセルで表示され、デスクトップでは表示されます。これがデフォルトです。

.hidden-tablet、幅 767 ピクセル以下の携帯電話で表示、幅 979 ピクセルから 768 ピクセルのタブレットで非表示、デスクトップで表示 (デフォルト)。

.hidden-desktop、幅 767 ピクセル以下の携帯電話で表示、幅 979 ピクセルから 768 ピクセルのタブレットで表示、デスクトップでは非表示 (デフォルト)。

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