iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0

什麼是Bootstrap?

簡單來說,Bootstrap是一個前端框架,功用是方便網頁開發者快速設計,其檔案內容為CSS檔(主要)、JavaScript檔。
以下介紹其優缺點:

  • 優點
    • 初學者容易上手
    • 響應式設計(RWD) 、提高開發效率
  • 缺點
    • 檔案占的容量大
    • 設計風格相似、缺乏創意

嵌入Bootstrap方式

在網頁上嵌入Bootstrap有兩種方式,CSS檔寫在<head>標籤內,JS檔寫在<body>標籤內。

  • 相對路徑
    使用下載檔案
  1. 嵌入bootstrap CSS檔
    <link rel="stylesheet" href="css/bootstrap.min.css">
  2. 嵌入bootstrap JS檔
    <script src="js/bootstrap.min.js"></script>
  3. 嵌入JQuery JS檔
    <script src="js/jquery.js"></script>
  • 絕對路徑
    使用CDN (Content Delivery Network),也就是透過多個終端伺服器作為節點,讓使用者可以請求較近的伺服器來獲取網站內容與連結。
  1. 嵌入bootstrap CSS檔
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="styleshee t">
  2. 嵌入bootstrap JS檔
    <script src="https://cdn.jsdeliver.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  3. 嵌入JQuery JS檔
    <script src="http://code.jquery.com/jquery.js"></script>

上一篇
Day24 CSS多欄位排版&動畫效果
下一篇
Day 26 Boostrap 表格&導覽列
系列文
新手踏入網頁前端的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言