简单教程
提交运行
代码编辑器：
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/lib/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="/static/lib/jquery/3.3.1/jquery.min.js"></script> <script src="/static/lib/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="/static/lib/popper.js/1.12.9/umd/popper.min.js"></script> <div class="container"> <h2>提示框添加链接</h2> <p>如果给提示框中的链接添加链接效果，可以添加 .alert-link CSS 类来设置匹配提示框颜色的链接</p> <div class="alert alert-success"> <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> <div class="alert alert-info"> <strong>信息!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> <div class="alert alert-warning"> <strong>警告!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> <div class="alert alert-danger"> <strong>错误!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> <div class="alert alert-primary"> <strong>首选!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> <div class="alert alert-secondary"> <strong>次要的!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> <div class="alert alert-dark"> <strong>深灰色!</strong>你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> <div class="alert alert-light"> <strong>灰色!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。 </div> </div>
运行结果：