django学习入门系列之第三点《BootSrap初了解》

铁匠匠匠2024-07-05 11:24

文章目录

初识BootStrap
往期回顾

初识BootStrap

BootSrap是什么？

是别人帮我们已写好的CSS样式，我们如果想要使用这个BootSrap：

下载BootStrap
使用
- 在页面上引入BootStrap
- 编写HTML时，按照BootStrap的规定来编写 + 自定制

官网：

https://www.bootcss.com/

v3：

https://v3.bootcss.com/

在html文件中需要添加的：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发版本  -->
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <!-- 生产版本（压缩版）   -->
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">

</head>
<body>

</body>
</html>

css 复制代码

 <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">


<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">

文件结构

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】