logo

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

Navbar


导航样式组件,使用 flex 实现,只兼容 IE 10+ 及其他现代浏览器

等分布局

导航等分布局,在ul中添加.navbar-menuclass。在li中添加.navbar-itemclass。导航宽度自适应,用户可根据需要调整。

<ul class="navbar-menu">
    <li class="navbar-item current">
        <a href="">选项一</a>
    </li>
    <li class="navbar-item">
        <a href="">选项二</a>
    </li>
    <li class="navbar-item">
        <a href="">选项三</a>
    </li>
</ul>
                

换个皮肤

导航换个皮肤样式是在ul上追加.navbar-primaryclass让它换个皮肤试试。

导航新皮肤里有两种选中样式选择,在li中追加.current或者.selected

<ul class="navbar-menu navbar-primary">    
        <li class="navbar-item current">
            <a href="">选项一</a>
        </li>
        <li class="navbar-item selected">
            <a href="">选项二</a>
        </li>
        <li class="navbar-item">
            <a href="">选项三</a>
        </li>
</ul>
                

去除竖分割线

你可能不需要选项中间小分割线,试试在.navbar-menu后加navbar-border-none-right

<ul class="navbar-menu navbar-primary navbar-border-none-right">
        <li class="navbar-item current">
            <a href="">选项一</a>
        </li>
        <li class="navbar-item">
            <a href="">选项二</a>
        </li>
        <li class="navbar-item">
            <a href="">选项三</a>
        </li>
         <li class="navbar-item">
            <a href="">选项四</a>
        </li>
        <li class="navbar-item">
            <a href="">选项五</a>
        </li>
    </ul>
                

不等分布局

导航不等分布局,在实际开发中用到的也比较多,样式是在原来的基础上在.navbar-menu后追加.navbar-table,再在.navbar-menu外嵌套.navbar-table-wraper,为防止使用table布局导航的高度会被内容撑开影响布局。

怎么控制选项的宽度?试试在你要控制的选项中添加下面的class

  • .navbar-item-cel
  • .navbar-item-cel2
  • .navbar-item-cel3
  • .navbar-item-cel4
  • .navbar-item-cel5

具体Html结构请见下方demo


    <div class="navbar-table-wraper">
        <ul class="navbar-menu navbar-primary navbar-table">
            <li class="navbar-item current">
                <a href="">选项一</a>
            </li>
            <li class="navbar-item">
                <a href="">选项二</a>
            </li>
            <li class="navbar-item selected navbar-item-cel2">
                <a href="">
                    筛选<i class="fc fc-direction-up"></i>
                </a>
            </li>
            <li class="navbar-item navbar-item-cel">
                <a href="">
                    <i class="fc fc-circle-add"></i>
                </a>
            </li>
        </ul>
   </div>
                

灵活运用

可用导航栏做成选择样式

<div class="checked-container">
    <div class="checked-content">
        <ul class="navbar-menu bg-foreground border-none">
            <li class="navbar-item current border-default border-right">收件人</li>
            <li class="navbar-item">发件人</li>
            <li class="navbar-item">标题</li>
            <li class="navbar-item">全部</li>
        </ul>
    </div>
</div>
                
侧栏导航