码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap警告

时间:2017-06-28 11:50:57      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:mil   错误信息   dismiss   sde   head   ref   mis   取消   str   

警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

警告(Alerts)

步骤:
1、创建一个 <div>
2、并向其加入一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之中的一个,
来加入一个主要的警告框。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width,initial-scale = 1.0">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src = "js/jquery-1.11.2.min.js"></script>
    <script src = "js/bootstrap.min.js"></script>
    <title>CSSDemo</title>
</head>
<body>
    <div class="container">
        <div class="col-lg-3">
            <div class="alert alert-success">成功信息。</div>
            <div class="alert alert-info">提示信息。</div>
            <div class="alert alert-warning">警告信息。

</div> <div class="alert alert-danger">错误信息。</div> </div> </div> </body> </html>


技术分享


可取消的警告(Dismissal Alerts)

创建一个可取消的警告(Dismissal Alert)过程例如以下:

  • 通过创建一个 <div>。并向其加入一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之中的一个,来加入一个主要的警告框。

  • 同一时候向上面的 <div> class 加入可选的 .alert-dismissable

  • 加入一个关闭button。

注意:须要引入警告的jquery插件,此处选择引入bootstrap.min.js.


<body>
    <div class="container">
        <div class="col-lg-3">
            <div class="alert alert-success alert-dismissable">成功信息。

<button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button> </div> <div class="alert alert-info">提示信息。 <button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button> </div> <div class="alert alert-warning">警告信息。</div> <div class="alert alert-danger">错误信息。

</div> </div> </div> </body>


技术分享


button的class = "close",是设置X号的样式。

data-dismiss = "alert"是给js使用的。

至于aria-hidden = "true"并未看出有何左右,不管是改为false或是删除,对显示和功能均无影响。
div中的alert-dismiss也是一样,全然能够删除,不会影响显示和功能。

警告(Alerts)中的链接


1、通过创建一个 <div>,并向其加入一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、
.alert-warning、.alert-danger)之中的一个,来加入一个主要的警告框
2、使用 .alert-link 实体类来高速提供带有匹配颜色的链接。


<body>
    <div class="container">
        <div class="col-lg-3">
            <div class="alert alert-success alert-dismissable">
                <a href="#" class="alert-link">成功信息。</a>
                <button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button>
            </div>
            <div class="alert alert-info">
                <a href="#" class="alert-link">提示信息。</a>
                <button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button>
            </div>
            <div class="alert alert-warning">
                <a href="#" class="alert-link">警告信息。

</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">错误信息。</a> </div> </div> </div> </body>


技术分享

.alert .alert-link的font-weight:700,因此能够看出字体有加粗

Bootstrap警告

标签:mil   错误信息   dismiss   sde   head   ref   mis   取消   str   

原文地址:http://www.cnblogs.com/gavanwanggw/p/7088779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!