草庐IT

Foundation5

全部标签

Foundation 图标

Foundation图标Foundation提供了283个图标,你可以使用css来定义它的样式尺寸。图标可用于文本,按钮,工具条,导航栏,表单等。以下是Foundation图标的实例:刷新按钮:检测图标:主页图标:图标语法创建图标语法格式如下:name部分替换为图标的名字。要使用图标我们需要在部分添加图标的样式文件:Icon实例以下演示了使用图标的实例: 实例 p>Cloudicon:iclass="fi-cloud">/i>/p>p>Cloudiconasalink:   ahref="#">iclass="fi-cloud">/i>/a>/p>p>StyledCloudicon:i cla

Foundation 图标

Foundation图标Foundation提供了283个图标,你可以使用css来定义它的样式尺寸。图标可用于文本,按钮,工具条,导航栏,表单等。以下是Foundation图标的实例:刷新按钮:检测图标:主页图标:图标语法创建图标语法格式如下:name部分替换为图标的名字。要使用图标我们需要在部分添加图标的样式文件:Icon实例以下演示了使用图标的实例: 实例 p>Cloudicon:iclass="fi-cloud">/i>/p>p>Cloudiconasalink:   ahref="#">iclass="fi-cloud">/i>/a>/p>p>StyledCloudicon:i cla

Foundation 按钮组

Foundation按钮组按钮组Foundation可以在同一行内创建一系列的按钮。可以使用元素并添加.button-group类来创建按钮组: 实例 ulclass="button-group"> li>buttontype="button" class="button">Apple/button>/li> li>buttontype="button" class="button">Samsung/button>/li> li>buttontype="button" class="button">Sony/button>/li>/ul>尝试一下»垂直按钮组垂直按钮组使用.stack类来创建。

Foundation 按钮组

Foundation按钮组按钮组Foundation可以在同一行内创建一系列的按钮。可以使用元素并添加.button-group类来创建按钮组: 实例 ulclass="button-group"> li>buttontype="button" class="button">Apple/button>/li> li>buttontype="button" class="button">Samsung/button>/li> li>buttontype="button" class="button">Sony/button>/li>/ul>尝试一下»垂直按钮组垂直按钮组使用.stack类来创建。

Foundation 按钮

Foundation按钮按钮样式Foundation提供了6种按钮样式。.button类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为:.secondary,.success,.info,.warning或.alert: 实例 buttontype="button"class="button">Default/button>button type="button"class="buttonsecondary">Secondary/button>button type="button"class="buttonsuccess">Success/button>button type="butt

Foundation 按钮

Foundation按钮按钮样式Foundation提供了6种按钮样式。.button类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为:.secondary,.success,.info,.warning或.alert: 实例 buttontype="button"class="button">Default/button>button type="button"class="buttonsecondary">Secondary/button>button type="button"class="buttonsuccess">Success/button>button type="butt

Foundation 表格

Foundation表格Foundation的元素样式为灰色斑马条纹且包含四个边框:实例 table> thead>   tr>      th>Firstname/th>     th>Lastname/th>      th>Email/th>   /tr> /thead> tbody>    tr>     td>John/td>      td>Doe/td>     td>john@example.com/td>    /tr>   tr>      td>Mary/td>     td>Moe/td>      td>mary@example.com/td>   /tr>    t

Foundation 表格

Foundation表格Foundation的元素样式为灰色斑马条纹且包含四个边框:实例 table> thead>   tr>      th>Firstname/th>     th>Lastname/th>      th>Email/th>   /tr> /thead> tbody>    tr>     td>John/td>      td>Doe/td>     td>john@example.com/td>    /tr>   tr>      td>Mary/td>     td>Moe/td>      td>mary@example.com/td>   /tr>    t

Foundation 文本

Foundation文本Foundation默认设置Foundation使用浏览器默认字体大小(font-size:100%)。对于大多数桌面浏览器来说,字体默认为16px。对于大多数移动端浏览器来说,字体默认为12px。默认的字体为"HelveticaNeue",line-height默认为1.5。以上默认的设置均是针对元素。Foundation文字排列设计本章节我们将讨论Foundation的文字排列设计。以下实例的真实样式请通过点击"尝试一下"按钮查看。-Foundation渲染的HTML标题(到)如下所示:实例h1>h1标题h1>h2>h2标题h2>h3>h3标题h3>h4>h4标题h

Foundation 文本

Foundation文本Foundation默认设置Foundation使用浏览器默认字体大小(font-size:100%)。对于大多数桌面浏览器来说,字体默认为16px。对于大多数移动端浏览器来说,字体默认为12px。默认的字体为"HelveticaNeue",line-height默认为1.5。以上默认的设置均是针对元素。Foundation文字排列设计本章节我们将讨论Foundation的文字排列设计。以下实例的真实样式请通过点击"尝试一下"按钮查看。-Foundation渲染的HTML标题(到)如下所示:实例h1>h1标题h1>h2>h2标题h2>h3>h3标题h3>h4>h4标题h