Semantic UI编写简单首页

前端 Bootstrap SematicUI
前端
发布日期:   2020-05-30
文章字数:   5.3k

SemanticUI

虽然说是一个比较小的框架，但是思想和Bootstrap是一样的，栅格布局。通过这个来学习了一下前端框架的使用。

技术

  • 前端：Semantic UI
  • 后端：SpringBoot

前端

1.建立项目

建立项目的时候结构应该和SpringBoot中的目录对应起来,static/js.css.img等这样：

image-20191127194335435

2. index

引入第三方库文件

使用CDN：

<head></head>中引入Semantic UI框架的css

1
<link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">

然后<body></body>的最底部引入jQuery和Semantic UI的js

1
2
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>

这里是设置移动端的显示，宽度等于设备的width

1
2
<!--    设置移动端的显示    -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

关于这个移动端网页的解释： https://www.cnblogs.com/tenWood/p/7934942.html

网页部分分为header、content、footer三部分

然后根据设计，分为头部header、div、footer三部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    设置移动端的显示    -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--导航-->
<nav>
    
</nav>

<!--中间内容-->
<div>

</div>

<!--底部footer-->
<footer>

</footer>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>

</body>
</html>

导航栏加入样式

然后直接给nav导航栏加入样式：

  • ui：标识是一个ui组件
  • inverted：翻转，反色，将其显示为黑色
  • attached：依附，让导航栏显示为无圆角，可以紧紧的贴在顶部
  • segment：标识是一个片段
1
2
3
4
5
<!--导航-->
<!--inverted，翻转，黑色；attached，依附，无圆角； segment，片段；-->
<nav class="ui inverted attached segment">
    
</nav>

导航栏的子项 item

之后再里面添加具体的标题栏的内容：

1
2
3
4
5
6
7
8
9
<div class="ui container">
        <div class="ui inverted secondary menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="item">首页</a>
            <a href="#" class="item">分类</a>
            <a href="#" class="item">标签</a>
            <a href="#" class="item">关于我</a>
        </div>
</div>

这里ui就体现出作用了，ui是列表，ui组件；而item就是项目组件。

  • item：条目组件
  • teal：颜色
  • secondary：
  • header：header效果。。。？

样式如下：

image-20191127200614086

自定义css调整间距

自定义css：

1
2
3
4
5
6
7
.m-padded-tb-mini {
    /*m代表自定义，padded代表间隔，tb代表上下，mini代表小一点*/
    /*减少上下间隔*/
    /*加个important覆盖原来框架中的important权重等级*/
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}

新建个css文件，然后link引入到index.html中。

注意这里的！important，他框架里的css都是有权值的，所以说要加上这个进行覆盖。

加入图标 i

1
2
3
4
5
6
7
<div class="ui inverted secondary menu">
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="item"><i class="home icon"></i>首页</a>
            <a href="#" class="item"><i class="idea icon"></i>分类</a>
            <a href="#" class="item"><i class="tags icon"></i>标签</a>
            <a href="#" class="item"><i class="info icon"></i>关于我</a>
</div>

i.home.icon，关于icon的各种类去官网的官方手册上去找吧。

加入搜索框

1
2
3
4
5
6
7
<!--搜索框-->
<div class="right item">
    <div class="ui input icon transparent inverted">
        <input type="text" placeholder="Search...">
        <i class="search link icon"></i>
    </div>
</div>
  • right：右浮动
  • input：输入框样式
  • transparent：透明颜色
  • search icon：搜索图标
  • link：鼠标指上去的时候是个小手，link样式

加了之后变成这样了，右边的搜索框。

image-20191127203136427

但是我觉得不如白色的好看，就不加transparent 和 inverted 属性啦。

image-20191127203245358

footer想要的效果：

image-20191127205844929

设置样式，分列

1
2
3
4
5
6
7
8
9
10
11
<!--底部footer-->
<footer class="ui inverted segment vertical">
    <div class="ui container">
        <div class="ui grid">
            <div class="three wide column"></div>
            <div class="three wide column"></div>
            <div class="three wide column"></div>
            <div class="seven wide column"></div>
        </div>
    </div>
</footer>

  1. 首先设置样式：

    • vertical：垂直的，去掉圆角；
    • container保持和上面header的间距一样；

  2. 然后写一个div，用来包容四列

    • grid：将这个div分成16份
    • three：这个div占3份
    • seven：这个div占7份
    • wide：填满
    • column：这是一列

引入图片

图片放到img中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!--底部footer-->
<footer class="ui inverted segment vertical">
    <div class="ui container">
        <!--底部分为4个部分-->
        <div class="ui divided inverted grid">
            <!--第一列，图片-->
            <div class="three wide column">
                <img src="img/QRCode.jpg" alt="二维码" class="ui rounded image" style="width: 110px">
            </div>
            
            <!--第二列-->
            <div class="three wide column"></div>
            <!--第三列-->
            <div class="three wide column"></div>
            <!--第四列-->
            <div class="seven wide column"></div>
        </div>
    </div>
</footer>

这里又给div加了两个属性，来显示每一列之间的分割线。

  • rounded：圆角
  • image：图片属性
  • divided：分割线（这里要加inverted翻转颜色才能看到）
  • 内联样式：写定图片大小

第二列

首先先给这个部分加个居中：

1
2
3
4
5
<!--底部footer-->
<footer class="ui inverted segment vertical">
    <div class="ui center aligned container">
        <!--底部分为4个部分-->
        <div class="ui divided inverted grid">
  • center：居中
  • aligned：对齐

然后写第二块的主要内容：

1
2
3
4
5
6
7
8
9
 <!--第二列-->
<div class="three wide column">
    <h4 class="ui inverted header">最新博客</h4>
    <div class="ui inverted link list">
        <a href="#" class="item">用户故事(User Story)</a>
        <a href="#" class="item">关于刻意练习的清单</a>
        <a href="#" class="item">失败要趁早</a>
    </div>
</div>

第三列同第二列

第四列

一个段落就完事了

1
2
3
4
5
6
7
8
9
 <!--第四列-->
<div class="seven wide column">
    <h4>恶魔吟唱</h4>
    <p>
        大家好我是练习时长两年半的练习生cxk，我喜欢唱跳Rap，篮球，Music！
        鸡你太美！！！哦贝贝，贝贝，白给！迎面走来的你让我蠢蠢欲动。。。
        在今后，我还为大家准备了许多自己作词，作曲的音乐，希望大家能够喜欢，请多多支持
    </p>
</div>

最后整理一下

首先是 给图片加了个list和item属性，让他对齐一下，间距没那么大 

1
2
3
4
5
6
7
8
<!--第一列，图片-->
<div class="three wide column">
    <div class="ui inverted link list">
        <div class="item">
            <img src="img/QRCode3.jpg" alt="二维码" class="ui rounded image" style="width: 110px">
        </div>
    </div>
</div>

然后给这几个块加个间隔：

1
2
3
<footer class="ui inverted segment vertical m-padded-tb-massive">
...
</footer>

css:

1
2
3
4
5
.m-padded-tb-massive{
    /*massive代表最大的间隔*/
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}

下半块，分割线

1
<div class="ui inverted section divider"></div>
  • divier：分割线

调整字体样式：

css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*-------text--------*/
.m-text-thin{
    /*字体调细点*/
    font-weight: 300 !important;
}
.m-text-spaced{
    /*字间距*/
    letter-spacing: 1px !important;
}
.m-text-lined{
    /*行间距*/
    line-height: 1.8 !important;
}
.m-opacity-mini{
    /*透明度*/
    opacity: 0.8 !important;
}

分割线下面加最后一条信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--第四列-->
            <div class="seven wide column">
                <h4>打篮球邀请</h4>
                <p class="m-text-lined m-text-thin m-text-spaced m-opacity-mini">
                    大家好我是练习时长两年半的练习生cxk，我喜欢唱跳Rap，篮球，Music！
                    鸡你太美！！！哦Baby，Baby，白给！迎面走来的你让我蠢蠢欲动。。。
                    在今后，我还为大家准备了许多自己作词，作曲的音乐，希望大家能够多多支持！谢 ♂ 谢!
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-lined m-text-thin m-text-spaced m-opacity-mini">Copyright © 2019-2039 SongX64 Designed By Lirenmi</p>
    </div>
</footer>

==content==

Content内容如下图：

image-20191202100245907

自定义css，写几个边距类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/*---------------------------padded,自定义边距，分为几个级别------------------------------*/
.m-padded-tb-mini {
    /*m代表自定义，padded代表间隔，tb代表上下，mini代表小一点*/
    /*减少上下间隔*/
    /*加个important覆盖原来框架中的important权重等级*/
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}

.m-padded-tb-tiny {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
}

.m-padded-tb-small {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}

.m-padded-tb {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

.m-padded-tb-large {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}

.m-padded-tb-big {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}

.m-padded-tb-huge {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}

.m-padded-tb-massive {
    /*massive代表最大的间隔*/
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}

本来是只写了一个massive的，然后现在扩充几个。这个写法应该是比较规范的吧。。。看这个Semantic UI框架里面好像也有这种等级级别的东西。

min tiny small NULL large big huge massive

搭建框架

首先先搭建其中的div各个块：

image-20191202100618083

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!--先给他加个边距-->
    <div class="m-padded-tb-large">
        <!--container是可以自适应屏幕宽度的-->
        <div class="ui container">
            <!--中间内容左右两列，左面7份，右面5份-->
            <div class="ui grid">
                
                <!--左列博客栏目-->
                <div class="eleven wide column">
                   
                </div>

                <!------------------------------------------------------------->

                <!--右侧标签栏加分类栏-->
                <div class="ui five wide column">

                </div>
                
            </div>           
        </div>
    </div>

这里分为左右两列，左面在占7份，右面占5份

  • container：可以自适应的布局
  • eleven：grid布局中的7份；five同理
  • wide column：这里这个还是不能分开的，表示一个宽列。如果写成column wide就无效
  • ==ui==：？？？这个标签到底该什么时候加什么时候不加？对布局还是有影响的并不是可有可无的一个标签

左侧部分

左侧header

header头栏头栏就是说“博客 共14篇”这一部分的标题。

image-20191202100851132 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--左列博客栏目-->
<div class="eleven wide column">

    <!--最上面的一个栏,标识"博客  | 共144篇"；用一个segment碎片属性-->
    <div class="ui segment">
        <!--分为两列的gird布局-->
        <div class="ui two column grid">
            <!--左面一列写“博客”-->
            <div class="column">
                <h3 class="ui teal header">博客</h3>
            </div>
            
            <!--右面一列写“共多少篇”-->
            <div class="right aligned column">
                共 <h3 class="ui orange header m-inline-block">14</h3> 篇
            </div>
        </div>
    </div>

</div>
  • segment：碎片
  • two column grid：两列布局
  • column：上面的其中的一列（好像是one可以省略？)
  • right aligned：右对齐
  • orange：橙色
  • m-inline-block：自定义，将h3设为行内元素，让他不换行
1
2
3
4
5
/*----------------display,显示的一些属性--------------------------------*/
.m-inline-block {
    /* 行内元素*/
    display: inline-block !important;
}
  • middle aligned：（垂直？）居中对齐
左侧分3部分

首先左侧整个栏目，也是分为3部分：

image-20191202104324015

image-20191202104418259

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--左列博客栏目-->
<div class="eleven wide column">
    
    <!--header-->
    <!--最上面的一个栏,标识"博客  | 共144篇"；用一个segment碎片属性-->
    <div class="ui segment top attached">......</div>

    <!-- content-->
    <div class="ui attached segment"></div>
    
    <!-- footer-->
    <div class="ui segment attached"></div>
    
</div>
  • attached：让两个segment之间没有缝隙，贴合
  • top attached：这个应该是说最顶部的要贴合的元素
左侧footer

footer部分含有两个按钮：”上一页“ “下一页”

类似于header中的分“博客” “共有14篇”布局
所以说布局可以直接拿过来用，只需修改一下里面的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- footer-->
<div class="ui segment attached">
    <!--布局结构同header里面，两列-->
    <div class="ui container">
        <div class="ui two column grid">
            <div class="column">
                <!--修改其中的内容为按钮，修改颜色，样式-->
                <a href="#" class="ui button teal basic">上一页</a>
            </div>
            <div class="right aligned column">
                <a href="#" class="ui button teal basic">下一页</a>
            </div>
        </div>
    </div>
</div>

==注意column的拼写！！！==

  • teal：颜色，浅绿色
  • basic：样式，让他没那么明显，变成镂空的
    image-20191202105647573image-20191202105540646
左侧content

image-20191202115849509

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- content-->
<div class="ui attached segment">
    <div class="ui padded vertical segment m-padded-tb-large">

        <!--content部分，分为文章和右面缩略图-->
        <div class="ui middle aligned grid">
            <div class="eleven wide column">
                <!-- 文章标题和内容-->
                <h3>加油，奥利给</h3>
                <p>我们遇到什么困难也不要怕，微笑着面对它！消除恐惧的最好办法，就是面对恐惧！坚持，才是胜利。加油！奥利给！...</p>
                <!--下面的头像，作者，日期，访问次数 | 标签，用一个布局-->
                <div class="ui middle aligned grid">
                    <div class="eleven wide column">
                        <div class="ui horizontal link list">
                            <div class="item">
                                <!--头像-->
                                <img src="https://picsum.photos/id/1005/100" alt="头像"
                                     class="ui avatar image">
                                <!--作者名-->
                                <div class="content"><a href="#" target="_blank">巨魔</a></div>
                            </div>
                            <div class="item">
                                <!--图标+日期-->
                                <i class="calendar icon"></i>2019-12-1
                            </div>
                            <div class="item">
                                <!--浏览量-->
                                <i class="eye icon"></i> 4261
                            </div>
                        </div>

                    </div>
                    <div class="five wide column right aligned ">
                        <a href="#" target="_blank"
                           class="ui teal  label m-padded-tiny m-text-thin">认知升级</a>
                    </div>
                </div>
            </div>

            <div class="five wide column">
                <!--一个图片，被超链接包括，在新的标签页打开链接-->
                <a href="#" target="_blank"><img src="https://picsum.photos/id/10/800/450" alt="图片"
                                                 class="ui rounded image"></a>
            </div>
        </div>
    </div>
    ......多个文章部分copy
</div>

  • horizontal link list：一个水平的列表，内部需要包括item
  • item：link list的具体内容
  • avatar image：圆形图片，用来做头像
  • calendar icon：日历图标
  • eye icon：眼睛图标image-20191202120900166

  • padded：设置一些间距

  • vertical：将segment设为垂直效果，其中两个之间有一个横线分割

    image-20191202120829315
微调

剩下的就是字体啊，行间距啊，padding啊之类的微调了，这个无所谓了就不写了

右侧部分

右侧部分有4块，分别是：分类、标签、最新推荐、二维码

image-20191202164844031image-20191202164859593

1.分类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--第一个悬浮栏目，分类-->
<div class="ui segments">
    <!--顶部的标题：“分类” | More>> -->
    <div class="ui secondary segment">
        <div class="ui two column grid">
            <div class="column">
                <i class="idea icon"></i>分类
            </div>
            <div class="column right aligned">
                <a href="#" target="_blank">more <i class="angle double right icon"></i></a>
            </div>
        </div>
    </div>

    <!--teal就有了分割线，然后下面的分类-->
    <div class="ui teal segment">
        <div class="ui fluid vertical menu">
            <a href="#" class="item">学习日志
                <!--这个分类中的条数-->
                <div class="ui teal basic left pointing label">13</div>
            </a>
            <a href="#" class="item">学习日志
                <div class="ui teal basic left pointing label">13</div>
            </a>
            ...多个超链接
        </div>

    </div>
</div>

这一块的布局就比较简单了，和前面都是一些类似的东西了，多使用segment和grid来进行布局。

  • secondary：灰色的背景，也就是头栏上那个浅灰色
  • segments：segment的集合，类似于list和item的关系。
  • fluid：流动的不固定的，让他自动填满整个框
  • angle double right icon：一个 >> 表示更多的图标
  • left pointing label：一个带左尖括号的标签

最终效果如下：

image-20191202165544922

2.标签

标签和上面的基本相似。其中的宽度长度啥的是可以自适应的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--第二个悬浮栏目，标签-->
<div class="ui segments m-margin-tb-big">
    <!--头栏-->
    <div class="ui secondary segment">
        <div class="ui two column grid">
            <div class="column">
                <i class="tags icon"></i>标签
            </div>
            <div class="right aligned column">
                <a href="#" target="_blank">more <i class="angle double right icon"></i></a>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="ui teal segment">
        <a href="#" target="_blank" class="ui teal basic label m-margin-tb-tiny">心灵鸡汤
            <div class="detail">22</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic label m-margin-tb-tiny">SpringBoot架构
            <div class="detail">22</div>
        </a>
        <a href="#" target="_blank" class="ui teal basic label m-margin-tb-tiny">Web前端设计开发
            <div class="detail">22</div>
        </a>
   		...多个超链接
    </div>

</div>

效果如下：

image-20191202165856984

3.最新推荐

最新推荐这一块就是利用segments和多个segment来实现的。

1
2
3
4
5
6
7
8
9
10
11
12
<!--第三个悬浮栏目，最新推荐--> 
<div class="ui segments m-margin-tb-big ">
     <div class="ui secondary segment">
         <i class="bookmark icon"></i> 最新推荐
     </div>
     <div class="ui segment">
         <a href="#" target="_blank" class="m-black m-text-thin">没有什么能够阻挡，你对自由的向往</a>
     </div>
     <div class="ui segment">
         <a href="#" target="_blank" class="m-black m-text-thin">没有什么能够阻挡，你对自由的向往</a>
     </div>
</div>

这里还写了个自定义的m-black来改变字体颜色。

1
2
3
.m-black{
    color: #333 !important;
}

最新推荐

4.二维码

最后一块二维码：

1
2
3
4
5
6
<!--分割线-->
<h4 class="ui horizontal divider header">扫码关注我</h4>
<!--二维码-->
<div class="ui centered card" style="width: 11em">
    <img src="img/QRCode3.jpg" alt="扫码关注" class="ui rounded image">
</div>
  • horizontal divider header：分割线
  • card：卡片属性
  • centered：居中
  • rounded image：圆角图片

效果如下：

image-20191202170733567

至此，主页index大概完成。但是还有手机端适应的问题。

手机端适应

stackable

menu部分：加个stackable类

1
<div class="ui inverted secondary stackable menu">
  • stackable：可堆叠的，加上之后会堆起来（这里只是说header的menu）image-20191202180702015

mobile reversed

上图中，文章部分还没有适配，所以说给文章部分也加上stackable:

1
2
<!--content部分，分为文章和右面缩略图-->
<div class="ui middle aligned stackable grid">

但是效果如图：

image-20191202181139544

所以说再加个属性：

  • mobile reversed：手机端翻转，反序，将两个column反过来，图片在上：

    image-20191202181245405
1.先添加按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--导航-->
<!--inverted，翻转，黑色；attached，依附，无圆角； segment，片段；-->
<nav class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <!--导航菜单-->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Blog</h2>
            <!--m-mobile-hide，在手机端隐藏掉，自定义css-->
            <a href="#" class="item m-mobile-hide m-item"><i class="home icon"></i>首页</a>
            <a href="#" class="item m-mobile-hide m-item"><i class="idea icon"></i>分类</a>
            <a href="#" class="item m-mobile-hide m-item"><i class="tags icon"></i>标签</a>
            <a href="#" class="item m-mobile-hide m-item"><i class="info icon"></i>关于我</a>
            <!--搜索框-->
            <div class="right item  m-mobile-hide">
                <div class="ui input icon">
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!--手机端那个 “ 三 ” 按钮-->
    <!--menu toggle没有显示上的意义，只是用来获取元素-->
    <a href="#" class="ui black icon button m-right-top m-mobile-show menu toggle">
        <i class="sidebar icon"></i>
    </a>
</nav>

最下面这几行，添加一个button 的a超链接

2.添加相关的类css，来控制手机端和电脑端的显示和隐藏
1
2
3
4
5
6
7
/*--------------------------position，位置------------------------*/
.m-right-top {
    /*绝对布局，让它到右上角*/
    position: absolute;
    top: 0;
    right: 0;
}
  • m-right-top：绝对定位，让这个按钮到右上角去
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*-------------------mobile，手机端适配-------------------------------------------*/
/*屏幕上的 “ 三 ” 按钮，平时不显示*/
.m-mobile-show {
    display: none !important;
}

/*媒体屏幕，小于768px的时候触发，也就是手机端 */
@media screen and (max-width: 768px) {
    /*这个类的元素在屏幕小于768的时候隐藏掉*/
    .m-mobile-hide {
        display: none !important;
    }
    /*屏幕上的 “三” 按钮，在小于768的时候显示*/
    .m-mobile-show {
        display: block !important;
    }
}
  • m-mobile-hide：只在手机端隐藏
  • m-mobile-show：只在手机端显示，电脑端不显示
3.使用jQuery来控制按钮点击
1
2
3
4
5
<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
</script>

toggleClass（）函数是jQuery自带的函数，用来转换类；在元素有这个类 (这里指m-mobile-hide) 的时候把它移除，没有这个类的时候把它加上。

直接通过类选择器取到元素，然后显示或隐藏。

index完成

文章作者: SongX64
文章链接: https://SongX64.github.io/2020/05/30/SemanticUI/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 SongX64 !
前端 Bootstrap SematicUI
赏
  目录