按鈕樣式

每一個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="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">刪除</button>

總結

以上是生活随笔為你收集整理的Bootstrap按钮使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。