#人丑多学习#之Bootstrap header

最新推荐文章于 2023-08-15 09:28:25 发布

MinnieDai

最新推荐文章于 2023-08-15 09:28:25 发布

阅读量415

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/qq_29279803/article/details/106588050

版权

Bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

选用软件：webstrom
不要问为什么，其实就是为了跟B站视频用一个软件好对应学习，可以选择其他的。

下载：https://getbootstrap.com/docs/4.5/getting-started/download/
1. Compiled CSS and JS
2. Examples
因为是只基于Bootstrap的框架进行修改，所以暂时下载以上2个文件。
Compiled CSS and JS，框架基础，必要不可少
Examples，提供多种参考样式，如：登陆，导航栏等等，既可以免费套用又可以当学习材料

Webstrom建立一个新HTML5的页面给的标准样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

引入Bootstrap框架修改，Header 头部，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1 shrink-to-fit=no">
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <script src="lib/js/jquery.slim.min.js"></script>
    <script src="lib/js/bootstrap.bundle.js"></script>
    <title>Dashboard</title>
</head>

释义：

viewport响应式

width=device-width表示宽度是设备屏幕的宽度

initial-scale=1表示初始的缩放比例

shrink-to-fit=no 自动适应手机屏幕的宽度

link rel 外部样式，href=文件路径

script src 引入js代码，因为bootstrap是基于jquery的，所以先写jquery再引入bootstrap.bundle

<title>Dashboard</title>

title 自定义，网页标题

注意：

1. bootstrap.css 和 bootstrap.min.css 可以等同，按有些资料说法， bootstrap.min.css 经过压缩， bootstrap.css没有。

同理，在下载的框架文件中*.min.css 都是压缩过文件