响应式框架Foundation（一）

<h1 class=“subheader”>浅色标题</h1>

浅色的副标题

<h2>主标题<small>浅色副标题</small></h2>

键盘上的按键

Delete

<kbd>Delete</kbd>

一条分隔线

---

<hr>

不同元素用的颜色不同按钮

<button type=“button” class="button">
蓝色按钮</button>

<button type=“button” class=“secondary”>
灰色按钮</button>

<button type=“button” class=“success”>
绿色按钮</button>

<button type=’'button" class=“info”>
淡蓝色按钮

<button type=“button” class="warning">
橘黄色按钮</button>

<button type=“button” class="alert">
红色按钮</button>

按钮组 无缝连接

<ul class="button-group">
<li><button type=“button” class=“button
alert”> 小红块</button>
</li>
<li><button type=“button” class=“button
info”> 淡绿色小块</button>
</li>
<li><button type=“button” class=“button
secondary”> 小灰色块</button>
</li>
<ul>

竖按钮组<ul class="button-group stack’>
小圆角按钮组
<ul class=“button-group” radius>
大圆角按钮组
<ul class=“button-group” round>
均匀分布占满一行按钮组 如：平均分三份
<ul class=“button-group even-3”>

下拉菜单 按钮

<\a href="#" data-dropdown=“ididid” class=“button dropdown”>Dropdown Button</a>
<\ul id=“ididid” data-dropdown-content class=“f-dropdown”>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>

class=“button split” 分隔下拉按钮