Bootstrap标题样式进行了以下显著的优化重置：

1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

标题的具体运用非常简单，和我们平时运用是一样的，使用<h1>~<h6>标签，分别表示标题一至标题六，h 后面的数字越大，表示级别越小，文本也越小。来看一个简单的效果：右侧代码编辑器中的10-16行的代码。

在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。如右侧代码编辑器中   18-23行代码所示：

对比两个示例的效果图，可以说他们的效果是一模一样的。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>标题（一）</title>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<!--Bootstrap中的标题-->

<h1>Bootstrap标题一</h1>

<h2>Bootstrap标题二</h2>

<h3>Bootstrap标题三</h3>

<h4>Bootstrap标题四</h4>

<h5>Bootstrap标题五</h5>

<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->

<div class="h1">Bootstrap标题一</div>

<div class="h2">Bootstrap标题二</div>

<div class="h3">Bootstrap标题三</div>

<div class="h4">Bootstrap标题四</div>

<div class="h5">Bootstrap标题五</div>

<div class="h6">Bootstrap标题六</div>

<!--任务填写下方-->

<h1>我的第一个bootstrap标题</h1>

</body>

</html>

常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式：

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。

h1 small,

.h1 small,

h2 small,

.h2 small,

h3 small,

.h3 small,

h1 .small,

.h1 .small,

h2 .small,

.h2 .small,

h3 .small,

.h3 .small {

  font-size: 65%;

}

h4,

.h4,

h5,

.h5,

h6,

.h6 {

  margin-top: 10px;

  margin-bottom: 10px;

}

h4 small,

.h4 small,

h5 small,

.h5 small,

h6 small,

.h6 small,

h4 .small,

.h4 .small,

h5 .small,

.h5 .small,

h6 .small,

.h6 .small {

  font-size: 75%;

}

来简单看其使用方法与最终效果：如右侧代码编辑器中12-17行代码所示。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>标题（二）</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<!--Bootstrap中使用了<small>标签来制作副标题-->

<h1>Bootstrap标题一<small>我是副标题</small></h1>

<h2>Bootstrap标题二<small>我是副标题</small></h2>

<h3>Bootstrap标题三<small>我是副标题</small></h3>

<h4>Bootstrap标题四<small>我是副标题</small></h4>

<h5>Bootstrap标题五<small>我是副标题</small></h5>

<h6>Bootstrap标题六<small>我是副标题</small></h6>

<!--任务填写处-->

<h1>孤儿院无私奉献30年<small>一曲人性的赞歌</small></h1>

</body>

</html>

Bootstrap（一）标题的更多相关文章

  1. Bootstrap 页面标题(Page Header)

    Bootstrap页面标题(PageHeader)是个不错功能,它会网页的标题的四周添加适当的间距,当一个网页中有多个标题并且每个标题之间需要添加一定适当的间距,使用页面标题是非常有用的.如果需要使用 ...

  2. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

  3. bootstrap 页面标题

    页面标题会突出显示,当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题显得特别有用,页面标题会给不是页面标题之间的元素加上横线 加以区分,以突出标题显示. 页面标题类 显示效果图 代码 ...

  4. Bootstrap的标题

    一.定义标题 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：标题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  7. Bootstrap 排版 笔记

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  8. Bootstrap 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  9. Bootstrap 一. 排版样式（内联文本元素，对齐，大小写，缩略语，地址文本，引用文本，列表排版 ，代码 ）

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...

  10. bootstrap学习之二-组件

    一.bootstrap字体图标 以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...

随机推荐

  1. YUV图像合成原理

    http://blog.csdn.net/zwz1984/article/details/50403150 http://zhongcong386.blog.163.com/blog/static/1 ...

  2. IIS 下 部署nodejs 使用反向代理

    目标服务器:targetServer 配置反向代理的服务器:reveseProxServer iis应该是iis7及以上版本,才可以. 1.确定最终访问的网址:比如www.baidu.com  .ww ...

  3. java中双向链表的增、删、查操作

    import java.util.NoSuchElementException; public class DoublyLinkedListImpl<E> { private Node h ...

  4. 【数据挖掘】分类之Naïve Bayes（转载）

    [数据挖掘]分类之Naïve Bayes 1.算法简介 朴素贝叶斯(Naive Bayes)是监督学习的一种常用算法,易于实现,没有迭代,并有坚实的数学理论(即贝叶斯定理)作为支撑. 本文以拼写检查作 ...

  5. SetTimer时间间隔的问题

    1.用WM_TIMER来设置定时器   SetTimer函数的原型 UINT_PTR SetTimer( HWND hWnd,                      // 窗体句柄 UINT_PT ...

  6. PL/0编译程序

    Pl/0语言文法的BNF表示: 〈程序〉→〈分程序>. 〈分程序〉→ [<常量说明部分>][<变量说明部分>][<过程说明部分>]〈语句〉 <常量说明部 ...

  7. 【Python+selenium Wendriver API】之鼠标悬停事件

    # encoding=utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains import ...

  8. flex hack 记录

    IE从IE10开始. //共通 display: flex; flex-direction: column; align-items: flex-start;justify-content: cent ...

  9. 自定义WPF ListBox的选择样式

    (下图:进行多项选择的ListBox) 首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBr ...

  10. ios 即时通讯 xmpp

    [iPhone高级] 基于XMPP的IOS聊天客户端程序(XMPP服务器架构) http://blog.csdn.NET/kangx6/article/details/7739828 [iPhone高 ...