2016-12-13 3 views
1

私たちのデザイナーは、グリッドシステムを使わずにウェブサイトを設計しましたが、幸いなことに、グリッドシステムがいくつかの設定をするのに合っていました。まだ12グリッドですが、溝と列のサイズはブートストラップとは異なります。この時点でいくつかの質問をしたいと思います。ブートストラップの溝と列のサイズをカスタマイズする

  • これは、ブートストラップの公式のカスタマイザまたはブートストラップライブカスタマイザからブートストラップをカスタマイズするための良い動作ですか?

  • 同時にカスタマイズして応答性を保ちたい場合は、どのような方法が最適ですか。

変更したい設定は、溝サイズと列サイズです。私はブートストラップの使い方を知っていますが、決してカスタマイズしようとはしていません。私は、あらかじめカスタマイズしたブートストラップは、ほとんどすべての要素に対してパディング/マージンを使用するよりも優れた方法であると考えていました。

これを計算する適切な方法は何ですか?たとえばBootstrapの公式カスタマイザでは、どのフィールドを変更する必要がありますか?どのようにすべての画面サイズのサイズを計算する必要がありますか?


設計中に1440 x 900も使用しました。

このグリッド設定を次のように変更するにはどうすればよいですか?ここで私は私がデザインし合うことができるグリッド設定を追加している:

enter image description here

+1

* "これはブートストラップの公式のカスタマイザからブートストラップをカスタマイズするのに適した動作ですか?" - 確かに、なぜそうではありませんか?それが何のためのものではありませんか? *「カスタマイズし、同時に応答性を保ちたいときには、最良の方法はありますか?」* - 私は**信じていますが、これについて私は引用していません。どのような設定を変更しても応答性が保たれます。 –

+0

設定を変更して設定をブートストラップに適応させてもらえますか?私は計算をどうやって作るのか非常に混乱しています。 – senty

+0

私は計算をする必要はないと思います。カスタマイザは、cssをコンパイルするときに値を使用してすべてを自動的に計算します。溝サイズを変更するには、https:// getbootstrapにアクセスしてください。com/customize /#grid-systemを編集し、 '@ grid-gutter-width'を調整すれば、その値に基づいて他のすべてを計算します。しかし、カラムは通常、幅にパーセンテージを使用するため、固定サイズを使用することはできません。たとえば、12列レイアウトの列は、幅が「1/12」または「8.333%」になります。 –

答えて

0

ブートストラップは、あなたがしたい場合は、あなたのプロジェクトに上書きすることができます変数のセットを持っています。 _variables.scss

最大幅:$container-max-widths、列の
数:$grid-columns
及び樋サイズ:$grid-gutter-width-base
さらに、各画面サイズに異なる溝サイズを設定することができます:$grid-gutter-widths

ブートストラップのプリコンパイルされたCSSファイルではなく、それをscssバージョンとして使用し、自分でscssファイルをコンパイルできます。


更新:

UPS、著者は、ブートストラップの少ないバージョンを使用しています。したがって、より少ない変数を変更することができます:@gridColumns@gridColumnWidth@gridGutterWidthなど。

+0

すべての変数に!defaultを使用します。 ** $ container-max-widths:1440px!default; ** とブートストラップを必要とする前に変数を設定してください。 –

+0

@VitaliyAndrusishynはい、あなたは正しいです。 – 3rdthemagical

関連する問題