ibox (bootstrap)

效果图如下：

---

<div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>圆形图标按钮</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="buttons.html#">选项1</a>
                                    </li>
                                    <li><a href="buttons.html#">选项2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <p>
                                要使用圆形图标按钮，可以通过添加class为<code>.btn-circle</code>实现
                            </p>

                            <h3 class="font-bold">圆形按钮</h3>
                            <br/>
                            <button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
                            </button>
                            <button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
                            </button>
                            <button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
                            </button>
                            <button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
                            </button>
                            <button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
                            </button>
                            <button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
                            </button>
                            <button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
                            </button>
                            <br/>
                            <br/>
                            <button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
                            </button>
                            <button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
                            </button>
                            <button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
                            </button>
                            <button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
                            </button>
                            <button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
                            </button>
                            <button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
                            </button>
                            <button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
                            </button>

                        </div>
                    </div>

---

---

FR：海涛高软（QQ技术交流群：386476712）