css - 按比例减小 twitter bootstrap 标题大小

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 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

给 the 一个类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%. :)