4 Bootstrap4組件——按鈕和按鈕組

1 按鈕

使用Bootstrap的自定義按鈕樣式，並廣泛用於表單、對話框等場景中的操作，並支持多種大小、狀態等一系列變量定義。

1.1 按鈕的樣式

Bootstrap包括多個預定義的按鈕樣式，每個樣式都有自己的語義目的，另外還有一些額外的功能可以用於更多的控制。

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

1.2 按鈕標籤

.btn 可以在<button>元素上使用，您也可以在 <a> 或 <input> 元素上使用這個類，同樣能帶來按鈕效果（在少數瀏覽器下會有不同的渲染變異）。

<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">

1.3 輪廓按鈕

使用.btn 和.btn-outline-*可以實再按鈕的輪廓效果。

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

1.4 按鈕的尺寸

使用.btn-lg 、 .btn-sm 可以實現按鈕尺寸大小的定義，分別是大規格按鈕、小規格按鈕。

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

使用.btn-block將按鈕進行block區塊設置。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

1.5 按鈕的狀態

使用.active啓用（背景較深、邊框較暗、帶內陰影）按鈕（默認），使用.disabled禁用按鈕，特別注意<a>標籤的禁用。

1、啓用
爲按鈕增加.active樣式，幷包括aria-pressed=“true” 屬性，則狀態顯示爲啓用狀態。

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

2、禁用
直接將disabled布爾屬性添加到任何元素（直接嵌套在html標籤中，使按鈕看起來處於非活動的禁用狀態（點擊不會有響應和彈性）。

<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" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

1.6 切換按鈕

添加 data-toggle=“button” 屬性，可以切換按鈕的 active 狀態，如果你預先需要切換按鈕，必須將.active 樣式 、 aria-pressed="true"屬性到 標籤中。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

2 按鈕組

使用按鈕組合，可以把一系列按鈕編組在一行裏，並通過可選的JavaScript插件(方法)賦予按鈕單選、複選等強化行爲。

2.1 基本示例

將一系列的 .btn 包裹在.btn-group內，並使用我們提供的插件，可以實現選擇按鈕、選取塊狀區的行爲功能。。

<div class="btn-group" role="group" aria-label="Basic example">
	<button type="button" class="btn btn-primary">左</button>
	<button type="button" class="btn btn-primary">中</button>
	<button type="button" class="btn btn-primary">右</button>
</div>

爲了輔助技術（如屏幕閱讀器）正確傳達一系列按鈕的分組， role 需要定義適當的屬性，對於按鈕組，引用的樣式應該是 role=“group”, 如果是工具欄則應是 role=“toolbar”。
此外，組和工具欄應該給予明確的標籤，因爲儘管存在正確的角色屬性，大多數輔助設備並不能明確識別它們， 上面實例我們使用了 aria-label來定義，你也可以使用aria-labelledby 方法定義。

2.2 複選框組

<div class="btn-group" data-toggle="buttons">
	<label for="" class="btn btn-secondary active">
		<input type="checkbox" checked="" >HTML
	</label>
	<label for="" class="btn btn-secondary">
		<input type="checkbox" >CSS
	</label>
	<label for="" class="btn btn-secondary">
		<input type="checkbox" >JavaScript
	</label>
</div>

data-toggle="buttons"：切換選中與未選中效果
.active：選中效果
添加.btn-group-toggle類，實現更美觀的多選框組

<div class="btn-group btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="checkbox" checked >HTML
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" >CSS
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" >JavaScript
	</label>
</div>

2.3 單選框組

<div class="btn-group" data-toggle="buttons">
	<label for="" class="btn btn-secondary active">
		<input type="radio" name="options" >HTML
	</label>
	<label for="" class="btn btn-secondary">
		<input type="radio"  name="options" >CSS
	</label>
	<label for="" class="btn btn-secondary">
		<input type="radio" name="options"  >JavaScript
	</label>
</div>

添加.btn-group-toggle類，實現更美觀的單選框組

<div class="btn-group btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="radio" name="options" checked >HTML
	</label>
	<label for="" class="btn btn-secondary">
		<input type="radio"  name="options" >CSS
	</label>
	<label for="" class="btn btn-secondary">
		<input type="radio" name="options"  >JavaScript
	</label>
</div>

2.4 按鈕工具欄

根據需要使用樣式定義，對按鈕進行羣組、間隔等定義，將按鈕組的組合組合成爲更復雜組件的按鈕工具欄。

代碼：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

2.5 實現大|小尺寸按鈕組

定義大小縮放，不需要將按鈕中每個子元素都逐一定義，只需增加.btn-group-*，就能作用於組下的每個子按鈕，實現樣式縮放。其中*表示lg或sm。

<div class="btn-group btn-group-lg" role="group" >
	<button type="button" class="btn btn-primary">左</button>
	<button type="button" class="btn btn-primary">中</button>
	<button type="button" class="btn btn-primary">右</button>
</div>
<div class="btn-group" role="group" >
	<button type="button" class="btn btn-primary">左</button>
	<button type="button" class="btn btn-primary">中</button>
	<button type="button" class="btn btn-primary">右</button>
</div>
<div class="btn-group btn-group-sm" role="group" >
	<button type="button" class="btn btn-primary">左</button>
	<button type="button" class="btn btn-primary">中</button>
	<button type="button" class="btn btn-primary">右</button>
</div>

2.6 垂直排列

使用.btn-group-vertical將一組按鈕垂直排列，而不是水平排列。

<div class="btn-group-vertical" role="group" >
	<button type="button" class="btn btn-primary">上</button>
	<button type="button" class="btn btn-primary">中</button>
	<button type="button" class="btn btn-primary">下</button>
</div>