第一步：找到 Bootstrap 官网
🔍 搜索
在搜索引擎中搜索：bootstrap
搜索 bootstrap
官方网站
官网
官方例子
点击 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 网页就完成了！
阿峰游戏编程
网友评论