2013-03-04 51 views
3

我想使用Twitter引導程序作爲前端框架和用於排版的銘牌。集成引導程序和銘牌

相應的框架可以從下面的網址下載並免費使用。

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

的幾個HTML元素的CSS類是在兩個框架(如HTML,身體,H1)定義

我跑螢火上Typeplate現場,看到計算領域的價值爲字體家族和字體大小等... 即使當我在我的網站中使用相同的值的CSS(即使刪除引導CSS後),我無法得到銘牌的排版。

我在twitter引導後使用了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> 

+0

是你在** bootstrap之後使用typeplate **嗎?你可以在JSFiddle或類似的例子嗎? – Pigueiras 2013-03-04 07:43:09

回答

0

如果我是你,我會嘗試使用自定義生成引導框架,排除「規範和復位」,「體型和鏈接」和「標題,正文等」。

+1

我是Typeplate的主要開發人員。我同意上面的Evgeniy的回答。可能更適合使用Bootstrap的自定義版本,並避免使用它們的版式默認設置。如果您需要進一步的幫助,請隨時在我們的回購問題追蹤器上打開一個問題,我會來拯救:) https://github.com/typeplate/typeplate.github.io/issues – 2013-06-30 15:28:49