---
# System prepended metadata

title: Bootstrap 簡介

---

# Bootstrap 簡介

## Bootstrap 是什麼

Bootstrap是一款前端網頁框架，為了深入了解Bootstrap的意義與作用，我們需要對以下名詞作了解：

* 網頁框架：

    * 網頁框架的概念類似於我們製作簡報時使用的「模板」，是一套由他人所撰寫好的文件。
    * 大多時候，我們不必知道網頁框架是如何被設計出來，只要知道如何使用，就能夠輕鬆設計出不錯看的頁面。
    * 網頁框架的存在大幅提高網頁設計效率。
    * 常見網頁框架如Bootstrap、Angular、React...。

* 前端：

    * 前端泛指在網頁中，我們可以看到的所有東西。
    * 目前學過的HTML、CSS及之後要學的Javascript都屬於前端的範疇。

透過以上兩個名詞，我們對Bootstrap應該有了較深的了解；接下來我們將開始學習Bootstrap這個方便與強大的工具，加快我們的設計效率及提升網頁效果。

## 如何使用 Bootstrap

### Bootstrap 官網

![](https://hackmd.io/_uploads/ryuGPlmV2.png)

- [Bootstrap 官網](https://getbootstrap.com/)

1. 進入官網後，點選左上角的「DOCS」

![](https://hackmd.io/_uploads/rJFNg-mVh.png)

2. 往下滑動後，可以找到如下的html檔案

```xml!
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  </body>
</html>
```

3. 觀察過後，我們可以發現這份檔案中有兩個標籤較為特別

```xml!
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
```

```xml!
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
```

4. 只要將這兩個標籤複製下來，適當貼到我們自己的HTML檔案中，就可以將Bootstrap引入我們的檔案中

* 貼至head標籤裡面
```xml!
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
```

* 貼至body標籤裡面
```xml!
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
```

5. 寫一組<button>，測試看看是否有效果
    
```xml!
<button></button>
```