以下是bootstrap.css的标头大小：

h1 {
  font-size: 38.5px;
}

h2 {
  font-size: 31.5px;
}

h3 {
  font-size: 24.5px;
}

我很惊讶这些尺寸是分数(半整数),这表明它们的精度至少为0.25px(小于1％).

网页设计师如何达到这样的尺寸？他们是通过一些科学过程获得的,也许是一些计算？或者人们只是盯着他们的网站,玩大小直到它感觉正确？设计师如何说服他的队友确实应该是31.5px而不仅仅是31px？

它们没有精确指定字体大小31.5px,而是指定了基本字体大小和标题系数,请参阅 code：

// file: variables.less
@baseFontSize:          14px;

// file: type.less
h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5 { font-size: @baseFontSize; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px

bootstrap的用户可以自定义基本字体大小,如果他们愿意,可以在他们的自定义构建中自定义;标题中的字体大小将自动和按比例更改,这就是重点.

我正在使用Bootstrap for my Rails应用程序和bootstrap-sass v.3.1.1,它在我的application.css.scss文件中使用了以下内容：

@import "bootstrap";

没有别的.就在今天,我尝试添加一些自己的CSS来添加一些我没有使用Bootstrap的样式.这是我的欢迎视图/控制器所以我只是将它添加到welcome.css.scss

.complete-class {
  text-decoration: line-through;
}

从阅读@L_301_0@我的理解是你可以在清单中包含像welcome.css.scss这样的CSS文件,如下所示：

@import "bootstrap";

/*
*= require_self
*= require_tree .
*/

这没有成功应用我的CSS; welcome.css.scss也没有出现在head标签中.

当我试图调试这个时,我遇到了一些奇怪的事情,我觉得我也应该指出：

1.导入引导程序时出错

VIM的Syntastic插件有助于指出错误：

File to import not found or unreadable: bootstrap. Load path: /home/stephen/code/bLocitoff/app/assets/stylesheets

这很奇怪,因为

> a)之前没有出现过这个错误,尽管我没有更改它引用的代码行(@import“bootstrap”)

和

> b)bootstrap仍然忠实地应用于我的页面布局,并出现在head标签的资产中.

2.卸载bootstrap-sass

我搜索了上面的错误并找到了this issue,这表明我卸载并重新安装bootstrap-sass.虽然奇怪的是,即使我卸载了宝石,引导设备仍然保留在页面上,但这并没有奏效.

rails的版本是4.1.5

>将所有css移动到application.css.scss

因为看起来我正在从application.css.scss加载bootstrap,所以我在那里添加了我的css,但这也没有用.

>浏览器上的隐身模式

最后我想如果卸载bootstrap-sass时引导程序没有消失那么可能它们被缓存在我的浏览器上了？我认为在开发过程中没有发生这种情况,但以防我在隐身模式下启动了chrome.仍然没有变化.

除了弄清楚如何解决这个问题之外,我真的很想了解这里发生了什么 – 希望我能更好地了解rails资产管道的工作原理.

的Gemfile

gem ''bootstrap-sass'',''~> 3.2.0''
gem ''sass-rails'',''>= 3.2''

application.css

/*
*= require shared/bootstrap-base
*= require_self
*/

应用程序/资产/样式表/共享/自举-base.scss

@import "bootstrap";

我使用的是bootstrap.css，我发现还有一个名为bootstrap-combine.min.css的css文件，样式有什么区别吗？有没有必要包含两个css文件？哪一个更好？

文件bootstrap-combined.min.css用于Bootstrap v2，它是bootstrap.css(主要css文件)和bootstrap-responsive.css(响应式Bootstrap样式)的组合css文件。这与使用这两个文件是完全一样的，但它只是节省了一个额外的请求。

文件名的“min”部分意味着它已经被缩小，也就是说已经将所有不必要的空格/注释/ etc都删除了。

结论

bootstrap.min.css = bootstrap.css的压缩版本bootstrap-combined.min.css = bootstrap.min.css bootstrap-responsive.min.css

当我们下载bootstrap时，bootstrap文件中的bootstrap.css和bootstrap-theme.css有什么区别？

bootstrap.css是BootStrap的核心css，用于定义各种控件/组件的所有样式，其中bootstrap-theme.css定义按钮，下拉菜单，导航栏，进度条，面板的主题(渐变/动画)。

大多数时候添加bootstrap.css足以让bootstrap工作，但是对于渐变/动画，你可以使用bootstrap-theme.css。

您可以在http://getbootstrap.com/css/#buttons上看到差异，然后从固定菜单(右侧的固定菜单)中单击预览主题，