Foundation图片Foundation提供了响应式的图片，可以创建缩略图和图片弹窗：尝试一下»缩略图在元素外添加元素将图片作为一个锚链接。在标签中添加.th类将图片设置为缩略图。鼠标移动到上面会显示一个浅蓝色外框: 实例 ahref="paris.jpg"class="th"> imgsrc="paris.jpg"alt="Paris">/a>尝试一下»响应式图片Foundation中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。圆角图片我们可以在.th类添加.radius类来设置圆角缩略图： 实例 ahref="paris.jpg"class="thradi
Foundation图片Foundation提供了响应式的图片，可以创建缩略图和图片弹窗：尝试一下»缩略图在元素外添加元素将图片作为一个锚链接。在标签中添加.th类将图片设置为缩略图。鼠标移动到上面会显示一个浅蓝色外框: 实例 ahref="paris.jpg"class="th"> imgsrc="paris.jpg"alt="Paris">/a>尝试一下»响应式图片Foundation中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。圆角图片我们可以在.th类添加.radius类来设置圆角缩略图： 实例 ahref="paris.jpg"class="thradi
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面板是一个灰色边框，内容含有内边距的模块。可以使用.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进度条可以作为程序处理的程度来显示：我们可以在元素中使用.progress类来创建进度条，.meter类用于子元素()。我们可以在元素中设置进度百分比，如下所示： 实例 divclass="progress"> spanclass="meter" style="width:70%">/span>/div>尝试一下»进度条颜色默认情况下，进度条颜色为蓝色。不同颜色的类为：.secondary,.success,或.alert: 实例 divclass="progress"> spanclass="meter" style="width:50%">/s
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可以很简单的创建一个提醒框：提醒框可以使用.alert-box类创建,可以添加可选的类：.secondary,.success,.info,.warning或.alert: 实例 divdata-alertclass="alert-box"> Thisisa defaultalertbox. /div>divdata-alert class="alert-boxsecondary"> Thisisasecondaryalertbox. /div>divdata-alertclass="alert-boxsuccess"> strong>Succe
Foundation提醒框Foundation可以很简单的创建一个提醒框：提醒框可以使用.alert-box类创建,可以添加可选的类：.secondary,.success,.info,.warning或.alert: 实例 divdata-alertclass="alert-box"> Thisisa defaultalertbox. /div>divdata-alert class="alert-boxsecondary"> Thisisasecondaryalertbox. /div>divdata-alertclass="alert-boxsuccess"> strong>Succe
Foundation标签.label类用于提供一些附加信息: 实例h2>Examplespanclass="label">New/span>/h2>h3>Examplespanclass="label">New/span>/h3>h4>Examplespanclass="label">New/span>/h4>尝试一下»以下类可以设置标签的颜色:.secondary,.success,.info,.warning或.alert: 实例 spanclass="label">DefaultLabel/span>spanclass="label secondary">SecondaryLabel/s
Foundation标签.label类用于提供一些附加信息: 实例h2>Examplespanclass="label">New/span>/h2>h3>Examplespanclass="label">New/span>/h3>h4>Examplespanclass="label">New/span>/h4>尝试一下»以下类可以设置标签的颜色:.secondary,.success,.info,.warning或.alert: 实例 spanclass="label">DefaultLabel/span>spanclass="label secondary">SecondaryLabel/s
