2012-09-17 8 views
9

これが可能かどうかわかりません。 Twitter Bootstrapの見出しサイズが大きすぎると思います。 h136pxです。 h230pxであり、以下同様である。twitterのブートストラップ見出しサイズを比率で減らす

割合で見出しサイズを減らす方法はありますか?代わりにそれぞれの見出しの90%がほしいと思うとします。私はそれぞれの見出しのフォントサイズを1つずつ宣言したくありません。

ありがとうございました。

+1

私はbootstrapがbaseFontSize変数を設定していると考えています。ほとんどのfont-sizeプロパティは、それと相対的です。font-size:@baseFontSize * 2;あなたはそれをより小さなものに変えることができます。 – Mark

答えて

0

bodyにクラスを与え、このCSSを与える:

body.myClass h1, 
body.myClass h2, 
body.myClass h3, 
body.myClass h4, 
body.myClass h5, 
body.myClass h6 {font-size: 0.9em;} 

これはあなたの元のサイズの90%を提供します。 90%とすることもできます。 :)

+1

私はそれがCSSの他の場所で宣言されたh1 font-sizeプロパティではなく、bodyベースのfont-sizeの.9emまたは90%です。 – Mark

+0

@マーク、TBSは 'h1 {font-size:36px;}'を宣言しています。オリジナルの90%である '.myClass h1 {font-size:0.9em;} 'それは正しく機能しますか? –

+1

私の懸念は、私はそれが元のものではなく、その継承されたフォントサイズのものだと思っていたということでした。明示的なfont-sizeを持つDOMの本文または親要素のfont-size – Mark

5

これがLESSの変数を調整することで可能だったのはいいですが、そうは思わないです。 variables.lessから

// Typography 
// ------------------------- 
@sansFontFamily:  "Helvetica Neue", Helvetica, Arial, sans-serif; 
@serifFontFamily:  Georgia, "Times New Roman", Times, serif; 
@monoFontFamily:  Monaco, Menlo, Consolas, "Courier New", monospace; 

@baseFontSize:   14px; 
@baseFontFamily:  @sansFontFamily; 
@baseLineHeight:  20px; 
@altFontFamily:   @serifFontFamily; 

@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily 
@headingsFontWeight: bold; // instead of browser default, bold 
@headingsColor:   inherit; // empty to use BS default, @textColor 

ですから、@baseFontSizeを変更することで、テキストのすべてのを拡張できましたが、残念ながら全く別の@baseHeaderFontSizeはありません。あなたはいつでもプロジェクトをフォークすることができます!

編集2: @mervが指摘するように、ヘッダサイズは@baseFontSizefrom 2.1.2に基づくべきです。

オリジナル編集:見出しの大きさは、とにかくハードコードされているようですが、実際に見えます:type.less:もう一度、

h1 { font-size: 36px; line-height: 40px; } 
h2 { font-size: 30px; line-height: 40px; } 
h3 { font-size: 24px; line-height: 40px; } 
h4 { font-size: 18px; line-height: 20px; } 
h5 { font-size: 14px; line-height: 20px; } 
h6 { font-size: 12px; line-height: 20px; } 
+0

私はOPはプレーンなCSSを使用していると思います。 :) –

+1

それから彼はLESSに切り替えるべきです。 :) – RichardTowers

+0

実際には、普通のCSSであっても、これが変数であれば、変数は希望通りに[カスタムブートストラップ](http://twitter.github.com/bootstrap/customize.html#variables)を構築することができます。しかし、それは変数ではありません。 – RichardTowers

6

私はこのスレッドは現在、18ヶ月以上古いですが実現するが、場合には、誰かがこの遭遇ブートストラップ(v3.1.1)の最新バージョンはそうのように、less/variables.lessに設定されているすべての見出しのフォントサイズを持っています

@font-size-h1: floor((@font-size-base * 2.6)); // ~36px 
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px 
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px 
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px 
@font-size-h5: @font-size-base; 
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px 

だから、持っているこれらの各乗算器を微調整するだけの場合です影響。

+0

'解決策:'二重ブラケットを単一のブラケットに交換します。これは私の見解のバグです。 –

+0

@BartMartin上記のコードは、私が書いたコードではなく、ブートストラップless/variables.lessファイルからの抜粋です。このコードは、最新バージョンのv3.3.6(non-sass)でも同じです。 – alexkb

関連する問題