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. 复习mybatis框架（一）----映射文件

    参考博主的文章,尊重原创:https://blog.csdn.net/qq_35246620/article/details/54837618 一.给出映射文件 Mapper.xml 的总结: ① 设 ...

  2. 基于 ZooKeeper 搭建 Hadoop 高可用集群

    一.高可用简介 二.集群规划 三.前置条件 四.集群配置 五.启动集群 六.查看集群 七.集群的二次启动 一.高可用简介 Hadoop 高可用 (High Availability) 分为 HDFS ...

  3. YUV格式学习汇总

    本文为个人学习使用,部分内容摘自他人. 参考: https://www.cnblogs.com/ALittleDust/p/5935983.html http://www.cnblogs.com/az ...

  4. 在jfinal的Controller中接受json数据

    JFinal中接收URL中的参数或者model中的参数是很方便的,但是对于web2.0的网站来说,经常会以json方式提交比较复杂的数据,比如一个查询,包含了各种过滤条件和排序分页,前端脚本可能提交的 ...

  5. 高度平衡树 -- AVL 树

    Scheme 的表达, 优雅. #lang scheme ( define nil '() ) ( define ( root tree )( car tree ) ) ( define ( left ...

  6. grep -rl tttt /data/ 命令在 /data 目录下面搜寻包含tttt字符的命令

    grep --help -R, -r, --recursive equivalent to --directories=recurse -l, --files-with-matches print o ...

  7. justify-content 定义子元素在父元素水平位置排列的顺序

    justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值)  左对齐 2.flex-end 右 ...

  8. ftp put get 的使用方法

    首先:ftp user@ip 登录到远程主机 成功后,输入ls,如下: ftp> ls 可以得到远程主机的本地目录. 一:get命令(从远程主机下载文件到本机): ftp> get (re ...

  9. Binding中使用RelativeSource

    问题:当前View有一个DataGrid,其DataGridTemplateColum设置了一个ComboBox. 其对应的VM是local:ViewMode,含有ModelValue和myLIst属 ...

  10. 查看硬盘负载情况：iostat命令

    Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.同 ...