汐岑小窝

  • 首页
  • 网络资源
  • 技术教程
  • 软件工具
  • 网站源码
汐岑小窝
一个零零后的博客小窝
  1. 首页
  2. 技术教程
  3. 正文

Bootstrap组件之警告框

2017年10月5日 557点热度 0人点赞 0条评论

.alert——指明div元素为警告框组件;

.alert-info、.alert-danger、.alert-warning、.alert-success——给警告框设置情景效果;
.alert-dismissible——提示该警告框组件为可关闭的;
.close——设置按钮为可关闭;

.alert-link——可以为链接设置与当前警告框相符的颜色;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>组件_警告框</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <script src="jquery-1.11.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h3>警告框示例</h3>
    <div class="alert alert-danger" role="alert">
        国安掉队了
    </div>
    <div class="alert alert-info" role="alert">
        恒大仍是冠军的最有力争夺者
    </div>
    <div class="alert alert-success" role="alert">
        上港再次回到榜首位置
    </div>
    <div class="alert alert-warning" role="alert">
        鲁能的状态总是起起伏伏
    </div>

    <div class="alert alert-info alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="close">
            <span aria-disabled="true">×</span>
        </button>
        <strong>感谢您选择<要投哪></strong>
    </div>

    <div class="alert alert-success" role="alert">
        如果你想投资理财,请访问
        <a href="https://www.yanwz.cn" class="alert-link" target="_blank">要投哪</a>
    </div>
</div>

</body>
</html>
8c8a087f3fb7c8c7dd0923595702a266.jpg

标签: Bootstrap组件 警告框
最后更新:2017年10月5日

汐岑君

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >
分类
  • SEO优化
  • Special
  • 技术教程
  • 文章广告
  • 杂文语录
  • 网站源码
  • 网络资源
  • 软件工具
归档
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2019年12月
  • 2019年5月
  • 2019年4月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年5月
  • 2017年4月

COPYRIGHT © 2021 汐岑小窝. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

赣ICP备19000739号-2