15Semantic-UI之导航
Posted jie-fang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了15Semantic-UI之导航相关的知识，希望对你有一定的参考价值。
15.1 面包屑导航
??在Semantic-UI中有多种样式实现面包屑导航，类似 / > 等。
示例：定义定义基础面包屑导航
<div class="ui container">
<div class="ui breadcrumb">
<div class="section">首页</div>
<div class="divider">/</div>
<div class="section">图书</div>
<div class="divider">/</div>
<div class="section">JavaSE</div>
</div>
</div>示例：第二种面包屑导航
<div class="ui container">
<div class="ui breadcrumb">
<div class="section">首页</div>
<i class="angle right icon"></i>
<div class="section">图书</div>
<i class="angle right icon"></i>
<div class="section">JavaSE</div>
</div>
</div>示例：设置面包屑大小
<div class="ui container">
<div class="ui huge breadcrumb">
<div class="section">首页</div>
<i class="angle right icon"></i>
<div class="section">图书</div>
<i class="angle right icon"></i>
<div class="section">JavaSE</div>
</div>
</div>示例：设置面包屑状态
<div class="ui container">
<div class="ui tiny breadcrumb">
<div class="section">首页</div>
<i class="angle right icon"></i>
<div class="section">图书</div>
<i class="angle right icon"></i>
<div class="active section">JavaSE</div>
</div>
</div>15.2 信息提示框
??在Semantic-UI中可以向bootstrap那样定义信息提示框，信息框也可以实现关闭操作。
示例：定义基础信息提示框
<div class="ui container">
<div class="ui message">
<div class="header">服务条款</div>
<p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
</div>
</div>示例：为信息提示框加图标
<div class="ui container">
<div class="ui message">
<div class="header"><i class="book icon"></i>服务条款</div>
<p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
</div>
</div>示例：定义可以关闭的信息提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI </title>
<!-- 使用CDN导入js和css 文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script>
$(function () {
$(".ui.message .close").on("click",function () {
$(this).closest(".message").transition("fade");
})
})
</script>
</head>
<body style="padding: 20px;">
<div class="ui container">
<div class="ui message">
<i class="close icon"></i>
<div class="header">服务条款</div>
<p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
</div>
</div>
</body>
</html>示例：在信息框中显示不同的颜色
<div class="ui container">
<div class="ui success message">
<i class="close icon"></i>
<div class="header">服务条款</div>
<p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
</div>
</div>示例：设置信息提示框大小
<div class="ui container">
<div class="ui tiny error message">
<i class="close icon"></i>
<div class="header">服务条款</div>
<p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
</div>
</div>15.3 小结
??在项目开发中会经常使用信息提示框的操作。
以上是关于15Semantic-UI之导航的主要内容，如果未能解决你的问题，请参考以下文章