集成引导程序和 Typeplate答案

【问题标题】：Integrating bootstrap & Typeplate集成引导程序和 Typeplate
【发布时间】：2013-06-30 23:28:49
【问题描述】：

我想使用 Twitter bootstrap 作为前端框架和 Typeplate 进行排版。

可以从以下网址下载相应的框架并免费使用。

http://twitter.github.com/bootstrap/ http://typeplate.com/

在两个框架中都定义了少数 HTML 元素的 CSS 类（例如，HTML、body、h1）

我在 Typeplate 网站上运行了 Firebug，看到了字体系列和字体大小等计算字段的值... 即使我在我的网站中为 css 使用相同的值（即使在删除引导 css 之后），我也无法获得 typeplate 的排版。

我在 twitter bootstrap 之后使用 typeplate。

请指教。

基本上我想在下面的代码中合并应用于文本“快乐王子”的属性

<html class="no-js wf-ffmetaserifwebpro-i7-active wf-ffmetaserifwebpro-i5-active wf-ffmetaserifwebpro-n5-active wf-ffmetaserifwebpro-n7-active wf-active">
<head><style>
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary
{
    display: block;
}
html
{
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
}
body
{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
h1
{
    font-size: 2em;
    margin-top: 0.67em;
    margin-right: 0px;
    margin-bottom: 0.67em;
    margin-left: 0px;
}
html
{
    line-height: 1.65;
    font-family: serif;
    font-size: 112.5%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size-adjust: none;
    font-stretch: normal;
}
body
{
    color: #444444;
    word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6
{
    line-height: 1;
    margin-top: 0px;
}
h1, .alpha
{
    font-size: 3.33rem;
    margin-bottom: 0.49rem;
}
h1, h2, h3, h4, h5, h6
{
    color: #222222;
}
body
{
    margin-top: 6em;
    margin-right: auto;
    margin-bottom: 6em;
    margin-left: auto;
    max-width: 34em;
    background-image: url("../img/subtle_grunge.png");
    background-attachment: scroll;
    background-repeat: repeat;
    background-position-x: left;
    background-position-y: top;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    background-color: transparent;
}
.wf-active body, .wf-inactive body
{
    font-family: "ff-meta-serif-web-pro",serif;
    font-weight: 400;
    visibility: visible;
}

</style></head>
<body><section><article><header>

<h1>
 The Happy Prince
</h1>

</header></article></section></body></html>

【问题讨论】：

你是否在 after bootstrap 之后使用 typeplate？你能在 JSFiddle 或类似的地方举个例子吗？

标签： html css twitter-bootstrap

【解决方案1】：

如果我是你，我会尝试使用自定义构建的引导框架，排除 'Normalize and reset'、'Body type and links' 和 '标题、正文等'。

【讨论】：

我是 Typeplate 的主要开发者。我同意上面 Evgeniy 的回答。使用自定义构建的 Bootstrap 并避免使用它们的排版默认值可能会更好。如果您需要进一步的帮助，请随时在我们的回购问题跟踪器上打开一个问题，我会来救援 :) github.com/typeplate/typeplate.github.io/issues