【Semantic框架学习日志】（2）从一个导航栏的故事说起

前言

    Semantic UI框架是前端的一个框架，最近在一直学习这个框架。从个人的感觉上来说，相比于其他框架，它的优势在于对于移动端页面和客户端页面的响应式布局，以及强大的UI组件库等。在页面组件设计上，它的组件灵活生动，不那么直板僵硬，冗余度和创造性较高。在语法方面，相较于前端其他框架，也容易上手理解。下面就是我的Semantic框架学习日志，虽然我的文笔有限，写的可能不太好，但我争取分享一些干货，也算是帮助大家一起学习共同进步。

---

---

一、导航栏的重要性

    细心的人发现，当你浏览网页时，会发现几乎所有的网页的主页都会有一个导航栏。没错，今天讲的就是就是它——导航栏。
     所以说， 好看的导航栏，能够很好的衬托整个页面，使得页面给人一种很舒服的感觉，提升了网页的可读性。所以，有了框架，妈妈就不用担心我的导航栏了~（hhh）
    废话不多说，赶紧来做。

二、导航栏样式

    在官方文档中，能够供我们使用的导航栏样式有很多。有兴趣的话不妨来到官方文档看一看

    接下来我就把干货带给大家。

1.怎么使用semantic样式

    这里先介绍怎么使用semantic样式呢？
    使用方式很简单，就是在每个元素块 添加class="ui xxx"即可使用Semantic所使用的组件
    代码如下（示例）：

	<button>123</button>
    <button class="ui button">123</button>

    同样是按钮组件，第一种是原生的，第二种是使用Semantic组件的，看一下两者区别：

    第二种相较于第一种，是不是好看了很多呢~这就是框架的强大之处，后面随着日志的更新将探秘这个框架究竟有多强大！

2.做一个导航栏吧

    利用div实现一个简单的导航栏

<div class="ui menu">
        <div class="header item">Xuan</div>
        <a class="active item">首页</a>
        <a class="item">社区</a>

        <div class="right menu">
            <div class="item">
                <div class="ui action left icon input">
                    <i class="search icon"></i>
                    <input type="text">
                    <button class="ui button">搜索</button>
                </div>
            </div>
            <a class="item">联系我们</a>
        </div>
    </div>

    看一下效果，还算可以，一个简单的导航栏就搞定了。

    要想换一种风格，可以保持上面的代码不变，在div class="ui menu"中加一个inverted就可以实现。inverted是“反转”的意思，例如，原本白色的元素会变成黑色的，尝试一下。

<div class="ui inverted menu">

    之后就是这样一个效果，与之前的纯白色风格形成了对比，又是一种新的风格。

    但仔细发现，周围有圆角，不太好看。需要修改一下，加一个样式 style=“border-radius: 0” 就可以去除圆角了。

<div class="ui inverted menu" style="border-radius: 0">

下面展示一下其它类型的导航栏，代码就展示要变化的部分。
(1)这是使用secondary的导航栏

<div class="ui secondary menu" style="border-radius: 0">

展示效果：

（2）这是使用下划线式的导航栏

<div class="ui secondary pointing menu" style="border-radius: 0">

展示效果：

（3）这是使用卡片式的导航栏

<div class="ui tabular menu" style="border-radius: 0">
<div class="ui pointing menu" style="border-radius: 0">

展示效果如下：

3.为导航栏增添图标

    之前的导航栏是没有图标，而且是非常小的，现在我们做一些改动，让它变得美观一些。这里将原来的div标签换为nav标签。
主要代码如下：

<nav class="ui inverted attached segment">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <!--stackable 可堆叠 响应移动端-->
                <!--导航部分-->
                <h2 class="ui teal header item">Xuan</h2>
                <a href="#" class="item" style="font-size: large"><i class="home icon"></i>首页</a>
                <a href="#" class="item" style="font-size: large"><i class="idea icon"></i>分类</a>
                <a href="#" class="item" style="font-size: large"><i class="tags icon"></i>标签</a>
             
                <!--搜索框-->
                <div class="right item">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="搜索....">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
    </nav>

展示效果如下，比原来那个要大，带了图标的话比原来有感觉多了

4.为导航栏添加颜色

    我这里参考的是Collections中的Menu版块，这里面对于导航栏部分讲的挺详细的。

<!--个人建议：对于多分类的导航栏，可以用-->
<div class="ui red eight item inverted menu">
                <!--stackable 可堆叠 响应移动端-->
                <!--导航部分-->
                <!--8个部分 对应上面就是eight item-->
                <h2 class="ui header item">MyBlog</h2>
                <a href="#" class="red item" style="font-size: large"><i class="home icon"></i>首页</a>
                <a href="#" class="blue item" style="font-size: large"><i class="idea icon"></i>分类</a>
                <a href="#" class="pink item" style="font-size: large"><i class="tags icon"></i>标签</a>
                <a href="#" class="red item" style="font-size: large"><i class="home icon"></i>首页1</a>
                <a href="#" class="blue item" style="font-size: large"><i class="idea icon"></i>分类1</a>
                <a href="#" class="pink item" style="font-size: large"><i class="tags icon"></i>标签1</a>
                <!--搜索框-->
                <div class="right item">
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="搜索....">
                        <i class="search link icon"></i>
                    </div>
                </div>
    </div>

展示效果如下，比原本黑色，白色两个默认色的要好很多