F2E合作社|按鈕元件|Bootstrap 5網頁框架開發入門


Posted by itiswonderfall on 2021-11-24

前言

有一天小華死了變成孤魂野鬼,祂跟閻羅王說:「 我死得好冤望啊,可不可以讓我繼續留在陽間報仇? 」而閻羅王調了一下資料,發現祂這生做了很多善事後非常猶豫,不知道該把祂繼續留在陰間還帶到陽間,所以祂給了現在在看文章的你一台機器並說道:「 小華的命運由你掌控,上面有三個按鈕,按陰、按陽,就是不要⋯⋯按陰陽。 」

圖片來源

 


 

官方網站的 Buttons 頁面

 

基本按鈕

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

 


 

禁止文字換行

可以在按鈕加入 .text-nowrap 來禁止按鈕文字換行。

<button type="button" class="btn text-nowrap">欲繼續執行 請點擊此按鈕</button>

 


 

按鈕標籤

.btn 被設計成需要與 <button> 元素一起使用。但是您也可以在 <a><input> 元素上使用這些 Class ( 儘管有些瀏覽器可能會使用稍微不同的渲染 )。

當在用於觸發頁面內功能( 例如折疊內容 ),而不是連結到新頁面或當前頁面中某一部分的 <a> 元素上使用按鈕 class 時,這些連結應該被賦予 role="button" 以適當地傳達它們的目的到螢幕閱讀器等網頁親合性技術。

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

 


 

Outline 按鈕樣式

.btn-outline-* 替換預設修飾用的 Class ,以移除任何按鈕上的所有背景色及背景圖。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

 


 

尺寸

.btn-lg 來套用大尺寸。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

 

.btn-sm 來套用小尺寸。

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

 


 

禁用狀態

透過將 disabled 添加到任何 <button> 元素中,使按鈕看起來處於禁用狀態。被禁用的按鈕具有 pointer-events: none ,以防止觸發滑入以及啟用狀態。

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

 

使用 <a> 元素的禁用其行為與其他按鈕略有不同

<a> 不支援 disabled 屬性,所以你必須添加 .disabled 使它在視覺上看起來被禁用,加入一些友善的樣式,以禁用游標上的所有 pointer-events ,禁用按鈕應包含 aria-disabled="true" 屬性來向輔助性技術指示元素的狀態。

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

 


 

切換狀態

加入 data-bs-toggle="button" 來切換按鈕的 active 狀態,如果想要預先切換按鈕狀態,則必須手動添加 .active 以及 aria-pressed="true" 以確保狀態有正確的傳達至輔助性技術。

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>

 

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

 


 

參考資料

  1. Buttons · Bootstrap v5.0
  2. 按鈕組件-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  3. 按鈕 (Buttons) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #button







Related Posts

[FE302] React 基礎 - hooks 版本:state

[FE302] React 基礎 - hooks 版本:state

跨領域自學程式設計常見問題解析 FAQ

跨領域自學程式設計常見問題解析 FAQ

Day 86

Day 86


Comments