bootstrap typography

http://twitter.github.com/bootstrap/base-css.html#typography

国内:

http://ninghao.net/bootstrap/components.html

 

1.

Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

 

缺省font-size:14px line-height 20px  bootom-margin:10px

 

 

2.Make a paragraph stand out by adding .lead.

<p class="lead">...</p>

 

3.Emphasis 强调

三个tag:<small> <strong>(以粗体显示)<em>(以斜体显示)

 

4.Emphasis classes 文字的颜色区分

如:muted(柔和)、text-warning、text-error、text-info、text-success

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

 

5.Abbreviations缩写

<abbr title="attribute">attr</abbr> 鼠标移到attr处会显示attribute的解释

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 小字体显示,initialism是词首字母缩略词的意思

 

6.blockquote引用

 

7.form

7.1 from-search圆角显示输入框

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>

 

 

  

 

7.2Inline form 不换行显示多个控件

 

7.3Horizontal form(labe右对齐,控件左对齐)

 

Add .form-horizontal to the form Wrap labels and controls in .control-group Add .control-label to the label Wrap any associated controls in .controls for proper alignment

 

  

 例子:http://twitter.github.com/bootstrap/base-css.html#forms

 

 

 7.4前或后加文字lable+input或在一行

<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>

 
 

 

<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>

 

 

 

 

 

 

 

 

你可能感兴趣的:(bootstrap)