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>

    效果:

     

  • 相关阅读:
    小米手机导出微信聊天记录
    IBM X3650 M4 微码升级(BIOS升级)
    leetcode1987 不同的好子序列数目
    leetcode1932 合并多棵二叉搜索树
    leetcode146 LRU 缓存机制
    leetcode456 132 模式
    leetcode316 去除重复字母
    GIT放弃本地所有修改,强制拉取更新
    vendor/easywechat-composer/easywechat-composer/src:
    微信公众号推广饿了么赏金红包制作
  • 原文地址:https://www.cnblogs.com/keiling/p/3638418.html
Copyright © 2011-2022 走看看