草庐IT

Foundation5

全部标签

Foundation 分页

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 分页

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 选项卡

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>

Foundation 选项卡

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>

Foundation 列表

Foundation列表在HTML中,无序列表()实例如下:ul> li>Listitem/li> li>Listitem/li> li>Listitem/li>  li>Listitem/li>/ul>结果:ListitemListitemListitemListitem圆圈标识符在Foundation中,无序列表()的前缀符号为圆圈,使用.circle类,实例如下:ulclass="circle"> li>Listitem/li> .../ul>尝试一下»方块标识符方块标识符前缀使用.square类:ulclass="square"> li>Listitem/li> .../ul>尝试一下

Foundation 列表

Foundation列表在HTML中,无序列表()实例如下:ul> li>Listitem/li> li>Listitem/li> li>Listitem/li>  li>Listitem/li>/ul>结果:ListitemListitemListitemListitem圆圈标识符在Foundation中,无序列表()的前缀符号为圆圈,使用.circle类,实例如下:ulclass="circle"> li>Listitem/li> .../ul>尝试一下»方块标识符方块标识符前缀使用.square类:ulclass="square"> li>Listitem/li> .../ul>尝试一下

Foundation 折叠列表

Foundation折叠列表在你想隐藏部分内容的显示时,可以使用折叠列表。 实例 ulclass="accordion"data-accordion> li class="accordion-navigation">   ahref="#demo">Simple Collapsible/a>   divid="demo"class="content">      菜鸟教程--学的不仅是技术,更是梦想!!!   /div> /li> /ul>script> $(document).ready(function(){    $(document).foundation();}) /script>尝

Foundation 折叠列表

Foundation折叠列表在你想隐藏部分内容的显示时,可以使用折叠列表。 实例 ulclass="accordion"data-accordion> li class="accordion-navigation">   ahref="#demo">Simple Collapsible/a>   divid="demo"class="content">      菜鸟教程--学的不仅是技术,更是梦想!!!   /div> /li> /ul>script> $(document).ready(function(){    $(document).foundation();}) /script>尝

Foundation 下拉菜单

Foundation下拉菜单Foundation下拉菜单允许用户从预定义的下拉列表中选取一个值: 实例 ahref="#"data-dropdown="id01"class="buttondropdown">DropdownButton/a> ulid="id01"data-dropdown-contentclass="f-dropdown"> li>a href="#">Link1/a>/li> li>ahref="#">Link2/a>/li>  li>ahref="#">Link3/a>/li>/ul> script> $(document).ready(function(){    $

Foundation 下拉菜单

Foundation下拉菜单Foundation下拉菜单允许用户从预定义的下拉列表中选取一个值: 实例 ahref="#"data-dropdown="id01"class="buttondropdown">DropdownButton/a> ulid="id01"data-dropdown-contentclass="f-dropdown"> li>a href="#">Link1/a>/li> li>ahref="#">Link2/a>/li>  li>ahref="#">Link3/a>/li>/ul> script> $(document).ready(function(){    $