Bootstra5 按钮处理

1 基本按钮

1.1 form表单外的按钮

form表单只是一个容器，多个数据项构成一个表单，之所以把他们组成一个表单，是因为这样便于提交。
所以，不用于提交的表单可以单独写出来

<button>这是一个普通按钮</button>

1.2 按钮的基本样式

上面的按钮非常丑陋，因此在引入bootstrap3后可以直接使用btn类。

<button class="btn">这是一个基础样式按钮</button>

1.3 其他的元素转化为按钮

input元素，a元素都可以通过添加btn类实现与按钮一样的效果。

<a class="btn btn-primary">a标签按钮</a>
<input class="btn btn-primary" value="input按钮">

2.修饰按钮的类

2.1 按钮大小

最大的按钮btn-lg类
较小的按钮btn-sm类
很小的按钮btn-xs类
像block元素一样独占一行的按钮 btn-block类

<button class="btn btn-primary">正常大小</button>
<button class="btn btn-primary btn-lg">偏大</button>
<button class="btn btn-primary btn-sm">偏小</button>
<button class="btn btn-primary btn-xs" >很小</button>
<button class="btn btn-primary btn-block">block按钮</button>

2.2 按钮颜色

用btn-颜色 表示按钮的各种颜色样式

button class="btn btn-primary">primary</button>
<button class="btn btn-secondary">secondary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-info">info</button>
<button class="btn btn-light">light</button>
<button class="btn btn-dark">dark</button>
<button class="btn btn-link">link</button>

2.3 按钮的状态

添加active属性表示按钮被点击，添加diabled属性表示不能被点击

<button class="btn btn-primary">正常</button>
<button class="btn btn-primary" disabled>disabled</button>
<button class="btn btn-primary" active>active</button>

3.按钮组

待补充