Foundation图标
<p>图标格式是这样的<i class="fi-图标名字"></i></p>
指定数量的工具栏图标
图标下加文字
<div class="icon-bar five-up">
<a href="#" class="item">
<i class="fi-图标名字"></i>
<lable>图标下面加文字<lable>
</a>
略
</a>
不可点击
<a href="#" class="item disabled">
<i class="fi-home"></i>
</a>
垂直图标栏
<div class="icon-bar vertical five-up">
略
</div>
Foundation标签
label添加一些附加信息
<h2>下标还能换颜色<span class="label">label</span>
</h2>
圆角
<h1> 圆角<span class="label round">10</span>
可以把label当作font 使用CSS的style调大小
<h1> 圆角<span class="label round"
style="font-size:30px;">10</span>
提示框
<div data-alert class="alert-box info round">
提醒框的宽是容器的100%</div>
提示框的关闭
<div data-alert class="alert-box info round">
<a href="#" class="close">关闭这个提示框</a>
</div>
接着初始化Foundation
</script>
$(document).ready(function() {
$(document).foundation();
})
</script>
hr分隔线
进度条
<div class="progress success rounded large-6">
<span class="meter" style="position:relative;
width:75%">
<span class="css属性">75%</span>
</span>
</div>
面板
<div class="panel callout radius">
<h3>标题</h3>
<p>文本内容</p>
</div> 浅蓝色的圆角面板
panel属于class类可以在head的style里预设css属性
如: .panel{ : } div.abc{ : }
Foundation图片
圆角缩略图
<a href=".jpg" class="th radius">
<img src="paris.jpg" alt="123">
</a>
图片弹窗
<ul class="clearing-thumbs" data-clearing>
<li><a href="源图片地址.jpg" class="th"><img data-coption=“图片描述” src="缩略图地址.jpg"></a>
</li>
略
</ul>
`要用到js 需要初始化
<script>
$(document).ready(function(0 {
$(document).foundation();
})
</script>
```javascript
只要一张缩略图
<ul class=“clearing-thumbs clerting-feature”
data-clearing>
<li class=“clearing-featured-img”>
<a href=" " class=“th”>
<img data-caption=" " src=" ">
</a>
</li>
</ul>