Bootstrap提供的CDN服務標籤與下載文件

[oJbK]發表於2022-02-16

1.引入Bootstrap提供的CDN服務

直接引入Bootstrap提供的CDN服務(基於網路直接請求載入)
CDN的概念:內容分發網路(加快伺服器響應速度,別人可以快速訪問到網站的資源)
CDN有免費的也有收費的

前端免費框架CDN網站:https://www.bootcdn.cn/twitter-bootstrap/3.4.1/

1.選擇下載Bootstrap CDN

選擇下載Bootstrap CDN,將Bootstrap標籤複製到Pycharm的HTML文件,在新增到自定義文件。

image

CSS標籤:
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

js標籤:
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

Bootstrap官網下載地址:https://www.bootcss.com/

二:下載Bootstrap官方文件

1.進入Bootstrap官網,選擇3版本中文件。

image

2.選擇Bootstrap中生產環境下載檔案。

image

3.下載完壓縮後,開啟Bootstrap檔案

image

4.Bootstrap檔案 CSS檔案與JS檔案內未壓縮等檔案刪除,只留壓縮的一個檔案,防止在匯入Bootstrap檔案時發生資料錯亂。fonts檔案不需要動,裡面是字型檔案。

image

5.將Bootstrap檔案直接移動到Pycharm當前文件內。

image

6.外部Bootstrap引入CDN標籤,與Bootstrap官網檔案。

image

7.注意(下載Bootstrap檔案與複製標籤)

Bootstrap檔案也需要下載,如果不下載Bootstrap的檔案,直接引用Bootstrap的的標籤,那麼在PyCharm敲Bootstrap程式碼的時候,會不提示Bootstrap相關程式碼語法

所以先下載Bootstrap檔案,在複製Bootstrap標籤到HTML文件,新增到PyCharm文件。

image

8.注意

bootstrap的js程式碼是依賴於jQuery的,也就意味著你在使用Bootstrap動態效果的時候,一定要匯入jQuery

相關文章