文章: 阅读:

Foundation 顶部导航栏

顶部导航栏放在页面头部。如果想导航链接右对齐可以将 .left 修改为 .right。也可以同时设置左边对齐与右边对齐。导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线)。顶部导航栏可以设置下拉菜单。可以通过在 li 元素上添加 .has-dropdown 类来设置下拉菜单。使用 .divider 类来设置下拉菜单的分割线。在 li 内添加 label 元素来设置下拉菜单的标签 (标题)。
CSSFoundation

阅读全文 >>

Foundation 分页

要创建一个基础的分页功能需要在 ul 元素上加上 .pagination 类。可以在 li 加上 .current 类来标注当前页面。如果需要设置某个分页不可点击需要使用 .unavailable 类。在第一个和最后一个 li 元素上添加 .arrow 类插入 HTML 实体符号 « 和 » 来创建分页方向符号。可以在 ul 外层添加 div 元素，并在 div 上添加 .pagination-centered 类来实现分页居中显示。在 ul 元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在 li 上添加 .current 或 .unavailable 类设置当前页与不可点击效果。
CSSFoundation

阅读全文 >>

Foundation 选项卡

选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。选项卡使用 ul class="tabs" data-tab 来创建, 各个选项使用 li 元素并加上 .tab-title 类来创建。当前选中项可以使用 .active 类。垂直选项卡可以使用 .vertical 类。如果要设置切换标签，可以使用 div 元素加上 .content 类。每个选项卡上加上唯一的 ID, 并连接到列表项 (a href="#menu1" 将打开 id="menu1" 的选项内容)。最后将所有的选项内容放在 div 元素上，该 div 元素需要添加 .tabs-content 类，并初始化 Foundation JS。
CSSFoundation

阅读全文 >>

Foundation 列表

在 Foundation 中，无序列表 (ul) 的前缀符号为圆圈，使用 .circle 类。方块标识符前缀使用 .square 类。如果不需要标识符，可以使用 .no-bullet 类。如果需要添加一个水平的列表，可以在 ul 上添加 .inline-list 类。一些 Web 页面可能需要列表菜单。在 HTML 中，列表菜单同无序列表 ul 来定义。
CSSFoundation

阅读全文 >>

Foundation 下拉菜单

Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值。在小屏幕上，所有的下拉菜单的宽度是 100%。使用 .tiny, .small, .medium, .large 或 .mega 来修改下拉菜单的宽度。可以使用 .content 类为下拉菜单添加内边距。默认情况下下拉菜单在底部，可以通过添加 data-options="align left|right|top" 来修改其方向。默认情况下，下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示，可以在按钮上使用 data-options="is_hover:true" 属性。
CSSFoundation

阅读全文 >>

Foundation 图片

Foundation 中图片默认是响应式的，可以创建缩略图和图片弹窗。在 img 元素外添加 a 元素将图片作为一个锚链接。在 a 标签中添加 .th 类将图片设置为缩略图。鼠标移动到上面会显示一个浅蓝色外框。我们可以在 .th 类添加 .radius 类来设置圆角缩略图。Foundation 可以很容易实现图片弹窗。要创建一个弹窗可以在 ul 元素上添加 .clearing-thumbs 类及 data-clearing 属性。在 ul 内添加图片列表。当你需要实现只显示一张缩略图时你可以在 ul 中使用 .clearing-feature 类并在 li 中使用 .clearing-featured-img 类。
CSSFoundation

阅读全文 >>

Foundation 面板

Foundation 面板是一个灰色边框，内容含有内边距的模块。可以使用 .panel 类来创建。使用 .callout 类将面板颜色修改为浅蓝。使用 .radius 类将面板设置为圆角。可以使用 CSS 来自定义面板。
CSSFoundation

阅读全文 >>

Foundation 进度条

Foundation 进度条可以作为程序处理的程度来显示。可以在 div 元素中使用 .progress 类来创建进度条，.meter 类用于子元素 (span)。我们可以在 span 元素中设置进度百分比。默认情况下，进度条颜色为蓝色。不同颜色的类为 .secondary, .success, 或 .alert。.radius 和 .round 类用于为进度条添加圆角效果。可以使用 .small-num 或 .large-num 来修改进度条的宽度，num 是一个数字在 1 (8.33%) 和 12 (default (100%)) 之间。
CSSFoundation

阅读全文 >>

Foundation 提醒框

Foundation 提醒框。提醒框可以使用 .alert-box 类创建, 可以添加可选的类 .secondary, .success, .info, .warning 或 .alert。.radius 和 .round 类用于为提醒框添加圆角。要关闭提醒框，可以在连接或按钮元素上添加 class="close" 类，并初始化 Foundation JS。
CSSFoundation

阅读全文 >>

Foundation 标签

Foundation 标签。.label 类用于提供一些附加信息。以下类可以设置标签的颜色 .secondary, .success, .info, .warning 或 .alert。.radius 与 .round 类可以为标签添加圆角。可以使用 CSS 来修改标签的大小。
CSSFoundation

阅读全文 >>

Foundation 图标

Foundation 提供了 283 个图标，可以使用 CSS 来定义它的样式尺寸。图标可用于文本，按钮，工具条，导航栏，表单等。可以使用 .icon-bar 类来创建一个指定数量的工具栏图标。图标描述使用 label 元素。.disabled 类可以让图标变成不可点击状态，.vertical 类用于创建一个垂直的工具栏。
CSSFoundation

阅读全文 >>

Foundation 按钮

Foundation 提供了 6 种按钮样式。.button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为 .secondary, .success, .info, .warning 或 .alert。按钮类可以使用在 a, button, 或 input 元素。可以使用 .large, .small 或 .tiny 类来设置按钮大小。可以使用 .radius 和 .round 类来设置圆角按钮。可以使用 .expand 类来设置按钮的宽度为 100%。可以使用 .disabled 类来设置按钮不可点击。Foundation 可以在同一行内创建一系列的按钮。可以使用 ul 元素并添加 .button-group 类来创建按钮组。
CSSFoundation

阅读全文 >>

Foundation 文本

Foundation 使用浏览器默认字体大小 (font-size 为 100%;)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 "Helvetica Neue"，line-height 默认为 1.5。以上默认的设置均是针对 body 元素。Foundation 渲染的 HTML 标题 (h1 到 h6)。如果需要创建一个浅色的标题，可以在元素上添加 .subheader 类。在 Foundation 中，HTML small 元素用于创建一个浅色的副标题。
CSSFoundation

阅读全文 >>