31_Bootstrap组件_警告框|学习笔记

开发者学堂课程【前端开发框架Bootstrap使用教程31_Bootstrap组件_警告框】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4250


31_Bootstrap组件_警告框


目录

一、实例

二、可关闭的警告框

三、警告框中的链接


一、实例

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.alert 类是必须要设置的,另外我们还提供了有特殊意义的4个类(例如,.alert-success),代表不同的警告信息。

没有默认类:警告框没有默认类,只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。

<div class="alert alert-success" role="alert">...</div>

<div class="alert alert-info" role="alert">...</div>

<div class="alert alert-warning" role="alert">...</div>

<div class="alert alert-danger" role="alert">...</div>

范例1:

< !DOCTYPE html>

<html lang= "en">

< head>

<meta charset="UTF-8">

<title>警告框</title>

<link href="bootstrap.min.css" rel="stylesheet"/> < /head>

<body>

<div class-"container">

<div class="alert alert-info" role="alert"> <strong info</strong>信息

</div>

<div class="alert alert-success" role="alert"> <strong info</strong>成功

</div>

<div class="alert alert-warning" role="alert"> <strong info</strong>警告

</div>

<div class="alert alert-danger" role="alert"> <strong info</strong>危险

</div>

</div>

< /body>

< /html>|


二、可关闭的警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

依赖警告框 JavaScript 插件

要想让警告框组件功能征程、可关闭,必须使用 警告框的 JavaScript 插件。

<div class="alert alert-warning alert-dismissible" role="alert">

 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

 <strong>Warning!</strong> Better check yourself, you're not looking too good.

</div>

确保在所有设备上的正确行为

务必给 <button> 元素添加 data-dismiss="alert" 属性。


三、警告框中的链接

用 .alert-link 工具类,可以为链接设置与当前警告框相符的颜色。

<div class="alert alert-success" role="alert">

 <a href="#" class="alert-link">...</a>

</div>

<div class="alert alert-info" role="alert">

 <a href="#" class="alert-link">...</a>

</div>

<div class="alert alert-warning" role="alert">

 <a href="#" class="alert-link">...</a>

</div>

<div class="alert alert-danger" role="alert">

 <a href="#" class="alert-link">...</a>

</div>

上一篇:Java源码英翻中库以及服务原型


下一篇:elastic-job失效转移异常