Bootstrap 自学笔记

警告框 - Alerts

2016-03-30  本文已影响143人  勤劳的悄悄

怎样创建一个警告框 ?

<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
上一篇 下一篇

猜你喜欢

热点阅读