Question

不确定这是否可行。我认为Twitter Bootstrap标题大小太大了。 h1是36px; h2是30px，依此类推。

有没有办法按比例缩小标题大小？假设我只想要每个标题的90％。我不想逐一声明每个标题的字体大小。

感谢。

Answer 1

我意识到这个帖子已经超过18个月了，但是如果有人再遇到这个问题，最新版本的Bootstrap（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

因此，只需调整每个乘数的乘数即可产生影响。

Answer 2

如果通过调整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指出的那样，标题大小将基于@baseFontSize from 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; }

Answer 3

给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%。：）

按比例减少twitter bootstrap标题大小

3 个答案: