引入Bootstrap的CSS样式后,＜h＞标签、＜p＞标签等HTML自带的标签被覆写没有？答：覆写了。

昊虹AI笔记

已于 2023-09-09 21:52:24 修改

阅读量470

点赞数

分类专栏： Bootstrap 文章标签： css html bootstrap

于 2023-09-07 13:56:29 首次发布

本文链接：https://blog.csdn.net/wenhao_ir/article/details/132723295

版权

Bootstrap 专栏收录该内容

50 篇文章 3 订阅

订阅专栏

引入Bootstrap的CSS样式后,标签、

标签等HTML自带的标签被覆写没有？答：覆写了。

为什么这么说？证据呢？
写一个实例，然后调试模式看一下不就得了。

先看没有引入引入Bootstrap的CSS样式情况。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用标题类</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
</head>
<body>
	<h1>这是一个未引入bootstrap的CSS样式的h1标题</h1>
</body>
</html>

我们用浏览器打开上面的代码，然后F12进入调试模式，发现h1的样式如下：
在这里插入图片描述
可见，这个h1使用的是客户端的样式。

再看引入了Bootstrap的CSS样式的情况。

代码如下：

<!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">
	<h1>这是一个引入了Bootstrap的CSS样式的h1标题</h1>
</body>
</html>