按鈕樣式

每一個class，對應一種按鈕顏色

程式碼

<!-- 標準的按鈕 -->
<button type="button" class="btn btn-default">預設按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動作 -->
<button type="button" class="btn btn-success"
 
>成功按鈕</button>
<!-- 資訊警告訊息的上下文按鈕 -->
<button type="button" class="btn btn-info">資訊按鈕</button>
<!-- 表示應謹慎採取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button
 
>
<!-- 並不強調是一個按鈕，看起來像一個連結，但同時保持按鈕的行為 -->
<button type="button" class="btn btn-link">連結按鈕</button>

按鈕大小

每一個class，對應一種按鈕的大小

程式碼

<p>
   <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button>
   <button type="button" class="btn btn-default btn-lg"
 
>大的按鈕</button>
</p>
<p>
   <button type="button" class="btn btn-primary"> 預設大小的原始按鈕</button>
   <button type="button" class="btn btn-default"> 預設大小的按鈕</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button>
   <button type="button" class="btn btn-default btn-sm">小的按鈕</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕</button>
   <button type="button" class="btn btn-default btn-xs">特別小的按鈕</button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">塊級的原始按鈕</button>
   <button type="button" class="btn btn-default btn-lg btn-block">塊級的按鈕</button>
</p>

頁面使用

按鈕大小、顏色結合使用
同一個頁面，統一大小，不同顏色

<a class="btn btn-sm btn-success" href="emp" th:href="@{/emp}">員工新增</a><<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">編輯</a>
<button th:attr="[email protected]{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">刪除</button>