Foundation滑动导航(Off-Canvas)侧边栏导航Off-Canvas滑动导航现在逐渐在移动页面变得越来越流行了(点击菜单按钮菜单从左侧滑出):创建滑动导航创建滑动导航实例如下：实例 divclass="off-canvas-wrap" data-offcanvas> divclass="inner-wrap"> navclass="tab-bar"> section class="left-small"> a class="left-off-canvas-togglemenu-icon"href="#">span>/span>/a> /sec
Foundation侧边栏侧边栏导航Foundation使用创建侧边栏:实例 ulclass="side-nav"> li>ahref="#">Link1/a>/li> li>ahref="#">Link2/a>/li> li>ahref="#">Link3/a>/li> li>ahref="#">Link4/a>/li>/ul>尝试一下»激活链接与分割线已点击的链接可以在上使用.active类来标识，使用.divider类添加水平分割线：实例 ulclass="side-nav"> liclass="active">aclass="a"href="#">Link 1/a>/li> li>
Foundation侧边栏侧边栏导航Foundation使用创建侧边栏:实例 ulclass="side-nav"> li>ahref="#">Link1/a>/li> li>ahref="#">Link2/a>/li> li>ahref="#">Link3/a>/li> li>ahref="#">Link4/a>/li>/ul>尝试一下»激活链接与分割线已点击的链接可以在上使用.active类来标识，使用.divider类添加水平分割线：实例 ulclass="side-nav"> liclass="active">aclass="a"href="#">Link 1/a>/li> li>
Foundation顶部导航栏顶部导航栏放在页面头部：实例 navclass="top-bar"data-topbar> ulclass="title-area"> liclass="name"> h1>ahref="#">WebSiteName/a>/h1> /li> .menu-icon类，可以去除图标。 如果需要只显示图片，可以删除"Menu"文本--> liclass="toggle-topbarmenu-icon">ahref="#">span>Menu/span>/a>/li> /ul> sectionclass="top-ba
Foundation顶部导航栏顶部导航栏放在页面头部：实例 navclass="top-bar"data-topbar> ulclass="title-area"> liclass="name"> h1>ahref="#">WebSiteName/a>/h1> /li> .menu-icon类，可以去除图标。 如果需要只显示图片，可以删除"Menu"文本--> liclass="toggle-topbarmenu-icon">ahref="#">span>Menu/span>/a>/li> /ul> sectionclass="top-ba
Foundation价格表价格表可用于展示企业产品:实例 ulclass="pricing-table"> liclass="title">Basic/li> liclass="price">$19.99/li> liclass="description">Great forsmallbusiness/li> liclass="bullet-item">24/7 Support/li> liclass="bullet-item">15GBStorage/li> li class="bullet-item">1GBBandwidth/li> liclass="cta-button">a cl
Foundation价格表价格表可用于展示企业产品:实例 ulclass="pricing-table"> liclass="title">Basic/li> liclass="price">$19.99/li> liclass="description">Great forsmallbusiness/li> liclass="bullet-item">24/7 Support/li> liclass="bullet-item">15GBStorage/li> li class="bullet-item">1GBBandwidth/li> liclass="cta-button">a cl
Foundation分页如果你的网页有很多内容，就需要使用分页功能。要创建一个基础的分页功能需要在元素上加上.pagination类:实例 ulclass="pagination"> li>ahref="#">1/a>/li> li>ahref="#">2/a>/li> li>ahref="#">3/a>/li> li>ahref="#">4/a>/li> li>ahref="#">5/a>/li>/ul>尝试一下»当前页面可以在加上.current类来标注当前页面：实例 ulclass="pagination"> liclass="current">ahref="#">1/a>/li>
Foundation分页如果你的网页有很多内容，就需要使用分页功能。要创建一个基础的分页功能需要在元素上加上.pagination类:实例 ulclass="pagination"> li>ahref="#">1/a>/li> li>ahref="#">2/a>/li> li>ahref="#">3/a>/li> li>ahref="#">4/a>/li> li>ahref="#">5/a>/li>/ul>尝试一下»当前页面可以在加上.current类来标注当前页面：实例 ulclass="pagination"> liclass="current">ahref="#">1/a>/li>
Foundation选项卡选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。选项卡使用来创建,各个选项使用元素并加上.tab-title类来创建。提示:当前选中项可以使用.active类。实例 ulclass="tabs"data-tab> liclass="tab-titleactive">ahref="#">Home/a>/li> liclass="tab-title">ahref="#">Menu 1/a>/li> liclass="tab-title">ahref="#">Menu2/a>/li> li class="tab-title">ahref="#">Menu3/a>
