zoukankan      html  css  js  c++  java
  • 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>

    效果:

     

  • 相关阅读:
    Java集合框架知多少——干货!!!
    Java基础小记
    初识Java
    HTML5入门必知
    密码技术小结
    [MDK]Keil在下载程序一直提示更新J-Link
    Python 循环
    2021年7月14日
    bzoj 2653 middle (主席树+二分)
    bzoj 3932 [CQOI2015]任务查询系统 (主席树)
  • 原文地址:https://www.cnblogs.com/keiling/p/3638418.html
Copyright © 2011-2022 走看看