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

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

15、Semantic-UI之导航的更多相关文章

  1. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  2. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  3. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  4. Semantic UI 语义化设计的前端框架

    UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...

  5. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  6. IOS开发UI篇—导航控制器属性和基本使用

    IOS开发UI篇—导航控制器属性和基本使用 一.导航控制器的一些属性和基本使用 1.把子控制器添加到导航控制器中的四种方法 (1) 1.创建一个导航控制器 UINavigationController ...

  7. 修改 Semantic UI 的默认字体

    Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...

  8. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  9. Semantic UI基础使用教程

    自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...

随机推荐

  1. 构造方法PK实例方法

    1.构造方法 (1)用于对象初始化,一个类中至少有一个构造方法 (2)不能显示调用,只能在创建对象时,使用new来调用 (3)构造方法不能有返回值 (4)构造方法名称必须与类名一样 2.实例方法 (1 ...

  2. [Z]用subcaption包排版子图（表）与图（表）格式设置

    很不错的一篇文章,可以进一步参考caption和subcaption的文档: http://www.peteryu.ca/tutorials/publishing/latex_captions

  3. [Z]shell变量详解

    原文:http://www.cnblogs.com/barrychiao/archive/2012/10/22/2733210.html 1 shell变量基础shell变量是一种很“弱”的变量,默认 ...

  4. VUE 初步学习

    Vue 简单的总结一 Vue 简单的总结二 Vue 简单的总结三 Vue 简单的总结四(项目流程) Vue 简单的总结五 Vue(6)- Vue-router进阶.单页面应用(SPA)带来的问题 Vu ...

  5. 【Oracle】Oracle数据库DATABASE LINK 的命名

    当前数据库的GLOBAL_NAMES参数设置为 TRUE,使用DATABASE LINK 时,DATABASE LINK的名称必须与被连接库的 GLOBAL_NAME一致. 而要建多个 DBLINK到 ...

  6. i++的原子性问题

    一.什么是原子性 简单的可以理解为:操作是不可再分割的,比如: int i=0; 但是i++的操作是可以再分的,比如: i++ //分解后 i=i+i 上面的代码在多线程环境下取值是有问题的,比如: ...

  7. Python格式符说明

    格式化输出 例如我想输出 我的名字是xxxx 年龄是xxxx name = "Lucy"age = 17print("我的名字是%s,年龄是%d"%(name, ...

  8. python+Django创建第一个项目

    1.首先搭建好环境 1.1 安装pyhton,Linux系统中,python是系统自带的所以就不用安装 1.2 安装Django框架 使用pip安装: pip install django 1.3 检 ...

  9. 后端生成二维码 - C#生成二维码（QR）

    最近在github上找到一个相对比较好的C#二维码生成类库.在这里和大家分享一下. github地址:https://github.com/codebude/QRCoder 把解决方案下载下来,编译生 ...

  10. Scala基础：闭包、柯里化、隐式转换和隐式参数

    闭包,和js中的闭包一样,返回值依赖于声明在函数外部的一个或多个变量,那么这个函数就是闭包函数. val i: Int = 20 //函数func的方法体中使用了在func外部定义的变量 那func就 ...