2016-07-22 15:20:45 xxy0929 阅读数 1692
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4492 人正在学习 去看看 李兴华

问题:        

ASP.NET MVC项目中用到Bootstrap模态框 来实现增删改弹出框功能;但是项目运行后  除第一次  其余都是加载的缓存页面;对于增加、编辑功能中下拉框  要绑定其他数据时  不能实时更新;于是想要增加、编辑的显示页面每次都重新调用方法

解决方法:

可以在Controller对应方法中加以下一段代码  去除缓存 (该方法是实现局部去缓存)

实现:

C#中禁止cache的方法!

Response.Buffer=true;
Response.ExpiresAbsolute=System.DateTime.Now.AddSeconds(-1);
Response.Expires=0;
Response.CacheControl="no-cache";


2018-07-12 10:22:15 qq_36986305 阅读数 131
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4492 人正在学习 去看看 李兴华

最近在看bootstrap,然后要用到一些提示框,但什么都用 alert不仅死板,还没什么用户体验,所以就学了一下能自定义的提示框,如图

在这个模态框里我们可以自己添加任何HTML组件,如文本框、下拉框等;代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
  .modal-footer {
             text-align: center;
             }
  /* 窗体大小 */
  .modal-dialog {
    width: 276px;
    margin: 30px auto;
}
/*显示的区域大小*/
element.style {
    display: block;
height: 282px;
    width: 276px; 
display: block;
margin-left:200px"
}

</style>
<script type="text/javascript">
function text(){
alert(11);
}
</script>


<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
弹出模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel">
是否按姓名分开下载?
</h4>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-primary" >分开下载
</button>
<button type="button" onclick="text()" class="btn btn-primary" data-dismiss="modal">
合并下载
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>

2016-10-23 19:36:34 qq_32188101 阅读数 1354
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4492 人正在学习 去看看 李兴华

Bootstrap----部分组件类名的应用

页头:  page-header

巨幕: jumbotron  ( 展示一个网页关键区域)

缩略图: thumbnail(极小的)  (可以做出九宫格的效果) 
    部分代码:<!-- 尽量不要给img设置属性 可以套一个div -->
                        <div class="thumbnail">
                                <img src="jinmu.jpg" alt="" width="300">
                        </div>

警告-弹框 : alert(提示 通知)
        </div><div class="alert alert-warning">
            禁止访问
            <!-- close 布局 给警告框设置了一个关闭的按钮将警告框关闭 -->
            <button class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>

内嵌 : well

进度条 : progress  

   该例子添加了条纹,动画,堆叠等效果

 <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 60%;"> 60%</div>
        <div class="progress-bar progress-bar-danger" style="width: 30%;">30%</div>
        <div class="progress-bar progress-bar-warning" style="width: 10%;">10%</div>
 </div>

媒体对象 : media

                 media-left     右边有margin   

                 medio-body  媒体展示部分(包括media-heading.....media-bottom)

                 media-right   左边有margin
                 内容在左还是右边 需要自己的代码逻辑

媒体对象列表 : media-list

<div class="media-list">
        <div class="media">
            <div class="media-body">
                <div class="media">
                </div>
            </div>
        </div>
 </div>

列表 : list-group   (列表内部可以是 <li>  , <buttom> , <a>....)

          list-group-item 列表内部的每一项 

          list-group-item-heading  头 和列表有一定距离

面板 : panel    (使用流程如下代码)

        <div class="panel panel-default">
        <!-- 标题 -->
        <div class="panel-heading"></div>
        <div class="panel-body"></div>
        <!-- 脚 -->
        <div class="panel-footer"> </div>
        </div>

模态框 : modal

         过程 : 1.声明模态 modal   类名show显示   类名fade 会有动画  (默认不显示)

                    2.声明窗口 modal-dialog 设置窗口大小

                    3.声明内容 modal-content 分为3部分  分别是 :  头modal-header  主体modal-body  脚modal-footer

                    若不设置类名show,可以在模态框外部自定义一个按钮,在javascript中调用下列函数将两者联系起来

                    $('#btn').on('click',function(){
                          //模态弹出调用modal  参数toggle  show  hidden
                          $('#box').modal();
                     });

         modal的相关事件:
               弹出前  show.bs.modal     例如 :  $('#box').on('show.bs.modal',function () {alert('出现前'); })
               弹出后  shown.bs.modal 指的是有动画 动画执行完

               即将隐藏 hide.bs.modal
               隐藏后   hidden.bs.modal

下拉菜单的滚动监听:

                下拉菜单:

               html中的  data-toggle="dropdown"    <===>   js中的  $('#btn').dropdown();

                内容滑动 <==> nav data-spy="scroll"(滑动)   (设置在内容区)

                                         data-offset="100"(范围)        滑动与之对应的标题会高亮

                                         data.target='#id' <==> href='#id'

                以上代码也可以用javascript 中的代码表示 :   两种代码是等价的
                             $('#content').scrollspy({
                                     offset:100
                             })

导航菜单 :

              放置对应内容的设置div class="tab-content"
              每一个导航项对相应的内容 设置 class="tab-pane"

             在 js 为菜单项添加点击事件实现菜单导航

                     $('#nav a').on('click',function(){
                            $(this).tab('show');
                     })

按钮 : <div class="btn-group" data-toggle="buttons">

          放置单选框/多选框     可以实现类似这样的按钮效果

         

          </div>

按钮按下改变文本内容:

         <button class="btn btn-success" data-loading-text="下载">按钮</button>
         <button class="btn btn-danger">按钮</button>

        <script>
        //.button('loading') 改变文本为data-loading-text的值  若没有值,那么改变文本为loading
        //.button('reset')  回到原来的值
        $('button').on('click',function(){
            var that = $(this).button('loading');
            setTimeout(function(){
                that.button('reset');
            },2000)
        })
        </script>

          效果  :     按下前 :     按下后 :  

弹出框提示 : popover
       银行账号:<input type="text" data-toggle="popover"
                                                data-content="我的妈呀,好多钱啊">
                   <button data-toggle="popover" data-content="你是不是傻">确定</button>
        <script>
              $('input').popover();
              $('button').popover();
       </script>

折叠菜单 : collapse
       1.按钮  data-toggle="collapse" data-target="#content"
       2.内容  class="collapse"

轮播图效果 :

                    包括三个部分 : 圈圈   轮播图  左右箭头

          类名(样式):
                 最外层 carousel
                 圈圈 carousel-indicators     (ul-li)
                 第0个圈 active
                 图片  carousel-inner
                 每个图 item
                 第0个图 active
                 左右箭头 class="carousel-control left/right"
         属性:
                最外层 data-ride='carousel'   自动轮播 默认5000    默认循环    默认鼠标暂停
               每个圈:data-target  哪个轮播图 data-slide-to
               左右箭头 data-slide="prev/next"

        <script>
              //修改carousel 的默认值
              $('#our').carousel({
                     interval : 1000,
                     pause : 'hover',
                     wrap : true
              })    

        </script>   


2019-09-18 15:49:47 qq_35126546 阅读数 39
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4492 人正在学习 去看看 李兴华

方便今后使用,统一封装了一下这个Modal,既然使用了Bootstrap这个UI库,那么就用jQuery喽!

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>用户列表</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script>
    $.fn.extend({
        ViewModal: function (opt) {
            $("#dialog").empty();
            if (!opt.html){
               alert("内容不存在");
                return
            }
            var html = "             <div class=\"modal fade\" id=\"myModal\">\n" +
                "                    <div class=\"modal-dialog\">\n" +
                "                        <div class=\"modal-content\">\n" +
                "                            <div class=\"modal-header\">\n" +
                "                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n" +
                "                                <h4 class=\"modal-title\" id=\"modal-title\">Modal 标题</h4>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-body\">\n" +
                "                                <form class=\"form-horizontal\" id=\"dialogForm\">\n" +
                opt.html+
                "                                </form>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-footer\">\n" +
                "                                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
                "                                <button type=\"button\" class=\"btn btn-primary\" id=\"submit-dialog\">确定</button>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                </div>"
            $("#dialog").append(html);
            if (opt.title) {
                $("#modal-title").text(opt.title);
            }
            $("#myModal").modal({
                backdrop: 'static',
            })
            $("#submit-dialog").on("click",function () {
                $("#myModal").modal("toggle")
            })
        },
        AjaxModal: function (opt,callback) {
            $("#dialog").empty();
            if (!opt.html){
               alert("内容不存在");
                return
            }
            var html = "             <div class=\"modal fade\" id=\"myModal\">\n" +
                "                    <div class=\"modal-dialog\">\n" +
                "                        <div class=\"modal-content\">\n" +
                "                            <div class=\"modal-header\">\n" +
                "                                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n" +
                "                                <h4 class=\"modal-title\" id=\"modal-title\">Modal 标题</h4>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-body\">\n" +
                "                                <form class=\"form-horizontal\" id=\"dialogForm\">\n" +
                opt.html+
                "                                </form>\n" +
                "                            </div>\n" +
                "                            <div class=\"modal-footer\">\n" +
                "                                <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
                "                                <button type=\"button\" class=\"btn btn-primary\" id=\"submit-dialog\">确定</button>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>\n" +
                "                </div>"
            $("#dialog").append(html);
            if (opt.title) {
                $("#modal-title").text(opt.title);
            }
            $("#myModal").modal({
                backdrop: 'static',
            })
            $("#submit-dialog").on("click",function () {
                var data = $("input[name=name]").val()
                // this.data = data;
                callback(data,$("#myModal"));
            })

        }
    })
    $(function () {
        $("body").append('  <div id="dialog"></div>');
        $("#modal1").on("click",function(){
            $(this).ViewModal({
                title : "Test1",
                html : "<div class='col-sm-12'>测试一下试试</div>"
            })
        })
        $("#modal2").on('click',function(){

            $(this).AjaxModal({
                title : '1234',
                html : "<div class='form-group'>"+
                        "<label class='control-label col-sm-2'>名字</label>"+
                        "<input class='form-control col-sm-10' type='text' name='name'>"+
                        "</div>"
            },function (data,selector) {
                console.log(data);
                selector.modal("toggle")
            })
        })
    })
</script>
<body>
<div class="container">
        <div class="btn btn-primary" id="modal1">Modal1</div>
    <div class="btn btn-primary" id="modal2">Modal2</div>
</div>
</body>
</html>


2017-05-19 16:00:12 SURLIYA 阅读数 266
  • Bootstrap开发框架视频教程

    Bootstrap入门培训课程,Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。该视频教程包括Bootstrap开发入门、十二栅格布局、CSS基础样式、表单样式、CSS基础样式、表单样式、扩展组件、导航组件、高级组件等内容。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。

    4492 人正在学习 去看看 李兴华
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 模态框(Modal)插件</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模态框(Modal)标题
				</h4>
			</div>
			<div class="modal-body">
				在这里添加一些文本
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
</html>

bootstrap模态框

阅读数 402

Bootstrap 模态弹窗

阅读数 841

Bootstrap 模态框

阅读数 1

没有更多推荐了,返回首页