第一步:找到 Bootstrap 官網(wǎng)
?? 搜索
在搜索引擎中搜索:bootstrap
搜索 bootstrap
官方網(wǎng)站
官網(wǎng)
官方例子
點擊 Examples
https://getbootstrap.com/docs/4.4/examples/
點擊 Album
https://getbootstrap.com/docs/4.4/examples/album/
Album 頁面
第二步:拷貝網(wǎng)頁源碼
頁面空白處點擊右鍵榆芦,選擇“查看網(wǎng)頁源代碼”:
頁面空白處點擊右鍵茫因,選擇“查看網(wǎng)頁源代碼”
view-source:https://getbootstrap.com/docs/4.4/examples/album/
復(fù)制源碼
全選癞埠,復(fù)制到粘貼板芽世。
使用 VS Code 打開文件夾
打開文件夾
選擇代碼存放的目錄
選擇 lessions 目錄黔酥。
新建文件
點擊“新建文件”圖標
新建文件:lession_01.html
粘貼
將剪貼板中復(fù)制的代碼粘貼到新建的 lession_01.html 文件中:
粘貼剪貼板中的網(wǎng)頁源碼
粘貼完是醬子滴
第三步:修改 .css 及 .js 文件鏈接
替換 .css 鏈接
找到第 15 行
替換為:
<link 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 網(wǎng)頁就完成了!
阿峰游戲編程