---
title: BootStrap 介紹
tags: 網頁組
---

# BootStrap 介紹 - 前言

在介紹完了 jQuery 之後，我們要來介紹的是 CSS 的函式庫，沒錯，不只 JavaScript 有函式庫，CSS 也有便捷的函式庫可以使用，那為什麼我們不在前面介紹呢？因為在有了一些基本知識之後，再來接觸 BootStrap 會比較好上手，所以沒有在前面一口氣介紹。

# 本節目標

- 學習使用 BootStrap

# 如何使用

其實使用方法也跟 jQuery 沒什麼差別，同樣都可以下載下來，也可以透過 CDN 的方式引入。

:::info
官網位置：[BootStrap](https://getbootstrap.com/docs/5.1/getting-started/introduction/)
:::


一樣複製到我們的 html 內即可使用

# BootStrap 初探
那 BootStrap 幫我們做到了什麼呢，我們可以前往 BootStrap 的官方文件中的 [Components 頁面](https://getbootstrap.com/docs/5.1/components/)

可以看到左邊有很多項目，有許多 BootStrap 替我們設定以及寫好的東西。
:::spoiler
<summary class="example">查看範例（點選展開）</summary>

:::

## 示範

我這邊找到了 Content 內的 Table

只要根據範例的指示，複製貼上程式碼後，再把內容改為自己的東西，就可以輕鬆快速的完成比較好看的版面，假如覺得有些地方不好看，也能夠透過自己寫 CSS 的方式進行微調。

:::success
- 線上位置：https://jsfiddle.net/Blajja0916/2a7x4pj5/2/
:::

:::danger
假如沒有成功的話，請確認已經有正確引入 BootStrap
:::
> tips：一樣可以透過開發者工具確認

假如還想要看到更多 BootStrap 範例的話可以參考以下網址
:::info
[StartBootstrap](https://startbootstrap.com/templates)
:::

# 練習

大家也可以試著把之前的課表改成 BootStrap 的樣式，記得假如有自己寫 CSS 也要獨立成另外一個檔案引入

:::warning
遇到什麼問題都能夠直接詢問學長姊，千萬不要害羞❕❕❕
:::

---

## 參考資料
:::info
[StartBootstrap](https://startbootstrap.com/templates)
:::

---

這學期最基本的東西就到這邊，[下一篇](/xHdrYfybR6e3llJnCW5i3w)會是期末的需要完成的題目，也是我們的一次檢核，希望大家都能夠順利完成。