Foundation5 教程Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。Foundation 是一个以移动优先的流行框架。在线实例菜鸟... 阅读全文>>

Foundation 起步什么是 Foundation？ Foundation 是一个免费的前端框架，用于快速开发。 Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaS... 阅读全文>>

Foundation 文本Foundation 默认设置Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 "Helvetica Neue"... 阅读全文>>

Foundation 表格Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框：实例<table>  <thead>    <tr>   ... 阅读全文>>

Foundation 按钮按钮样式Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为： .secondary, .success, .info, .warning 或 .alert:实例<button typ... 阅读全文>>

Foundation 按钮组按钮组Foundation 可以在同一行内创建一系列的按钮。可以使用 <ul> 元素并添加 .button-group 类来创建按钮组：实例<ul class="button-group">  <li>&l... 阅读全文>>

Foundation 图标Foundation 提供了 283 个图标，你可以使用css来定义它的样式尺寸。图标可用于文本，按钮，工具条，导航栏，表单等。以下是 Foundation 图标的实例：刷新按钮: 检测图标: 主页图标: 图标语法创建图标语法格式如下:<... 阅读全文>>

Foundation 标签.label 类用于提供一些附加信息:实例<h2>Example <span class="label">New</span></h2><h3>Example <span class="l... 阅读全文>>

Foundation 提醒框Foundation 可以很简单的创建一个提醒框：提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning 或 .alert:实例<div data-alert... 阅读全文>>

Foundation 进度条Foundation 进度条可以作为程序处理的程度来显示：我们可以在 <div> 元素中使用 .progress 类来创建进度条，.meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百... 阅读全文>>

Foundation 面板Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建:实例<div class="panel">  <h3>标题</h3>  <p>文本内容.... 阅读全文>>

Foundation 图片Foundation 提供了响应式的图片，可以创建缩略图和图片弹窗：尝试一下 ?缩略图在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。在 <a> 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面... 阅读全文>>

Foundation 下拉菜单Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值：实例<!-- Trigger the Dropdown --><a href="#" data-dropdown="id01" class="button dro... 阅读全文>>

Foundation 折叠列表在你想隐藏部分内容的显示时，可以使用折叠列表。实例<ul class="accordion" data-accordion>  <li class="accordion-navigation">  ... 阅读全文>>

Foundation 列表在 HTML 中，无序列表 (<ul>) 实例如下:<ul>  <li>List item</li>  <li>List item</li>  <... 阅读全文>>

Foundation 选项卡选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。提示: 当前选中项可以使用... 阅读全文>>

Foundation 分页如果你的网页有很多内容，就需要使用分页功能。要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类:实例<ul class="pagination">  <li><a href... 阅读全文>>

Foundation 价格表价格表可用于展示企业产品:实例<ul class="pricing-table">  <li class="title">Basic</li>  <li class="price">$... 阅读全文>>

Foundation 顶部导航栏顶部导航栏放在页面头部：实例<nav class="top-bar" data-topbar>  <ul class="title-area">    <li class="na... 阅读全文>>

Foundation 侧边栏侧边栏导航Foundation 使用 <ul class="side-nav"> 创建侧边栏:实例<ul class="side-nav">  <li><a href="#">Link 1<... 阅读全文>>