# [1] 快速學會 Bootstrap 基礎入門 ### 0. 說明 這一篇文章將介紹 Bootstrap 的基礎語法使用，最後介紹如何製作一個簡單的版型。 本篇文章是一個步驟指導，建議可以搭配影片一起學習： %[https://youtu.be/MRk7nlWjkEw] ### 1. 準備 1. 開啟 Visual Studio Code 2. 新建一個資料夾 3. 新建一個檔案，選取 html 格式 初始化： ```html Document ``` 到官網複製 css 與 js 網址 https://getbootstrap.com/docs/5.1/getting-started/introduction/ 加入 css 與 js 的網址： ```html Document ``` ### 2. 範例 這邊要介紹如何製作這種版型 ![截圖 2022-07-08 上午11.04.19.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657249465507/qiTV_sYq4.png align="left") header 區塊： ```html ``` 重要的標籤說明： - navbar-expand-lg：螢幕轉換成小尺寸時，會出現下拉按鈕 - bg-dark：背景顏色為深色 - navbar-dark：轉換成深色模式 - p-3：padding 3 介紹區塊： ```html

Bootstrap 教學課程

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

``` 重要的標籤說明： - text-center：文字置中 - border-bottom：下底線 - lead：文字 - ms-auto：靠右 - m-4：margin 4 卡片區塊： ```html

My Product1

dasdsadasd

``` 重要的標籤說明： - shadow-lg：陰影 - Card：https://getbootstrap.com/docs/5.1/components/card/ footer 區塊： ```html ``` 重要的標籤說明： - border-top：上底線 - d-flex：左右排版 - align-items-center：文字垂直置中 - justify-content-between：版型 - https://getbootstrap.com/docs/4.4/utilities/flex/#justify-content