Bootstrap5 基本元件介紹

今天我們要學的是Bootstrap5基本元件介紹，在開始介紹元件之前，我們先來介紹一下在Html檔中需要引入那些函式庫&宣告哪些功能~

在撰寫Html檔時我們需要注意的有三個地方：
1.區段
加入meta tags與bootstrap css函式參考。

<meta charset=”utf-8”>
<meta  name=”viewport” content=”width=device-width, initial-scale=1”>
//描述網頁資料的元標籤

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
//參考bootstrap的css函式庫

2.區段

<h1>Hello, world!</h1>
//用來宣告Bootstrap的布局、元件及樣式

3.末兩行
加入Popper與Bootstrap的函式庫參考

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

補充📄
1.user-scaleable
若不想讓使用者縮放行動裝置大小，可加上user-scaleable=no，即可禁用縮放功能。
2.Popper.js
是一個專門用來管理「彈出元素」位置的 JavaScript 庫，通常用來處理像工具提示 (tooltips)、彈出框 (popovers)、下拉選單 (dropdowns) 等浮動元素的定位問題。這些元素通常會相對於其觸發元素（如按鈕、輸入框等）顯示。

然後接下來就要進入我們介紹元件的正題了~
接下來要介紹的元件有以下幾種：

1.Card卡片
2.Button按鈕
3.Accordion手風琴
4.Font Awesome圖示字型
5.Carousel
6.Input group輸入群組
7.Badge徽章標誌
8.Modal對話視窗
9.Navbar導覽列
10.Dropdown下拉式選單
11.List group
12.Pagination分頁

1.Card卡片
Card是卡片是元件，用來取代之前的Panel、Thumbnail與well元件。
可容納的型態豐富，包含：Body、Title、Text、Link、Image、List Groups等。

2.Button按鈕
Button元件是一群CSS樣式定義，套用該樣式後會變成Bootstrap風格的按鈕元件。

3.Accordion手風琴
外觀類似手風琴，常用於Q&A說明或者是分類說明。

4.Font Awesome圖示字型
早期多直接用圖檔繪製，現在多流行圖示字型，方便快速引用。

5.Carousel
是幻燈片輪播元件，可像旋轉木馬一樣轉來轉去循環顯示所要的內容，故得名Carousel。

6.Input group輸入群組
是指在input的前後加上圖標or文字型成一個群組，以增加辨識性及語意。

7.Badge徽章標誌
用來附加文字或數字到HTML控制項中。

8.Modal對話視窗
是頁面中彈出的對話視窗，通常按下Button觸發，用來輸入資料或確認用，通常跳出後背景頁會變為灰色。

9.Navbar導覽列
網頁頂端作為導覽用途的一條Bar，通常放分頁的項次與目錄之超連結。
(導覽列也支援RWD)

10.Dropdown下拉式選單
就是點下按鈕後會跳出相應的下拉項目供使用者選擇。

11.List group
用來條列資訊的元件，且每個項目允許複雜結構的自訂。

12.Pagination分頁
用來呈現分頁碼的超連結元件，就是閱讀電子書或者是網頁搜尋要翻頁時最底下的那個。

那麼以上就是今天的分享啦~
明天見啦~See YA(｡•̀ᴗ-)