使用Bootstrap的标题类(标题样式h1~h6)

Bootstrap 的标题字体大小通常遵循以下样式规则:

  1. h1 标题的字体大小为 2.5rem(40像素)。
  2. h2 标题的字体大小为 2rem(32像素)。
  3. h3 标题的字体大小为 1.75rem(28像素)。
  4. h4 标题的字体大小为 1.5rem(24像素)。
  5. h5 标题的字体大小为 1.25rem(20像素)。
  6. h6 标题的字体大小为 1rem(16像素)。

这些样式可以根据项目的需要进行自定义。请注意,这些字体大小是Bootstrap默认样式的一部分,您可以根据自己的项目需求进行调整或覆盖这些样式。

关于单位rem的介绍,请参见链接:https://blog.csdn.net/wenhao_ir/article/details/132695607

示例代码如下:

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用标题类title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<body class="container">
    <p class="h1">一级标题样式p>
    <p class="h2">二级标题样式p>
    <p class="h3">三级标题样式p>
    <p class="h4">四级标题样式p>
    <p class="h5">五级标题样式p>
    <p class="h6">六级标题样式p>
body>
html>

运行效果如下图所示:
使用Bootstrap的标题类(标题样式h1~h6)_第1张图片
使用Bootstrap的标题类(标题样式h1~h6)_第2张图片

你可能感兴趣的:(Bootstrap,bootstrap,前端,html)