威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / Web前端 > 大概占40%的项目使用了顶部工具栏

原标题:大概占40%的项目使用了顶部工具栏

浏览次数:151 时间:2020-03-17

那章大家要学的是foundation之最上端工具栏。Foundation的顶端工具栏是多个拾分精美有用的组件,但不是意味着在您的工程中就势需要接受它。小编推测,在运用Foundation来支付 过的类别中,大致占百分之三十的种类利用了最上端工具栏。你该认真解析项目要求来支配是不是相应选取最上端工具栏;最上端工具栏组件是比较轻易改造样式的,不过互相成效就相比较一定了。

着力布局

为了促成顶端工具栏,大家必要七个

标签,那标签包罗贰个必须要的class为“top-bar”

接着在

中间增多一个

  • ,个中三个
  • 来展示这些菜单的标题只怕logo。

备注:若是你只想展示“MENU”大概“三横”,就足以去掉menu-icon,也许是标签内容“Menu”。

TopBarTitle

Menu

丰富父链接

增添父链接是我们接下去要做的,关闭以前必要加上四个

标签,在此个section中需求加上二个冬辰列表。

在这里地,还是允许你选用“divider”来区分列表,可参看上面包车型地铁代码示例:

MainItem1

MainItem2

从代码中注意到,

中有个class为left,用来决定在左边手展示导航内容。以致能够添加多少个菜单链接,左右(class="right")显示导航内容。

到近来截至,大家所增加的代码能够水平地出示在顶上部分工具栏上,在小荧屏的道具上,将会成为二个下去菜单,点一下“MENU”或然“三横”按键就足以呈现出来。

加多子菜单

种种li项能够内嵌贰个冬日列表作为子菜单。为了落到实处那一个功用,父链接必需增加三个class为has-dropdown,内嵌的ul必得增多class为dropdown:

MainItem3

DropdownLevel3Label

DropdownLevel3a

DropdownLevel3b

DropdownLevel3c

备注:为了标识当前链接处于激活状态,能够增添active。

子菜单在大荧屏下显得为规范的下拉菜单,而在小显示屏则展现为“滑动块”。

外加设置

就算被叫为“最上部”栏,其实您可以停放在你的布局任哪儿方。固然您想稳固住那“最上部”栏,就须要增多二个div,并增多class为“fixed”,来含有顶上部分工具栏。再或许,你能够增多class“contain-to-grid”在主容器中来决定顶端工具栏的大幅度,更低价的是,能够同临时候利用两者。

假让你想顶上部分工具栏居于构造中间,当客户向下滚动的时候,并牢固在页面包车型地铁顶上部分,此时可同一时间利用class“contain-to-grid”和“sticky”。

丰裕一个追寻输入框

如果这一个效应还不可能满意你,你恐怕还亟需一个输入框来作为找出效率、邮箱注册成效、或许别的内容。大家需求在菜单列表项中增多三个含有 class“has-form”的li。见上面包车型大巴代码,大家在顶上部分工具栏中接收了网格功效。这使得相当的轻巧去构变成分——当然也能响应式,因为网格的列在小 荧屏上发出变化。

面包屑导航

面包屑导航在CMS系统页面中是很宽泛的,比如WordPress,在那之中一部分多等级次序的页面在动用起来有个别复杂。在任何多少个基于Foundation的品种中使用面包屑导航是超轻松的,在

  • Home
  • Features

本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处:大概占40%的项目使用了顶部工具栏

关键词:

上一篇:它会为需要适配的网站生成一行JS代码

下一篇:没有了