第一步：找到 Bootstrap 官网

🔍 搜索

在搜索引擎中搜索：bootstrap

搜索 bootstrap

官方网站

https://getbootstrap.com/

官网

官方例子

点击 Examples

https://getbootstrap.com/docs/4.4/examples/

点击 Album

https://getbootstrap.com/docs/4.4/examples/album/

Album 页面

第二步：拷贝网页源码

页面空白处点击右键，选择“查看网页源代码”：

页面空白处点击右键，选择“查看网页源代码”

view-source:https://getbootstrap.com/docs/4.4/examples/album/

复制源码

全选，复制到粘贴板。

使用 VS Code 打开文件夹

打开文件夹

选择代码存放的目录

选择 lessions 目录。

新建文件

点击“新建文件”图标 新建文件：lession_01.html

粘贴

将剪贴板中复制的代码粘贴到新建的 lession_01.html 文件中：

粘贴剪贴板中的网页源码 粘贴完是酱子滴

第三步：修改 .css 及 .js 文件链接

替换 .css 链接

找到第 15 行

替换为：

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

替换完是酱子滴

替换 .js 链接

找到 256 行

替换为：

<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

替换完是酱子滴

查看成果

空白处右键，然后选择“Open with Live Server”：

选择“Open with Live Server” 我们的第一个 Bootstrap 网页就完成了！ 阿峰游戏编程