警告框 - Alerts

怎样创建一个警告框 ?

<div> 添加 .alert 类,同时还要从下面的类中选择一个样式: .alert-success .alert-info .alert-warning .alert-danger

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>
01.PNG

怎样为警告框添加一个关闭按钮 ?

在警告框内部添加一个 <button> ,同时给作为警告框的 <div> 增加一个 .alert-dismissable 类,

<div class = "alert alert-success alert-dismissable">
    <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
        &times;
    </button>
    
    Success! Well done its submitted.
</div>

......

02.PNG

如何在警告框中添加链接 ?

正常在警告框中添加 <a> 即可,不过要为 <a> 增加 .alert-link

<div class = "alert alert-success">
    <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

......

03.PNG
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容