15、Semantic-UI之导航

1|015.1 面包屑导航

  在Semantic-UI中有多种样式实现面包屑导航，类似 / > 等。

1|1示例：定义定义基础面包屑导航

 
<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>

1|2示例：第二种面包屑导航

 
    <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>

1|3示例：设置面包屑大小

 
<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>

1|4示例：设置面包屑状态

 
<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>

2|015.2 信息提示框

  在Semantic-UI中可以向bootstrap那样定义信息提示框，信息框也可以实现关闭操作。

2|1示例：定义基础信息提示框

 
<div class="ui container">
    <div class="ui message">
        <div class="header">服务条款</div>
      <p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
     </div>
</div>

2|2示例：为信息提示框加图标

 
<div class="ui container">
    <div class="ui message">
        <div class="header"><i class="book icon"></i>服务条款</div>
      <p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
     </div>
</div>

2|3示例：定义可以关闭的信息提示框

 
<!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>

2|4示例：在信息框中显示不同的颜色

 
<div class="ui container">
    <div class="ui success message">
        <i class="close icon"></i>
        <div class="header">服务条款</div>
        <p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
    </div>
</div>

2|5示例：设置信息提示框大小

 
<div class="ui container">
    <div class="ui tiny error message">
        <i class="close icon"></i>
        <div class="header">服务条款</div>
        <p>为使用腾讯的服务，您应当阅读并遵守《腾讯服务协议》（以下简称“本协议”）和《QQ号码规则》。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、管辖与法律适用条款，以及开通或使用某项服务的单独协议。限制、免责条款可能以黑体加粗或加下划线的形式提示您重点注意。除非您已阅读并接受本协议所有条款，否则您无权使用腾讯提供的服务。您使用腾讯的服务即视为您已阅读并同意上述协议的约束。</p>
    </div>
</div>

3|015.3 小结

  在项目开发中会经常使用信息提示框的操作。


__EOF__

本文作者：StaryJie
本文链接：https://www.cnblogs.com/jie-fang/p/10279572.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   StaryJie  阅读(814)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae