页面模块

前端页面常用到的模块样式。


导航

所有的导航都包含.nav样式,及特定导航的样式。

基本的导航效果,可用于侧导航或垂直方向上的文本导航。


手机列表显示 如下代码,添加列表含.icon-navicon样式的导航按钮,data-target为指定的对象,在指定显示导航的对象上添加.nav-navicon样式,即能实现手机列表显示导航。

在.nav的基本上,添加.nav-menu样式,同时为了方便在手机上使用,需在子菜单上添加.drop-menu样式。


附加信息 在含子菜单的链接内,可以添加.arrow样式,用作子菜单标识作用。同时标题.nav-head和更多.nav-more可以根据实际应用可删除。

实际应用中,更多的是使用一行内的导航,这时只需给.nav加上.nav-inline即可。

给.nav加上.nav-split,可以将导航的链接用竖线分隔,加上.nav-right,可以让导航链接右对齐。

给导航添加.nav-justified样式,可使导航向两端对齐。

给.nav样式添加.nav-big,可以改变导航条的大小。

在.nav的基础上,添加.nav-main样式,实现主要导航的效果。

给.nav加上.nav-sub样式,实现辅助导航样式。

标签导航基本样式,基于.nav样式,添加.nav-tabs样式。

基于.nav,添加.nav-pills样式,可实现胶囊导航效果。

当使用.bg-(*)系列样式时,背景色与文字的反色效果。

添加.nav-sitemap样式,两端对齐显示,显示为站点地图类导航,常用于站点地图或网站底部。