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. 官方教程Stealth学习笔记（一）

    今天開始要更新官方教程stealth的学习笔记啦, 我将会记录和解说一个小游戏基本的流程和关键地方的技巧. 我会依照官方教程的顺序来更新.                                ...

  2. 最小生成树——Prim（普利姆）算法

    [0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在 理解Prim算法的idea 并用 源代码加以实现: 0.2)最小生成树的基础知识,参见 http://blog. ...

  3. HDU 3397 Sequence operation（区间合并 + 区间更新）

    题目链接:pid=3397">http://acm.hdu.edu.cn/showproblem.php?pid=3397 题意:给定n个数,由0,1构成.共同拥有5种操作. 每一个操 ...

  4. 并发检测主机ip存活脚本

    #!/bin/bash ################### # Check Active Host####### ################### function CheckInput() ...

  5. 谷歌高管无意中透露Google Glass未获得成功的原因

    Google X高管Astro Teller在接受媒体采访时无意中透露了这款设备没有取得预期成绩的原因 最终我们发现,在他们生活的世界里,数字生活和即时物理生活根本无法融为一体. Teller提出的这 ...

  6. python爬虫学习研究

    目标:做一个小爬虫项目 2017年6月4日13:32:17       mooc网教程Python爬虫入门一之综述要学习Python爬虫,我们要学习的共有以下几点:Python基础知识Python中u ...

  7. Codeforces Round #FF (Div. 2) A. DZY Loves Hash

    DZY has a hash table with p buckets, numbered from 0 to p - 1. He wants to insert n numbers, in the ...

  8. IOS连接

    http://www.wuleilei.com/blog/323 不错 http://blog.csdn.net/totogo2010/ http://blog.csdn.net/totogo2010 ...

  9. 1、Codevs 必做：2833、1002、1003、2627、2599

    2833 奇怪的梦境  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description Aiden陷入了一个奇怪的梦境:他被困 ...

  10. Linux安装samba

    说明:samba的作用是实现window环境和linux环境下的文件共享,相当于window里的网络邻居,有一定的价值,但是随着时代的发展,现在用各种ssh软件登录linux实现文件共享和传输的场景越 ...