bootstrap实用组合

来源：互联网发布：plc编程入门ppt 编辑：程序博客网时间：2024/06/07 17:16

本文为自己在实际项目中使用过的一些小例子，大部分都是基于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

0 0