12.Bootstrap(中文教程)元件：按钮

ㄧ.按钮样式

<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