# 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> ```