boot个人小结一些有趣的样式

想要保留单个按钮原本的功能的同时添加下拉菜单时可以写成如下格式

<div class="btn-group">
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-default dropdown-toggle"
            data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">功能</a></li>
        <li><a href="#">功能</a></li>
    </ul>
</div>

这样，我们既可以保存按钮原有的功能，也能添加下拉菜单，不足的是不能够和其他的按钮放在一起，那样会显得按钮排列非常乱

在表单中，bootstrap也提供了一部分样式，我们可以给输入框添加一些计量单位或者后缀，例如：

 <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
</form>

在input-group中添加span并给它添加input-group-addon类名可以让它紧挨着输入框显示。如果你要添加的是按钮或者按钮组，使用input-group-btn