按钮组用法与工具栏

按钮组用法与工具栏

---

基本用法

1.新建一个web项目ch11，将ch10里面的东西复制进来，再打开ch11中的demo01.html，将之前写的内容删除。

2.设置按钮组

<hr/>

（这个按钮组将最前面的按钮的左上和左下设成圆角，将最后面的按钮的右上和右下设成圆角。）

<div class="btn-group">

<button type="button" class="btn btn-default">按钮组</button>

<button type="button" class="btn btn-default">按钮组</button>

<button type="button" class="btn btn-default">按钮组</button>

</div>

3.运行效果

4.我们还可以使用<a>标签

<hr/>

<div class="btn-group">

 <a href="#" class="btn btn-default">按钮组</a>

 <a href="#" class="btn btn-default">按钮组</a>

 <a href="#"  class="btn btn-default">按钮组</a>

</div>

5.运行效果和<button>标签是一致的

---

按钮工具栏 

1.按钮工具栏

//按钮工具栏我们把它放到一个<div>容器里面，设定一个“btn-toolbar”（就 是按钮的工具栏

<div class="btn-toolbar">

//然后这里面我们可以给多个按钮组，

 <div class="btn-group">

 <button type="button" class="btn btn-default">按钮组</button>

 <button type="button" class="btn btn-default">按钮组</button>

    <button type="button" class="btn btn-default">按钮组</button>

  </div>

//多个按钮组之间有一定的间距

   <div class="btn-group">

   <button type="button" class="btn btn-default">按钮组</button>

 <button type="button" class="btn btn-default">按钮组</button>

 <button type="button" class="btn btn-default">按钮组</button>

   </div>

//这就是按钮组工具栏的用法

   <div class="btn-group">

 <button type="button" class="btn btn-default">按钮组</button>

 <button type="button" class="btn btn-default">按钮组</button>

 <button type="button" class="btn btn-default">按钮组</button>

   </div>

2.运行效果