Bootstrap 警示框


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"><!--设置字符集utf-8编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->
    <title>ChapterSevenAlert--第七章警示框</title>
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <!--警示框-->
        <!--在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,
        比如说告诉用户操作成功、操作错误、提示或者警告等.
        在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框-->
        <div class="h4 text-center">---------------------------------警示框--默认警示框--------------------------</div>
        <!--警示框--默认警示框-->
        <!--Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下,提供了四种不同的警示框效果:
        1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;
        2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;
        3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;
        4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。-->
        <!--使用方法:
        具体使用的时候,可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框,只需要
        在“alert”基础上追加对应的类名-->
        <!--实现原理:
        其中“alert”样式的源码主要是设置了警示框的背景色、边框、圆角和文字颜色。另外对其内部
        几个元素h4、p、ul和“.alert-link”做了样式上的特殊处理-->
        <div class="h4">默认警示框</div>
        <div class="alert alert-success ">class="alert alert-success "成功警示框</div>
        <!--alert-success呈现的是背景、边框、文本都是绿色-->
        <div class="alert alert-info">class="alert alert-info"信息警示框</div>
        <!--alert-info呈现的是背景、边框和文本都是浅蓝色-->
        <div class="alert alert-warning">class="alert alert-warning"警告警示框</div>
        <!--alert-warning具体呈现的是背景边框文本都是浅黄色-->
        <div class="alert alert-danger">class="alert alert-danger"错误警示框</div> 
        <!--alert-danger具体呈现的是背景、边框、文本都是浅红色-->
        <div class="h4 text-center">---------------------------------警示框--可关闭的警示框--------------------------</div>
        <!--警示框--可关闭的警示框-->
        <!--大家在平时浏览网页的时候,会发现一些警示框带有关闭按钮,用户一点击关闭按钮
            就能自动关闭显示的警示框(也就是让警示框隐藏不显示)。
            在Bootstrap框架中的警示框也具有这样的功能-->
        <!--使用方法:
        只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤:
          1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
          2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。
          3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要
          借助于Javascript来检测该属性,从而控制警示框的关闭)。-->
        <!--原理分析:
        在样式上,需要在基本警示框“alert”的基础上添加“alert-dismissable”样式,这样就可以实现
        带关闭功能的警示框-->
        <div class="h4">可关闭的警示框</div>
        <div class="alert alert-success alert-dismissable">
            <button class="close" type="button" data-dismiss="alert">&times;</button>
            class="alert alert-success alert-dismissable"可关闭的成功警示框
        </div>
        <div class="alert alert-info alert-dismissable">
            <button class="close" type="button" data-dismiss="alert">&times;</button>
            class="alert alert-info alert-dismissable"可关闭的信息警示框
        </div>
        <div class="alert alert-warning alert-dismissable">
            <button class="close" type="button" data-dismiss="alert">&times;</button>
            class="alert alert-warning alert-dismissable"可关闭的警告警示框
        </div>
        <div class="alert alert-danger alert-dismissable">
            <button class="close" type="button" data-dismiss="alert">&times;</button>
            class="alert alert-danger alert-dismissable"可关闭的错误警示框
        </div>
        <div class="h4 text-center">---------------------------------警示框--警示框的链接--------------------------</div>
        <!--警示框--警示框的链接-->
        <!--有时候你可能想在警示框中加入链接地址,用来告诉用户跳到某一个地方或新的页面。而这个时候你
        又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。
        为不同类型的警示框内的链接进行了加粗处理,并且颜色相应加深-->
        <!--Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”
        样式给链接提供高亮显示-->
        <div class="h4">链接警示提示框</div>
        <div class="alert alert-success alert-link"><a href="##">class="alert alert-success alert-link"链接成功警示框</a></div>
        <!--alert-link给链接提供高亮显示-->
        <div class="alert alert-info alert-link"><a href="##">class="alert alert-info alert-link"链接信息警示框</a></div>
        <div class="alert alert-warning alert-link"><a href="##">class="alert alert-warning alert-link"链接警告警示框</a></div>
        <div class="alert alert-danger alert-link"><a href="##">class="alert alert-danger alert-link"链接危险警示框</a></div>

        <div class="h4 text-center">---------------------------------警示框--可关闭的链接警示框--------------------------</div>
        <!--警示框--可关闭的链接警示框-->
        <div class="h4">可关闭的链接警示框</div>
        <div class="alert alert-success alert-link alert-dismissable">
            <strong>alert-link alert-dismissable</strong>
            <a href="##">class="alert alert-success alert-link alert-dismissable"链接成功警示框</a>
            <button class="close" type="button" data-dismiss="alert">&times;</button>
        </div>
        <div class="alert alert-info alert-link alert-dismissable">
            <a href="##">class="alert alert-info alert-link alert-dismissable"链接信息警示框</a>
            <button class="close" type="button" data-dismiss="alert">&times;</button>
        </div>
        <div class="alert alert-warning alert-link alert-dismissable">
            <a href="##">class="alert alert-warning alert-link alert-dismissable"链接警告警示框</a>
            <button class="close" type="button" data-dismiss="alert">&times;</button>
        </div>
        <div class="alert alert-danger alert-link alert-dismissable">
            <a href="##">class="alert alert-danger alert-link alert-dismissable"链接危险警示框</a>
            <button class="close" type="button" data-dismiss="alert">&times;</button>
        </div>

        <!--下面的实例演示通过data属性使用警告框(Alert)插件的用法-->
        <div class="alert alert-warning">
            <a href="#"class="close"data-dismiss="alert">
                &times;
            </a>
            <strong>警告!</strong>您的网络链接有问题。
        </div>


        <!--下面实例演示.alert()方法的用法-->
        <h3>警告框(Alert)插件alert()方法</h3>
        <div id="myAlert"class="alert alert-success">
            <a href="#"class="close"data-dismiss="alert">&times;</a>
            <strong>成功!</strong>结果是成功的。
        </div>
        <div id="myAlert"class="alert alert-warning">
            <a href="#"class="close"data-dismiss="alert">&times;</a>
            <strong>警告!</strong>您的网络链接有问题。
        </div>


        <!--下面的实例演示了警告框(Alert)插件的事件-->
        <div id="myAlert"class="alert alert-success">
            <a href="#"class="close"data-dismiss="alert">&times;</a>
            <strong>成功!</strong>结果是成功的。
        </div>
    </div>
  
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
    <script src="~/Content/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <!--.alert()方法的用法-->
    <script>
        $(function () {
            $(".close").click(function () {
                $("#myAlert").alert();
            });
        });
    </script>
    <!--警告框(Alert)插件的事件-->
    <script>
        $(function () {
            $("#myAlert").bind('closed.bs.alert', function () {
                alert("警告消息框被关闭。");
            });
        });
    </script>
</body>
</html>

 

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