汐岑小窝

  • 首页
  • 网络资源
  • 技术教程
  • 软件工具
  • 网站源码
Yanzh
一款专注于用户阅读体验的博客
  1. 首页
  2. 技术教程
  3. 正文

Bootstrap组件之警告框

2017年10月5日 267点热度 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日

Yanzh

勿因未候日光暖,擅自轻言世间寒

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

Yanzh

勿因未候日光暖,擅自轻言世间寒

免费领优惠券

 
汐岑推荐,安全有保障
立即领券
分类目录
  • SEO优化
  • Special
  • 技术教程
  • 文章广告
  • 杂文语录
  • 网站源码
  • 网络资源
  • 软件工具
书签
  • 流量宝
  • 昨日
  • Aneu
  • 富士理发店
  • 猫狗侠网店推广
  • 同乐儿
  • 明月浩空

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

THEME KRATOS MADE BY VTROIS

赣 ICP 备 19000739 号 - 2