Bootstrap按钮使用

按钮样式

每一个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>