iT邦幫忙

0

CodePen 簡單導入 CDN

codepen cdn codepen cdn載入
阿沁 2023-09-02 10:34:32 ‧ 762 瀏覽

  • 分享至 

  • xImage
    •  

在講CDN之前，先跟初使用CodePen的朋朋們告知一下，CodePen的 html欄位是不需要再加入 像是, , 標籤。因為這個欄位意義上來說就是html 裡面的 body，不然就很像你在 裡面又寫一個。

正文: CodePen設定介紹與導入CDN

CodePen裡面的工具欄位的[seting]，或是寫code欄位旁邊會有齒輪圖案的icon，都可以點進去
如圖:
https://ithelp.ithome.com.tw/upload/images/20230902/20135414aoAENaoTjH.png

點進去後，在Html頁面下面那一欄可以貼放在head的東西，例如googlefont連結，你自己的css等。
https://ithelp.ithome.com.tw/upload/images/20230902/201354143z4UgDkL3h.png

如果點進css 或是javascript那一頁，滑到下面，有用來貼上網址的區域，舉bootstrap cdn 為例，我在那兩頁貼上css cdn 與 javascript cdn
css cdn
https://ithelp.ithome.com.tw/upload/images/20230902/2013541493tz2UPQ4M.png

javascript cdn
https://ithelp.ithome.com.tw/upload/images/20230902/2013541457bsxI9EbR.png

好了之後在bootstrap官方文件找元件貼上測試，有顯示樣式代表成功
https://ithelp.ithome.com.tw/upload/images/20230902/20135414hLxpIiPzaa.png

範例

以上希望能幫到你


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙