BootStrap2学习日记13----关于按钮

普通按钮

代码：

    <div style="margin-bottom:15px">

        <a href="#" class="">a标签</a>

    </div>

    <div style="margin-bottom:15px">

        <button class="">button标签</button>

    </div>

    <div style="margin-bottom:15px">

        <input type="button" class="" value="input标签"/>

    </div>

此时class属性为空效果:

给每个标签的Class加上“btn”后效果如下:

BootStrap按钮的其他样式：

显示小图标:

    <div style="margin-bottom:15px">

        <a href="#" class="btn"><i class="icon-align-left"></i> a标签</a>

    </div>

    <div style="margin-bottom:15px">

        <button class="btn"><i class="icon-arrow-left"></i>button标签</button>

    </div>

    <div style="margin-bottom:15px">

        <input type="button" class="btn" value="input标签"/>

    </div>

按钮的群组

代码1:

    <div class="btn-group">

        <button class="btn">首页</button>

        <button class="btn">上一页</button>

        <button class="btn">下一页</button>

        <button class="btn">尾页</button>

    </div>

 

只需在按钮外部添加一个class=“btn-group”的div标签即可

代码2:

    <div class="btn-toolbar">

    <div class="btn-group">

        <button class="btn">首页</button>

        <button class="btn">上一页</button>

        <button class="btn">下一页</button>

        <button class="btn">尾页</button>

    </div>

        <div class="btn-group">

        <button class="btn">首页</button>

        <button class="btn">上一页</button>

        <button class="btn">下一页</button>

        <button class="btn">尾页</button>

    </div>

    </div>

 

在两组按钮群外部添加一个class=“btn-toolbar”的div标签

 

带下拉菜单的按钮

 代码：

        <div class="btn-group">

            <a class="btn dropdown-toggle" data-toggle="dropdown" >字体<span class="caret"></span></a>

            <ul class="dropdown-menu dropup">

                <li><a href="#">黑体</a></li>

                <li><a href="#">宋体</a></li>

                <li><a href="#">百度综艺</a></li>

            </ul>

        </div>

 

效果: