bootstrap(警告框、按钮)

最新推荐文章于 2024-08-19 21:42:52 发布

小鱼儿_zhang

最新推荐文章于 2024-08-19 21:42:52 发布

阅读量4k

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_20261343/article/details/47300743

版权

本文详细介绍了Bootstrap中的警告框（Alert）和按钮（Button）组件。警告框包括结构与样式、使用声明式触发以及JavaScript触发的关闭功能。按钮部分讲解了其不同状态的控制，如加载状态、模拟单选和复选按钮，以及如何通过JavaScript进行状态切换和管理。

摘要由CSDN通过智能技术生成

警告框（Alert）
样式文件：
LESS版本:源文件 alerts.less

警告框–结构与样式

<div class="alert alert-success" role="alert">
    <button class="close"  data-dismiss="alert" type="button" >&times;</button>
    <p>恭喜您操作成功！</p>
</div>

警告框–使用声明式触发警告框
击X会关闭整个警告框。
其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss=”alert”即可，
这里写图片描述

<h3>使用a标签作为关闭按钮</h3>
<div class="alert alert-warning" role="alert">
    <h4>谨防被骗</h4>
    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
    <a href="#" class="btn btn-danger"  data-dismiss="alert">关闭</a>
</div>