加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
lyear_ui_alerts.html 7.60 KB
一键复制 编辑 原始数据 按行查看 历史
笔下光年 提交于 2020-06-01 23:55 . 修改页面bug,增加标注演示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>警告框 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板,基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid p-t-15">
<div class="row">
<div class="col-lg-6">
<div class="card">
<header class="card-header"><div class="card-title">基本样式</div></header>
<div class="card-body">
<div class="alert alert-primary" role="alert">战济南秦彝托孤 破陈国李渊杀美</div>
<div class="alert alert-secondary" role="alert">谋东宫晋王纳贿 反燕山罗艺兴兵</div>
<div class="alert alert-success" role="alert">造流言李渊避祸 当马快叔宝听差</div>
<div class="alert alert-danger" role="alert">造流言李渊避祸 当马快叔宝听差</div>
<div class="alert alert-warning" role="alert">秦叔宝穷途卖骏马 单雄信交臂失知音</div>
<div class="alert alert-info" role="alert">樊建威冒雪访良朋 单雄信挥金全义友</div>
<div class="alert alert-light" role="alert">打擂台英雄聚会 解幽州姑侄相逢</div>
<div class="alert alert-dark" role="alert">叔宝神箭射双雕 伍魁妒贤成大隙</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<header class="card-header"><div class="card-title">带连接的警告框</div ></header>
<div class="card-body">
<div class="alert alert-primary" role="alert">
第九回 夺先锋教场比武 <a href="#!" class="alert-link">思乡里叔宝题诗</a>
</div>
<div class="alert alert-secondary" role="alert">
第十回 省老母叔宝回乡 <a href="#!" class="alert-link">送礼物唐璧贺寿</a>
</div>
<div class="alert alert-success" role="alert">
第十一回 英雄混战少华山 <a href="#!" class="alert-link">叔宝权栖承福寺</a>
</div>
<div class="alert alert-danger" 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-info" role="alert">
第十四回 参社火公子丧身 <a href="#!" class="alert-link">行弑逆杨广篡位</a>
</div>
<div class="alert alert-light" role="alert">
第十五回 雄阔海打虎显英雄 <a href="#!" class="alert-link">伍云召报仇集众将</a>
</div>
<div class="alert alert-dark" role="alert">
第十六回 麒麟关莽将捐躯 <a href="#!" class="alert-link">南阳城英雄却敌</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<header class="card-header"><div class="card-title">标注</div></header>
<div class="card-body">
<div class="callout callout-primary mb-3">第一回 借龙丹仙人助孝子 起贪念恶吏索神珠</div>
<div class="callout callout-success mb-3">第二回 两点龙泪洒成望娘滩 一柄仙剑刺破篾龙眼</div>
<div class="callout callout-info mb-3">第三回 试道心特设迎龙闸 解凡体投入孝女怀</div>
<div class="callout callout-warning mb-3">第四回 受谤言不夫而孕 明心迹烈女投河</div>
<div class="callout callout-danger mb-3">第五回 钱塘江龙游传古迹 东海岸徒弟觅师尊</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<header class="card-header"><div class="card-title">可关闭的警告框</div></header>
<div class="card-body">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>第02章</strong> 第十九回 太行山伍天锡鏖兵 关王庙伍云召寄子
</div>
<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>第03章</strong> 第二十回 韩擒虎收兵复旨 程咬金逢赦回家
</div>
<div class="alert alert-primary alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>第03章</strong> 第八十九回 唐明皇梦中见鬼 雷万春都下寻兄
</div>
<div class="alert alert-dark alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>第03章</strong> 第九十回 矢忠贞颜真卿起义 遭妒忌哥舒翰丧师
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="alert-heading">第二十一回 俊达有心结好汉 咬金学斧闹中宵</h4>
<p>程咬金回到家中,程母认是咬金,母子抱头大哭一场。程母说道:“儿呵!不知我儿因何得放回家?”咬金道:“如今换了皇帝,大赦天下,不管大小罪犯,一齐放了,故此孩儿遇赦①回来。”</p>
<p>
<button type="button" class="btn btn-danger">采取这个行动</button>
<button type="button" class="btn btn-default">或者这样做</button>
</p>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="alert-heading">第十七回 韩擒虎调兵二路 伍云召被困危城</h4>
<p>当时左右把叔谋押出营门,叔谋大哭道:“众将快来救我,必当犬马相报!”当有军中参谋包勿杀上前禀道:“未破南阳,先斩大将,于军不利。不如暂恕先锋,待破了南阳,与反贼一并解上朝廷,候旨定夺。”擒虎道:“此言有理。”</p>
<hr>
<p>《说唐全传》</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化