bootstrap实用组合

本文为自己在实际项目中使用过的一些小例子，大部分都是基于Bootstrap，刚开始写，但是会持续更新，转载请标明出处。

按钮

开始/暂停/结束

    <button type="button" class="btn btn-success">
        <span class="glyphicon glyphicon-play"></span> 开始
    </button>
    <button type="button" class="btn btn-warning" >
        <span class="glyphicon glyphicon-pause"></span> 暂停
    </button>
    <button type="button" class="btn btn-danger">
        <span class="glyphicon glyphicon-trash"></span> 删除
    </button>
    <button type="button" class="btn btn-danger">
        <span class="glyphicon glyphicon-stop"></span> 结束
    </button>

字体图标按钮

    <a class="btn btn-link" href="javascript:void(0)" onclick="return del(col.id)" style="color: rgb(212, 106, 64);">
                        <span class="glyphicon glyphicon-trash"></span>
                    </a>

等待/加载状态

很多时候网站处理数据或者加载什么东西需要时间，而此时又不能进行其他操作，这时需要显示一个等待层，让网站休息一下，这时用户不能对网站进行操作
效果如图下

中间转动的为动图，背景为透明，没有找到效果更好的透明动图了

HTML代码

<div id="modal-loading" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; background: #000; z-index: 9999;display:none;"></div>
        <div id="modal-loading-gif" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 1; z-index: 10000; top: 150px;display:none ">
            <div style="z-index: 10001; background: #fff; width: 200px; height: 200px; margin-right: auto; margin-left: auto; padding: 0px;background-color:rgba(0,0,0,0.01);">
                <img src="~/Image/timg.gif" />
                <div style="color:white;margin-left:20px;margin-top:10px">Loading...</div>
            </div>
        </div>

我把图片放在image文件夹下了，，这里需要更改

js代码

需要引用jquary

function ShowWaitFrm() {
    ///$("#modal-loading").modal({ dimmer: false });
    $("#modal-loading")[0].style.display = "inline";
    $("#modal-loading-gif")[0].style.display = "inline";
}

/// <summary>关闭等待窗口</summary>
function CloseWaitFrm() {
    $("#modal-loading")[0].style.display = "none";
    $("#modal-loading-gif")[0].style.display = "none";
}

图片资源

网上找到几个看起来差不多的图片，凑放上来了，最后把图片换为第三，效果更好
下载链接http://pan.baidu.com/s/1dEFLjC9