在開始說明前，可以先參考關於Bootstrap 5的文件，可以參考這裡
另外可參考六角學院翻譯的中文版本
由於中文版本是翻譯的版本，可能會有些微的版本落差或尚未翻譯的文件。

昨天已經說明CSS兩種按鈕製作的過程，學習如何自己製作按鈕，今天要說的是如何透過Bootstrap 5製作網頁的按鈕。

Bootstrap 5的按鈕

基本款按鈕

之前在學習卡片製作的時候，已經有在Bootstrap 5的框架下套用單一按鈕，官網HTML的範例參考如下：

<button type="button" class="btn btn-primary">Primary</button>

外框上色按鈕

將class換成 outline會有不一樣的樣式，可參考以下官網的語法：

<button type="button" class="btn btn-outline-primary">Primary</button>

當然裡面還會有一些更改外觀的功能，像是把按鈕變大、製作無法點選的按鈕、按鈕排版等功能，一樣可以參考官方文件： https://getbootstrap.com/docs/5.2/components/buttons/

超連結按鈕

另外在製作卡片時發現只要有連結的格式，套用class也能產生按鈕，可使用嘗試使用以下語法：

<a href="按鈕的連結" class="btn btn-primary">更多資訊</a>

參考範例之前卡片的範例：https://codepen.io/hamagawa76/pen/oNqVmqd

群組按鈕

Bootstrap 5的架構中，有內建群組按鈕的功能。套用之後，會產生出一套相連的按鈕，可參考以下HTML語法：

<div class="btn-group"> 
  <a href="#" class="btn btn-primary active" aria-current="page">AAA</a>
  <a href="#" class="btn btn-outline-primary">BBB</a>
  <a href="#" class="btn btn-primary">CCC</a>
  <a href="#" class="btn btn-success">Green</a>
  <a href="#" class="btn btn-warning">Yellow</a>
</div>

少了btn-group該群組按鈕會變成不相連，但仍然會被外層div包住；另外群組按鈕可以套用不同顏色與樣式，只要將class內的樣式套用到別的語法即可更換樣式。當然#的部分就是輸入連結，可放入按鈕被點選時會前往的位置。

範例參考

這次又發現無腦套用按鈕的方法了，但由於在特定框架下，要達到客製化的難度較高，有時候你可能只是要換個想要的顏色、排版或是調整其他細節，就會花上一堆時間，自製按鈕說不定還比較省事。可以依照需求選擇要使用框架的按鈕或是自製按鈕。以下範例包含前述在Bootstrap 5的範例，以及自製按鈕的部分，請參考：https://codepen.io/hamagawa76/pen/LYdvOLM

是不是很簡單！明天會進行一個美美的CSS範例分析，我們明天見囉！