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. 搭建SSH框架整合Struts2和Spring时，使用@Autowired注解无法自动注入

    © 版权声明:本文为博主原创文章,转载请注明出处 1.问题描述: 搭建SSH框架,在进行Struts2和Spring整合时,使用Spring的@Autowired自动注入失败,运行报错java.lan ...

  2. atitit.基于bat cli的插件管理系统.doc

    atitit.基于bat cli的插件管理系统.doc /AtiPlatf/src_atibrow/com/attilax/cmd/CmdX.java pathx.isWebPathMode=true ...

  3. kafka 配置kerberos校验以及开启acl实践

    转载请注明原创地址:http://www.cnblogs.com/dongxiao-yang/p/7131626.html kafka从0.9版本以后引入了集群安全机制,由于最近需要新搭建一套kafk ...

  4. java.io.IOException: Illegal partition for 67 (-1)

    今天写MapReduce的分区进行排序的功能,自己写了一个Partitioner,然后用的时候就错了 public static class MyPartition extends Partition ...

  5. nginx大量TIME_WAIT的解决办法 netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'

    vi /etc/sysctl.conf net.ipv4.tcp_syncookies = 1 net.ipv4.tcp_tw_reuse=1 #让TIME_WAIT状态可以重用,这样即使TIME_W ...

  6. Mysql：1235 - This version of MySQL doesn't yet support 'LIMIT & IN/ALL/ANY/SOME subquery'错误解决

    select distinct b.sale_count from product_sale b where b.pro_id in (select a.pro_id from product a L ...

  7. 嵌入式开发之手机arm汇总---科普手机arm

    http://www.leiphone.com/news/201406/1102-zzl-arm.html

  8. YUM安装（卸载）KDE和GNOME

    YUM安装(卸载)KDE和GNOME显示系统已经安装的组件,和可以安装的组件:#yum grouplist 如果系统安装之初采用最小化安装,没有安装xwindow,那么先安装:#yum groupin ...

  9. 关于移动端border 1像素在不同分辨率下边显示粗细不一样的处理

    最近开发发现一个很有趣的问题  就是我如果给一个元素加上一个像素的 border 在不同的分辨率的情况下显示的不同 在高清屏幕(尤其是ios 喽 不鄙视国产) 据说在6plus下会变成3px  这个我 ...

  10. Web存储使用详解（本地存储、会话存储）

    Web存储使用详解(本地存储.会话存储)1,Web存储介绍HTML5的Web存储功能是让网页在用户计算机上保存一些信息.Web存储又分为两种:(1)本地存储,对应 localStorage 对象.用于 ...