什么是Bootstrap页面标题

页面标题用于在页面上的标题周围添加适当的间距，并在标题下添加一条水平线。这对一个网页特别有帮助，因为你可能有几个帖子的标题，需要一个方法来增加每个标题的区别。由于标题始终是浏览者的第一印象。所以，人们会希望他们的网页在页面的顶部有一个好看的标题，而且标题可以很容易地被突出。为此，网页开发人员使用了页眉，它在页面上的标题周围增加了间距，并在标题下增加了一条水平线。

让我们来看看实施的步骤方法。

步骤1：将Bootstrap和jQuery CDN纳入<head>所有其他样式表之前的标签，以加载我们的CSS。

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>

步骤2：添加 <div>标签在HTML主体中的类容器。

第3步：要使用页眉，请将你的标题包在一个 <div>类为.page-header。

<div class = "page-header"> </div>

例子1：在这个例子中，我们将看到如何使用Bootstrap页面标题与下划线标题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
    <style>
      img {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1 style="color: green">Example Page Header</h1>
      </div>
  
      <p>This is a paragraph</p>
  
      <img
        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="Flowers in Chania"
        width="460"
        height="345"/>
      <p>This is another text.</p>
    </div>
  </body>
</html>

输出:

什么是Bootstrap页面标题？

适当的间距和标题下的横线

例子2：在这个例子中，我们将看到有不同大小的标题和没有下划线的页头。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1 style="color: green">
          GeeksForGeeks
           <small> All In One</small>
        </h1>
      </div>
  
      <p>Extensive collection of questions ranging variety of topics</p>
  
      <p>All done by Experts</p>
    </div>
  </body>
</html>