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六个类名。如右侧代码编辑器中   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>
时间: 09-29

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

Bootstrap 布局组件

Bootstrap 布局组件 1.Bootstrap字体图标 (1).字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2).用法 如需使用图标,只需要简单地使用下面的代码即可.请在图标和文本之间保留适当的空间.没有glyphicon的css. <span class="glyphicon glyphicon-search"></span> (3).定制字体图标 我们已经看到如

Bootstrap(2) 排版样式

1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 10px):颜色被设置为#333. <p>Bootstrap 框架</p> <!-- 创建包含段落突出的文本 --> <p class="lead">Bootstrap 框架</p> <!-- 添加标记,<mark>

Bootstrap 排版 笔记

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &l

atitit。html&#160;css框架Bootstrap&#160;&#160;Foundation的比较与不同&#160;attilax大总结

atitit.html css框架Bootstrap  Foundation的比较与不同 attilax大总结 1. Bootstrap  Foundation的比较与不同1 2. Bootstrap 教程2 2.1. Bootstrap 简介2 2.2. Bootstrap CSS2 2.3. Bootstrap 布局组件2 2.4. Bootstrap 插件3 2.5. Bootstrap 其他3 3. Bootstrap 的attilax总结3 4. 参考3 1. Bootstrap  F

bootstrap 教程分享

Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具 Bootstrap 字体图标 Bootstrap 下拉菜单 Bootstrap 按钮组 Bootstrap 按钮下拉菜单 Bootst

bootstrap的下拉菜单

本文章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.将下拉菜单触发器和下拉菜单都包裹在 放在class.dropdown 里,或者另一个声明了 position: relative; 的元素. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me

Bootstrap 排版

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &

Bootstrap&lt;基础三&gt; 排版

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素. 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &