草庐IT

FOUNDATION

全部标签

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(){    $

Foundation 图片

Foundation图片Foundation提供了响应式的图片,可以创建缩略图和图片弹窗:尝试一下»缩略图在元素外添加元素将图片作为一个锚链接。在标签中添加.th类将图片设置为缩略图。鼠标移动到上面会显示一个浅蓝色外框: 实例 ahref="paris.jpg"class="th">  imgsrc="paris.jpg"alt="Paris">/a>尝试一下»响应式图片Foundation中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。圆角图片我们可以在.th类添加.radius类来设置圆角缩略图: 实例 ahref="paris.jpg"class="thradi

Foundation 图片

Foundation图片Foundation提供了响应式的图片,可以创建缩略图和图片弹窗:尝试一下»缩略图在元素外添加元素将图片作为一个锚链接。在标签中添加.th类将图片设置为缩略图。鼠标移动到上面会显示一个浅蓝色外框: 实例 ahref="paris.jpg"class="th">  imgsrc="paris.jpg"alt="Paris">/a>尝试一下»响应式图片Foundation中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。圆角图片我们可以在.th类添加.radius类来设置圆角缩略图: 实例 ahref="paris.jpg"class="thradi

Foundation 面板

Foundation面板Foundation面板是一个灰色边框,内容含有内边距的模块。可以使用.panel类来创建: 实例 divclass="panel"> h3>标题/h3>  p>文本内容../p>/div>尝试一下»面板颜色使用.callout类将面板颜色修改为浅蓝: 实例 divclass="panelcallout"> h3>标题/h3>  p>文本内容../p>/div>尝试一下»圆角面板使用.radius类将面板设置为圆角: 实例 divclass="panelradius"> h3>标题/h3>  p>文本内容../p>/div>尝试一下»自定义面板可以使用CSS来自定义面板

Foundation 面板

Foundation面板Foundation面板是一个灰色边框,内容含有内边距的模块。可以使用.panel类来创建: 实例 divclass="panel"> h3>标题/h3>  p>文本内容../p>/div>尝试一下»面板颜色使用.callout类将面板颜色修改为浅蓝: 实例 divclass="panelcallout"> h3>标题/h3>  p>文本内容../p>/div>尝试一下»圆角面板使用.radius类将面板设置为圆角: 实例 divclass="panelradius"> h3>标题/h3>  p>文本内容../p>/div>尝试一下»自定义面板可以使用CSS来自定义面板

Foundation 进度条

Foundation进度条Foundation进度条可以作为程序处理的程度来显示:我们可以在元素中使用.progress类来创建进度条,.meter类用于子元素()。我们可以在元素中设置进度百分比,如下所示: 实例 divclass="progress"> spanclass="meter" style="width:70%">/span>/div>尝试一下»进度条颜色默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary,.success,或.alert: 实例 divclass="progress"> spanclass="meter" style="width:50%">/s

Foundation 进度条

Foundation进度条Foundation进度条可以作为程序处理的程度来显示:我们可以在元素中使用.progress类来创建进度条,.meter类用于子元素()。我们可以在元素中设置进度百分比,如下所示: 实例 divclass="progress"> spanclass="meter" style="width:70%">/span>/div>尝试一下»进度条颜色默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary,.success,或.alert: 实例 divclass="progress"> spanclass="meter" style="width:50%">/s