bootstrap typography-优快云博客

本文链接：https://blog.youkuaiyun.com/ksark/article/details/84357898

本文深入解析Bootstrap中关于全局默认字体大小、行高、段落样式、突出显示、强调文字颜色、缩写、引用、表单样式等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

国内：

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

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.

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或在一行