web-dev-qa-db-ja.com

Twitter Bootstrapに基づくレスポンシブデザインの流体または固定グリッドシステム

Twitterブートストラップグリッド のさまざまなオプション、およびそれらがどのように連携するかについて、私は混乱しています。

まずはじめに、通常の固定container、またはcontainer-fluidを使用できます。

その場合、どちらかに通常のrowまたは流動的な行row-fluidを含めることができます。つまり、流動的な列を持つ固定容器か、固定的な列を持つcontainer-fluid ...を持つことができますか。

それに加えて、「レスポンシブ」メディアクエリを含めるかどうかを指定できます。

私はこれらのことがどのように相互作用するかについて混乱しています。しかし、1つの明白な例から始めましょう。

サンプルページ それ自体に、 固定グリッド と 流動グリッド の両方の例として示されているものがあります/ /

しかし、私のブラウザでは、その例のページ自体で - 両方のグリッドは同じように振る舞います。おそらく、例のページではオプションのレスポンシブメディアクエリを使用しているのでしょうか。 both gridの例では、ブラウザウィンドウを徐々に狭くし始めると、グリッド要素はnotは徐々に狭くなります） - 特定の（応答性のある）境界幅に達すると、より小さくなります。しかし、通常の 'fixed'の例と 'fluid'の例はどちらもまったく同じように動作します。つまり、違いは何ですか？

twitter-bootstrapresponsive-designfluid-layoutfixed-width
397
jrochkind

あなたが固定幅と流動幅の間で決めるとき、あなたはあなたの全体のページの観点から考える必要があります。一般的には、どちらか一方を選びたいが、両方は選びません。あなたがあなたの質問にリストした例は、実際には、同じ固定幅ページにあります。つまり、足場ページは固定幅レイアウトを使用しています。足場ページの fixed grid と fluid grid は例ではなく、固定幅と流動幅のレイアウトを実装するためのドキュメントです。

適切な固定幅の例は here です。適切な流体幅の例は here です。

固定幅の例を見ると、ブラウザの幅が960ピクセルを超えると、コンテンツのサイズが変わることはありません。これはページの最大（固定）幅です。固定幅デザインのメディアクエリでは、特定のスタイルの最小幅が指定されます。ブラウザウィンドウを縮小してレイアウトを別のサイズに合わせると、この動作がわかります。

逆に、流動幅のレイアウトはブラウザウィンドウに合うようにalwaysストレッチされます。メディアクエリはスタイルがいつ変更されるかを示しますが、コンテナの幅は常にブラウザウィンドウのパーセントです（固定ピクセル数ではなく）。

「レスポンシブ」なメディアクエリはすべて準備完了です。あなたはあなたがあなたのページのために固定幅または流動的な幅のレイアウトを使いたいかどうか決める必要があります。

以前は、ブートストラップ2では、流体コンテナ内でrow-fluidを、固定コンテナ内でrowを使用する必要がありました。ブートストラップ3の導入により、row-fluidは削除されました。 使用しなくなりました 。

_ edit _ ：コメントのとおり、いくつかのjsFiddlesは次のようになります。

これらのフィドルは、純粋なCSSメディアクエリに基づいて完全にブートストラップフリーです。これは、Twitterブートストラップを使用せずに同様のソリューションを作成したいという人にとっては、良いスタートポイントとなります。

443
eterps

興味深い議論私も自分自身にこの質問をしていました。流動的なものと固定的なものとの主な違いは、単に固定されたレイアウトがウェブサイト（ビューポート）の全体的なレイアウトに関して固定された幅を有することである。 960pxの幅のビューポートを使用している場合、各列の幅は固定されていますが、変更されることはありません。

流動的なレイアウトは異なる動作をします。メインレイアウトの幅を100％に設定したとします。ブラウザのサイズが変更されると、各列は相対的なサイズ（つまり25％）と縞にのみ計算されます。そのため、レイアウトの目的に基づいて、レイアウトの動作を選択できます。

これは 流体対フレックスについての良い記事 です。

21
Lido

出典 - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

長所

  • 固定幅レイアウトは、デザインの観点から見るとはるかに使いやすく、カスタマイズも簡単です。
  • 幅はすべてのブラウザで同じなので、固定幅の画像、フォーム、ビデオ、その他のコンテンツについては面倒な作業は少なくなります。
  • とにかくすべてのブラウザでサポートされているわけではありません。
  • Webサイトが最小の画面解像度である800×600と互換性があるように設計されていても、内容は大きい解像度でも見やすくなるのに十分な幅になります。

短所

  • 固定幅レイアウトでは、画面解像度が大きいユーザーに余分な余白が生じるため、「神の割合」、「3の法則」、全体的なバランス、その他のデザイン原則が崩れます。
  • 画面レイアウトを小さくすると、固定レイアウトの幅によっては水平スクロールバーが必要になる場合があります。
  • 高解像度のものに対応するには、シームレスなテクスチャ、パターン、および画像の継続が必要です。
  • 固定幅レイアウトは、一般的に、使いやすさに関しては全体的なスコアが低くなります。
7
Thilanka De Silva

ブートストラップ3の流体レイアウト.

Boostrap 2とは異なり、Bootstrap 3は液体コンテナを作るための.container-fluidミックスインを持っていません。 .containerは固定幅のレスポンシブグリッドレイアウトです。大画面では、Webページのコンテンツの両側に余分な空白があります。

container-fluidはBootstrap 3.1で追加されました

流動的なグリッドレイアウトはすべての画面幅を使用し、大画面でよりうまく機能します。 Bootstrap 3ミックスインを使用して流動的なグリッドレイアウトを作成するのは簡単です。次の行は流動的に反応するグリッドレイアウトを作成します。

。コンテナ固定。

.container-fixedミックスインはコンテンツを画面の中央に設定し、パディングを追加します。固定ページ幅は指定されていません。

もう一つのアプローチは Eric FlowersのCSSスタイルを使うことです

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
6
Ying