2012-09-17 54 views
9

不確定這是否可行。我認爲Twitter Bootstrap標題太大了。 h136px; h230px,依此類推。按比例降低twitter引導標題大小

有沒有什麼辦法可以按比例縮小標題大小?假設我只想每個標題的90%。我不想一一列出每個標題的字體大小。

謝謝。

+1

我相信引導程序會設置一個baseFontSize變量,幾乎所有的字體大小屬性都是相對的,例如: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

我相信,那就是.9em或90%的body base font size,而不是在CSS中聲明的h1 font-size屬性。 – Mark

+0

@Mark,TBS聲明'h1 {font-size:36px;}',我們不能將它覆蓋爲原始的90%的.myClass h1 {font-size:0.9em;}'。它的作品正確嗎? –

+1

我的擔心是我認爲它不是原始的,而是它的繼承字體大小。 DOM中具有明確字體大小的正文或父元素的字體大小。 – 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,如果這是一個變量OP可以建立一個[自定義引導](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

@ B.Martin上面的代碼是bootstrap less/variables.less文件中的代碼片段,並非我寫的代碼。即使在最新版本v3.3.6(非sass)中,代碼也是一樣的。 – alexkb