1 h1~h6标题的具体运用非常简单，和我们平时运用是一样的，使用<h1>~<h6>标签，分别表示标题一至标题六，h 后面的数字越大，表示级别越小，文本也越小
在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名
<!doctype html>
<html>
<meta charset = "utf-8">
<title>标题一</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/dist/css/bootstrap.min.css"">
<body>
<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>
2 副标题
在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题
<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
<!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>
<h3>孤儿院无私奉献30年 <small>一曲人性的赞歌</small></h1>
</body>
</html>
cfj
- 浏览: 116097 次
- 性别:
- 来自: 天津
-
最新评论
相关推荐
2. **排版**：Bootstrap提供了各种预定义的文本样式，如`<h1>`到`<h6>`的标题、段落、引用、强调文本等，简化了HTML文档的编写。同时，它还提供了对链接、代码、列表、缩进等元素的样式控制。 3. **导航**：...
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： <!--Bootstrap中的标题--> ...
Bootstrap 提供了从 `<h1>` 到 `<h6>` 的全套标题标签，以及对应的 `.h1` 至 `.h6` 类，用于为行内元素添加标题样式。例如： ```html <h1 class="page-header">标题</h1> <!-- h1 到 h6 标签示例 --> ``` 标题内...
10. **排版**：Bootstrap提供了诸如`.h1`到`.h6`的标题类，`.lead`段落类，以及`.text-center`，`.text-right`和`.text-left`等文本对齐类，帮助调整排版。 在使用Bootstrap3中文离线手册时，开发者可以查阅`.chm`...
3. **排版工具**：Bootstrap提供了一系列排版工具，如`<h1>`至`<h6>`的标题、段落（`.lead`）、文本对齐（`.text-left`、`.text-center`、`.text-right`）和强调文本（`.text-muted`、`.text-primary`等）。...
Bootstrap定义了多种标题样式，从h1到h6，并允许开发者通过添加类名给非标题标签赋予标题的样式，这样做可以使开发者在不影响语义的情况下，灵活控制页面结构。此外，还支持在标题标签中使用“small”类来创建副标题...
Bootstrap 还对 h1-h6 进行了 css 的样式重构，可以使用 class=".h1-.h6" 来实现相同的功能。 在文本排版方面，Bootstrap 提供了多种样式，可以对文本进行加粗、倾斜、删除线、下划线等效果。Bootstrap 还提供了...
5. **排版（Typography）**：Bootstrap 3 提供了一系列的文本样式和排版工具，如h1到h6的标题、段落、强调文本、引用等。 6. **图标（Glyphicons）**：Bootstrap 3 包含一套基本的图标集，可以方便地插入到网页中，...
在Bootstrap中，标题（heading）分为六个级别，从`h1`到`h6`，每个级别有不同的字体大小和权重，以便于创建文档或页面的层级结构。以下是各个级别的描述： 1. `h1` - 最大的标题，通常用于页面或部分的主要标题。在...
Bootstrap还增加了额外的CSS类.h1到.h6，使得非标题元素也能应用这些标题样式，这样可以方便地在页面上保持视觉一致性。此外，Bootstrap还允许在标题中嵌套标签来创建副标题，副标题通常用较小的字体和灰色显示，以...
2. **排版**：Bootstrap提供了一套易于使用的文本样式和段落格式化选项，如`h1`到`h6`的标题级别，以及`.lead`类用于突出主要文本。 3. **按钮**：预定义了多种尺寸（如`.btn-lg`，`.btn-sm`）和样式（如`.btn-...
10. **SEO优化**：一个优秀的模板还应该考虑搜索引擎优化（SEO），例如合理使用`<h1>`到`<h6>`标签、`<meta>`标签以及结构化数据标记，帮助搜索引擎更好地理解页面内容。 在实际应用中，开发者需要根据具体需求对...
排版类用来控制网页中的文本样式，包括不同级别的标题（h1到h6）、加粗文本、斜体文本以及引文等。 9. **列表和代码样式** 在Bootstrap中，列表和代码的样式也有相应的类来美化这些元素。例如，有序列表和无序列表...
Bootstrap标题（Heading）遵循HTML标准，使用`<h1>`到`<h6>`标签来定义不同的标题级别。然而，与普通HTML页面不同的是，Bootstrap覆盖了这些标签的默认样式，确保在所有浏览器下显示的一致性。具体来说，Bootstrap...
9. **基础样式**：Bootstrap 对于常见的HTML元素如标题（`<h1>`到`<h6>`）、段落、强调文本、列表、代码块、表格等都有预设的样式，提供了统一的视觉风格。 10. **自定义和扩展**：Bootstrap 可以通过修改LESS源码...
2. **排版**：Bootstrap提供了一系列的排版工具，如`<h1>`到`<h6>`的标题，`<p>`段落，以及`<small>`、`<strong>`、`<em>`等文本样式。还有预格式化的代码块、引用、列表等，帮助开发者美化页面内容。 3. **表单**...
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样， Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由...
- **重写样式：** Bootstrap重新定义了从`<h1>`到`<h6>`的标题元素的默认样式，使其更加一致和美观。 - **示例代码：** ```html <h1 class="h1">Bootstrap基础入门</h1> <h2 class="h2">Bootstrap基础入门 ...
- **标题**：从`<h1>`到`<h6>`，所有标题标签都有默认样式。 - **副标题**：使用`<small>`标签来创建较小的文本。 - **强调文本**：通过`.lead`类让文本更加突出，通常用于页面介绍段落。 - **文本颜色**：使用如`....