ㄧ.按鈕樣式

<div class="conponent" id="demo">
 <input type="button" value="0.input" class="btn btn-secondary">
 <a href="#" class="btn btn-primary">1.a</a>
 <button class="btn btn-danger">2.button</button>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.btn的樣式蠻多種的.btn-primary .btn-secondary .btn-succes .btn-dange .btn-warning .btn-info .btn-light .btn-dark .btn-link

二.外寬按鈕

<div class="conponent" id="demo">
  <button class="btn btn-outline-danger">外寬按鈕</button>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.這樣是為外寬按鈕的樣式，在中間加入out-line即可

三.大小按鈕

<div class="conponent" id="demo">
 <button class="btn btn-outline-danger btn-sm">sm按鈕</button>
 <button class="btn btn-outline-danger btn-lg">lg按鈕</button><br><br>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.btn-sm為小按鈕，.btn-lg為大按鈕

四.創建塊級別的按鈕

<div class="conponent" id="demo">
 <button class="btn btn-outline-danger btn-sm btn-block">sm-創建塊級別的按鈕</button>
 <button class="btn btn-outline-danger btn-lg btn-block">lg-創建塊級別的按鈕</button><br>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.加入.btn-block按鈕會很寬，屬於創建的按鈕

五.禁用按鈕

<div class="conponent" id="demo">
  <button type="button" class="btn btn-outline-danger" disabled>禁用按鈕</button>
</div>

.component.demo{
 padding: 50px;
}

重點：
1.在button的屬性加入disabled，禁止使用按鈕

codepen
參考：bootstrap4