13.Bootstrap(中文教程)元件：按钮群组

ㄧ.按钮群组

<div id="demo" class="component"> <div class="btn-group">  <button class="btn btn-secondary">1</button>  <button class="btn btn-secondary">2</button>  <button class="btn btn-secondary">3</button> </div></div> .component.demo{ padding: 50px;}

重点：
1.现在出现的为按钮群组，只要里面包多个.btn在父元素加入btn-group

二.按钮群组尺寸

<div id="demo" class="component">    <div class="btn-group btn-group-sm">      <button class="btn btn-secondary">1</button>      <button class="btn btn-secondary">2</button>      <button class="btn btn-secondary">3</button>    </div></div> .component.demo{ padding: 50px;}

重点：
1.包装上可以用尺寸的类，让按钮变小变大也是一样的尺寸模式.btn-group-sm .btn-group-lg

三.按钮群组尺寸

<div id="demo" class="component">    <div class="btn-group-vertical btn-group-sm">      <button class="btn btn-secondary">1</button>      <button class="btn btn-secondary">2</button>      <button class="btn btn-secondary">3</button>    </div></div>.component.demo{ padding: 50px;}

重点：
1.如果要垂直显示要将原本的btn-group改成btn-group-vertical

codepen
参考：bootstrap4