Bootstrap不同级别标题

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

通过比较可以发现,Bootstrap标题样式进行了以下显著的优化重置:

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

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

在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。

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

<!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>

</body> < /html>

Bootstrap标题一

Bootstrap标题二

Bootstrap标题三

Bootstrap标题四

Bootstrap标题五
Bootstrap标题六

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

<!--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>

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-09

Bootstrap不同级别标题的相关文章

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quo

bootstrap笔记之——全局,标题,正文文本,强调,文本对齐

一.全局样式 Bootstrap框架做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下: 移除body的margin声明 设置body的背景色为白色 为排版设置了基本的字体.字号和行高 设置全局链接颜色,且当链接处于悬浮":hover"状态时才会显示下划线样式 二.标题 1.重新设置了margin-top和margin-bottom的值,  h

Bootstrap(一)标题

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>~&

Bootstrap &lt;基础二十三&gt;页面标题(Page Header)

页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page Header),请把你的标题放置在带有 class .page-header的 <div> 中: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 页面标题</title> <

bootstrap教程(一)———bootstrap标题(一)

本文为H5EDU机构官方的HTML5培训教程 bootstrap教程(一). 我们首先要下载bootstrap的框架文件,放到我们的项目目录当中.然后将bootstrap框架当中的bootstrap.css文件引入到项目当中.之后我们可以看,在bootstrap当中的标题与我们没用使用框架的文件是有不同之处的.最明显的是文字变细. <link rel="stylesheet" href="boostrap.css"> <!--bootstrap中的

Bootstrap

第一章:认识Bootstrap Bootstrap的特点:灵活.优雅.可扩展. Bootstrap的定义:简单灵活的用于搭建Web页面的HTML.CSS.JavaScript工具集. Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用. Bootstrap不支持IE8. 第二章:排版 一.全局样式: Bootstrap不再一味的清零,而是注重重置可能产生的样式,保留和坚持部分浏览器的基础样式. 二.标题: Bootstrap定义标题也使用<h1>到

Boostrap入门+样式学习--贰--(慕课网大漠《玩转bootstrap》[基础])

1. 标题样式 除了有标签 h1~h6 之外,bootstrap还提供了对应的六个类名:.h1~.h6 重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px:h4~h6重置后的值都是10px. 所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体. 固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 2.副标题 small标签

bootstrap排版

1.基本的html模板 <link href="css/bootstrap.min.css" rel="stylesheet"> <!--你自己的样式文件 --> <link href="css/your-style.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.mi

Bootstrap(基础)学习笔记1

Bootstrap到底是什么? 欢迎来到Bootstrap课堂,加入高端大气上档次的web前端开发团队.上一小节Bootstrap做了简单的介绍,下面我们再来了解一下Bootstrap的前世今缘,在右侧是用Bootstrap预设的组件样式,包括按钮.表格.标签.导航等,感兴趣的小伙伴可以先睹为快,后面的章节我们会对这些组件做详细讲解. 2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootSt