ITPub博客

首页 > 应用开发 > Html/css > Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架

原创 Html/css 作者:as507169008 时间:2018-09-27 15:30:15 0 删除 编辑

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

Foundation 是一个以移动优先的流行框架。

::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 起步

什么是 Foundation?

Foundation 是一个免费的前端框架,用于快速开发。

Foundation 包含了 HTML 和 CSS 的设计模板,提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。

Foundation 移动优先,可创建响应式网页。

Foundation 适用于初学者和专业人士。

Foundation 已使用在 Facebook(脸书), eBay(易趣), Samsung(三星), Amazon(亚马逊), Disney(迪士尼)等。

。。。。。。。。

什么是响应式网页设计?

http:/ /

响应式Web设计(Responsive Web design)的理念是: 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

。。。。。。。。

Foundation CDN(推荐):

<!-- css 文件 -->:<link rel="stylesheet" href="

<!-- jQuery 库 -->:<script src="

<!-- JavaScript 文件 -->:<script src="

<!-- modernizr.js 文件 -->:<script src="

Foundation 使用 CDN 的优势:Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性

为什么使用 modernizr?

Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性,但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的JavaScript库 - 让组件能在所有浏览器上正常运行。

。。。。。。。。

使用 Foundation 创建页面

1. 添加 HTML5 doctype

Foundation 使用 HTML 元素和 CSS 属性,所以需要添加 HTML5 doctype 文档类型声明。

同时我们可以设置文档的语言属性 lang 及字符编码

2. Foundation 5 移动优先

Foundation 5 为移动设备的响应式设计。框架的核心是移动优先。

为了确保页面可自由缩放可以在 <head> 元素中添加右边的 <meta> 标签:<meta name="viewport" content="width=device-width, initial-scale=1">

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

3. 初始化组件

一些 Foundation 组件是基于 jQuery 开发的,如:模态框、下拉菜单等。你可以使用以下脚本来初始化组件:

<script>

$(document).ready(function() {

    $(document).foundation();

})

</script>

:::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 文本

Foundation 默认设置

Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面浏览器来说,字体默认为 16px。对于大多数移动端浏览器来说,字体默认为 12px。默认的字体为 "Helvetica Neue", line-height 默认为 1.5。

以上默认的设置均是针对 <body> 元素。

。。。。。。。。。。

Foundation 文字排列设计

<h1> - <h6> Foundation 渲染的 HTML 标题 (<h1> 到 <h6>) 

h1  (2.125rem - 2.75rem)

h2  (1.6875rem - 2.3125rem)

h3  (1.375rem - 1.6875rem)

h4  (1.125rem - 1.4375rem)

h5  (1.125rem)

h6  (1rem)

如果需要创建一个浅色的标题,可以在元素上添加 .subheader 类

。。。。。。。。。

<small> 在 Foundation 中, HTML <small> 元素用于创建一个浅色的副标题

。。。。。。。。。

<a> Foundation <a> 元素的样式,链接样式。

。。。。。。。。。

<abbr> Foundation <abbr> 元素的样式,添加的下划线为浅灰色虚线。

。。。。。。。。。

<blockquote> Foundation <blockquote> 元素的样式,定义块引用。

。。。。。。。。。

<dl> Foundation <dl> 元素的样式,定义一个描述性列表。

。。。。。。。。。

<code> Foundation <code> 元素的样式,添加文字背景为浅灰色有边框。

。。。。。。。。。

<kbd> Foundation <kbd> 元素的样式,接收键盘的输入指令。

。。。。。。。。。

<hr> Foundation <hr> 元素的样式,灰色的水平线。

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 表格

Foundation 的 <table> 元素样式为灰色斑马条纹且包含四个边框。

。。。。。。。。。

响应式表格

使用 CSS 让表格支持响应式设计:在表格外添加 <div> 元素,样式为 overflow-x:hidden

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 按钮

按钮样式

Foundation 提供了 6 种按钮样式。 .button 类创建了一个蓝色的按钮并附有内边距。不同颜色按钮类为: .secondary, .success, .info, .warning 或 .alert。按钮类可以使用在 <a>, <button>, 或 <input> 元素。

为什么将 a 标签的 href 设置为 # ?  当我们不希望链接点击跳转并得到 "404" 页面时,我们可以将 a 标签的 href 设置为 #。

。。。。。。。。

按钮大小,我们可以使用 .large(最大), .small(小号), .tiny(最小) 类来设置按钮大小。

。。。。。。。。

圆角按钮,可以使用 .radius 和 .round 类来设置圆角按钮

。。。。。。。。

延展按钮,可以使用 .expand 类来设置按钮的宽度为 100%

。。。。。。。。

禁用按钮,可以使用 .disabled 类来设置按钮不可点击

:::::::::::::::::::::::::::::::::::::::::::

Foundation 按钮组

按钮组,Foundation 可以在同一行内创建一系列的按钮。

可以使用 <ul> 元素并添加 .button-group 类来创建按钮组

。。。。。。。。

垂直按钮组

垂直按钮组使用 .stack 类来创建。注意,按钮会跨越父元素的整个宽度。.stack-for-small 类用于小尺寸的屏幕,按钮由水平排列变为垂直排列。

。。。。。。。。

均匀延展按钮组

.even-num 类用于在按钮组中均匀的分配按钮的宽度并跨越父元素 100% 宽度。

num 为按钮组中按钮的数量,从 1 到 8

。。。。。。。。

下拉菜单按钮

下拉菜单按钮可以让用户选取设定好的值

.dropdown 类创建一个下拉菜单按钮。

使用带有 data-dropdown="id" 属性的按钮或链接打开下拉菜单。

id 值需要与下拉菜单的内容的 (id) 匹配。

在 <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。

最后初始化 Foundation JS。

。。。。。。。。

分割按钮

我们也可以创建一个分割按钮的下拉菜单。只需要在按钮中添加 .split 类并使用 span 元素生成一个方向箭的按钮

:::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 图标

Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。

图标可用于文本,按钮,工具条,导航栏,表单等。

以下是 Foundation 图标的实例:

刷新按钮  

检测图标   

主页图标

。。。。。。。

图标语法

创建图标语法格式如右所示:<i class="fi-name"></i>

name 部分替换为图标的名字。

要使用图标我们需要在 <head> 部分添加图标的样式文件:<link rel="stylesheet" href="   

。。。。。。。

工具条图标,我们可以使用 .icon-bar 类来创建一个指定数量的工具栏图标,图标描述使用 <label> 元素。.disabled 类可以让图标变成不可点击状态。

。。。。。。。

垂直工具条图标

.vertical 类用于创建一个垂直的工具栏

::::::::::::::::::::::::::::::::::::::::::

Foundation 标签

.label 类用于提供一些附加信息,设置标签的颜色: .secondary, .success, .info, .warning 或 .alert

。。。。。。。

圆角标签。.radius 与 .round 类可以为标签添加圆角。可以使用 CSS 来修改标签的大小

::::::::::::::::::::::::::::::::::::::::::

Foundation 提醒框

Foundation 可以很简单的创建一个提醒框

提醒框可以使用 .alert-box 类创建, 可以添加可选的颜色类: .secondary, .success, .info, .warning 或 .alert。提醒框的宽度为容器的 100%。

。。。。。。。

圆角提醒框。.radius 和 .round 类用于为提醒框添加圆角

。。。。。。。

关闭提醒框

要关闭提醒框,可以在连接或按钮元素上添加 class="close" 类,并初始化 Foundation JS

&times; (×) 是一个 HTML 字符实体表示一个关闭按钮的图标,而不是字母 "x"。

::::::::::::::::::::::::::::::::::::::::::::

Foundation 进度条

Foundation 进度条可以作为程序处理的程度来显示

。。。。。。。

我们可以在 <div> 元素中使用 .progress 类来创建进度条, .meter 类用于子元素(<span>)。我们可以在 <span> 元素中设置进度百分比

。。。。。。。

进度条颜色

默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary, .success, 或 .alert

。。。。。。。

圆角进度条。.radius 和 .round 类用于为进度条添加圆角效果

。。。。。。。

进度条尺寸

可以使用 .small-num 或 .large-num 来修改进度条的宽度, num 是一个数字在 1(8.33%) 和 12(default (100%)) 之间

。。。。。。。

进度条标签,可以使用 CSS 为进度条添加标签。我们可以添加<span> 元素来显示百分比

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 面板

Foundation 面板是一个灰色边框,内容含有内边距的模块。可以使用 .panel 类来创建

。。。。。。。

面板颜色,使用 .callout 类将面板颜色修改为浅蓝

。。。。。。。

自定义面板

可以使用 CSS 来自定义面板。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 图片

Foundation 提供了响应式的图片,可以创建缩略图和图片弹窗,Foundation 中图片默认是响应式的。

。。。。。。。

缩略图

在 <img> 元素外添加 <a> 元素将图片作为一个锚链接。

在 <a> 标签中添加 .th 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框

。。。。。。。

圆角图片

我们可以在 .th 类添加 .radius 类来设置圆角缩略图

。。。。。。。

简洁的弹窗

Foundation 可以很容易实现图片弹窗。

要创建一个弹窗可以在 <ul> 元素上添加 .clearing-thumbs 类及 data-clearing 属性。在 <ul> 内添加图片列表。

注意: 图片弹窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。

图片文本描述,在img里面可以添加 data-caption 属性到每个图片来设置图片的描述, 你可以在 data-caption 属性中添加 HTML 元素,如 data-caption="<h2>Pulpit Rock</h2>

。。。。。。

只显示一张缩略图

当你需要实现只显示一张缩略图时你可以在 <ul> 中使用 .clearing-feature 类并在<li> 中使用 .clearing-featured-img 类。

:::::::::::::::::::::::::::::::::::::::::::::::

Foundation 下拉菜单

Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值

.dropdown 类为按钮添加一个向下的箭头符号"图标。

使用按钮或链接的 data-dropdown="id" 属性来打开下拉菜单。

id 值需要与下拉菜单的内容 (id) 匹配。

在 <div>, <nav>, <ul> 中添加 .f-dropdown 类和 data-dropdown-content 属性来创建下拉菜单的内容。

最后初始化 Foundation JS。

注意: 在小屏幕上,所有的下拉菜单的宽度是100%。

。。。。。。。。。

下拉菜单尺寸

使用 .tiny, .small, .medium, .large 或 .mega 来修改下拉菜单的宽度。

注意: 在小屏幕上,所有的下拉菜单的宽度是100%。

。。。。。。。。。

下拉菜单边距

可以使用 .content 类为下拉菜单添加内边距,没加就没有。

。。。。。。。。。

下拉菜单方向

默认情况下下拉菜单在底部,可以通过添加 data-options="align:left,right,top" 来修改其方向

。。。。。。。。。

下拉菜单触发条件

默认情况下,下拉菜单在点击按钮后显示。如果你需要在鼠标移动上去后显示,可以在按钮上使用 data-options="is_hover:true" 属性

。。。。。。。。

分割按钮

我们可以在按钮上添加 .split 类来设置一个分割效果的按钮,分割后会在 <span> 元素上生成一个方向向下的图标按钮

::::::::::::::::::::::::::::::::::::

Foundation 折叠列表

在你想隐藏部分内容的显示时,可以使用折叠列表。

。。。。。。。。

.accordion 类和 data-accordion 属性用于创建一个可折叠的元素。 .accordion-navigation 类用于渲染可折叠元素。实际的内容在 .content 类 (<div class="content") 中,点击按钮既可以显示。

我们在列表项中添加 <a> 元素来控制(显示/隐藏)可折叠的内容。然后锚链接使用与可折叠内容内容相同的id (<a href=#demo" 与 <div id="demo"> 相关联)。

注意: 可折叠的效果需要初始化 Foundation JS。

默认情况下,可折叠内容是隐藏的。我们可以通过在 <div> 上添加 .active 类让其默认是显示的

。。。。。。。。

手风琴效果

手风琴效果用于延展与设置可折叠内容。

手风琴效果通过使用多个不同的锚链接与id来创建

默认情况下,手风琴列表项有一个是打开的。如果你想关闭所有可以使用 data-options="multi_expand:true;" 属性

::::::::::::::::::::::::::::::::::::::::::

Foundation 列表

。。。。。。。

圆圈标识符,在 Foundation 中,无序列表 (<ul>) 的前缀符号为圆圈,使用 .circle 类

方块标识符,方块标识符前缀使用 .square 类

无标识符,如果你不需要标识符,你可以使用 .no-bullet 类

如果你需要添加一个水平的列表,可以在 <ul> 上添加 .inline-list 类

。。。。。。。

列表菜单

一些 Web 页面可能需要列表菜单。

在 HTML 中,列表菜单同无序列表 <ul> 来定义

::::::::::::::::::::::::::::::::::::::::::::::

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。

注意 .active 类会自动添加到当前选中的选项卡上

。。。。。。。

选项卡淡入

使用 CSS 来自定义选项卡淡入的效果

::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 分页

如果你的网页有很多内容,就需要使用分页功能。

分页 - 当前页。当前页面需要添加 .current 类

。。。。。。。

要创建一个基础的分页功能需要在 <ul> 元素上加上 .pagination 类,.pagination 类提供了分页链接

可以在 <li> 加上 .current 类来标注当前页面,如果需要设置某个分页不可点击需要使用 .unavailable 类

。。。。。。。

分页方向

在第一个和最后一个 <li> 元素上添加.arrow 类插入 HTML 实体符号 &laquo; 和 &raquo; 来创建分页方向符号

。。。。。。。

分页居中显示

我们可以在 <ul> 外层添加 <div> 元素,并在 <div> 上添加.pagination-centered 类来实现分页居中显示

。。。。。。。

面包屑导航

面包屑导航用于展示当前页面的导航结构。

在 <ul> 元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在 <li> 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:

。。。。。。。

子导航

在页面切换上,子导航是非常有用的。

在 <dl> 元素上添加 .sub-nav 类来创建子导航。在 <dt> 元素上添加标题,为选中的选项 <dd> 添加 .active 类

:::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 价格表

价格表可用于展示企业产品

ul.pricing-table - 定义价格表

li.title - 定义产品标题 (黑色背景)

li.price - 定义价格 (灰色背景字体大个项)

li.description - 定义产品描述 (如果需要)

li.bullet-item - 定义产品特点

li.ca-button - 按钮文本 (如 "Buy", "Join", "Sign Up", 等)

注意: 表格会 100% 填充容器的宽度,所有的项都有边框且是居中的。

。。。。。。。

价格表网格

:::::::::::::::::::::::::::::::::::::::::::::::

Foundation 顶部导航栏

顶部导航栏放在页面头部

使用 <nav class="top-bar" data-topbar> 创建标准工具条。 .title-area 类定义了网站logo区域 (必须防止 li.name 内) 。屏幕变小后你就可以看到一个 "menu" 按钮。 Foundation 的菜单会根据屏幕尺寸自动折叠和延展:

小屏幕上,由于尺寸的原因很多选项会被隐藏。 li.toggle-topbar menu.icon 类创建了一个菜单的按钮,点击它可以显示被隐藏的选项。

.top-bar-section 定义了导航的链接部分。 .left 类指定链接左对齐。 .active 类用于显示选中的项,背景为蓝色。

提示: 如果你想导航链接右对齐可以将 .left 修改为 .right,你可以同时设置左边对齐与右边对齐

导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线,小屏幕上是水平线)

。。。。。。。。

导航栏的下拉菜单

顶部导航栏可以设置下拉菜单。

可以通过在 <li> 元素上添加 .has-dropdown 类来设置下拉菜单

分割线,使用 .divider 类来设置下拉菜单的分割线

下拉菜单标签,在 <li> 内添加 <label> 元素来设置下拉菜单的标签(标题)

可点击,默认情况下导航栏的下拉菜单在鼠标移动过去后显示,我们可以使用 data-options="is_hover: false" 属性来设置导航栏在鼠标在点击后显示

。。。。。。。。

导航栏上的按钮及图标

你可以在导航栏上放置图标和按钮

。。。。。。。。

固定导航栏

导航栏可以固定在页面顶部。

页面滚动时导航栏在顶部是不会动的。

要固定导航栏只需要将导航栏放在 <div class="fixed"> 内即可

导航栏绝对定位

我们可以将导航栏放在 <div class="sticky"> 内来设置导航栏的绝对定位,当滚动条滚到到该区域时,该导航栏就像固定导航栏一样在顶部不动

当你使用 .sticky 类时,顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在 <nav> 上添加 data-options="sticky_on: small|medium|large" 属性即可

::::::::::::::::::::::::::::::::::::::::::::

Foundation 侧边栏

侧边栏导航,Foundation 使用 <ul class="side-nav"> 创建侧边栏

。。。。。。。。

激活链接与分割线,已点击的链接可以在 <li> 上使用 .active 类来标识,使用 .divider 类添加水平分割线

。。。。。。。。

网格中的侧边栏,我们可以使用网格设计模式来设置侧边导航栏

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 滑动导航(Off-Canvas)

侧边栏导航,Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出)

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 麦哲伦(Magellan)导航

Magellan,麦哲伦导航就是一个导航索引,位置是固定的,会根据用户滚动当前展示的内容自动切换导航栏上的导航项

麦哲伦导航内边距,默认情况下,麦哲伦导航的 <div> 元素有 10px 的内边距。可以使用 CSS 移除它

在 <div> 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。

然后在 <dd> 或 <li> 上添加 data-magellan-arrival="value" 属性,后面添加一个与该属性值一样的链接(page1)。

使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的 <a> 元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。

最后,初始化 Foundation JS ,用户在滚动页面时导航就会根据当前显示的内容自动切换。

。。。。。。。。。

麦哲伦导航选项

使用 data-options 属性修改麦哲伦导航的设置, 例如 <div data-magellan-expedition="fixed" data-options="destination_threshold:60">:

名称                            类型               默认                 描述

active_class                string           active             指定激活链接的类

threshold                    number       0                     指定导航在什么时候需要固定位置。会根据滚动条滚动计算,默认为 0 (auto)。

destination_threshold number       20                     设该值设定了导航链接显示为激活(蓝色背景)时导航列表距离顶部的值。

fixed_top                    number       0                     指定了导航条距离头部的像素值

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 表单

Foundation 表单控制会自动设置为全局样式:

所有 <textarea>, <select> 及 <input> 元素宽度都为 100%,且带有外边距、内边距、阴影和鼠标移动效果。

。。。。。。。。。

标签,在表单中使用 <label> 元素来设置标签,标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点,如果需要设置标签右对齐,可以使用 .right 类

。。。。。。。。。

Fieldset,Foundation 渲染 <fieldset> 元素的样式

。。。。。。。。。

错误状态

使用 .error 类来设置错误的标签、输入框、文本框样式,你需要使用 JavaScript 来更新用户输入的错误状态。

:::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 输入框尺寸,使用网格的列来设置输入框的大小,如 .large-6, .medium-6, 等。

。。。。。。。。。

内联标签,如果你希望你的标签内容显示在左边(不是上边),可以将标签元素 label 放在输入框左边的不同的列上,并使用 .inline 类来设置垂直居中

。。。。。。。。。

前置和后置标签

你可以在 <div class="row collapse"> 中添加前置和后置标签,元素为: <element class="postfix"> 或 <element class="prefix">。可以使用网格系统来设置前置和后置标签的大小

。。。。。。。。。

前置和后置标签按钮,可以使用 <a> 元素添加 .button 类来设置前置和后置按钮

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 开关

开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换

切换开关使用 <div class="switch"> 创建。 <div> 内添加带有唯一 id 的 <input type="checkbox"> , <label> 元素的 for 属性需要与 <input type="checkbox"> 的 id 相匹配

。。。。。。。。。

开关大小

使用 .large(最大), .small(小),.tiny(最小) 类来设置开关大小

。。。。。。。。。

圆角切换开关

使用 .radius 和 .round 类来设置圆角切换开关

。。。。。。。。。

开关组

可以通过设置单选按钮(radio)来设置单个选项。注意: 注意各个选项的 name 属性必须一致

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 滑块

Foundation 滑块允许用户通过拖动来选取区间值

滑块可以通过使用 <div class="range-slider" data-slider> 创建。在 <div> 内, 添加两个 <span> 元素: <span class="range-slider-handle"> 创建矩形滑块(蓝色背景), <span class="range-slider-active-segment"> 是在滑块后的灰色横条,是滑块拖动区域。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS

。。。。。。。。。

圆角和禁用滑块,使用 .radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块

。。。。。。。。。

垂直滑块,使用 .vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块

。。。。。。。。。

滑块值,默认情况下,滑块放在横条的中间 (数值为 "50")。可以通过添加 data-options="initial: num" 属性来修改默认值

。。。。。。。。。

显示滑块值,如果我们需要在滑块拖动时实时显示值,可以通过在 <div> 中添加 data-options="display_selector:#id" 属性且元素 id 值与滑块的 id 匹配

。。。。。。。。。

步长,默认情况下,滑块滑动的增加减少的数量为 "1"。可以通过添加 data-options="step: num;" 属性来修改步长值。

。。。。。。。。。

自定义区间,默认情况下,区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 提示框

提示框在鼠标移动到元素上后显示

我们可以在任何元素上添加 data-tooltip 属性来创建提示信息。使用 title 属性来设置提示信息的文本。

注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS

.has-tip 类可以加粗鼠标移动的文本

。。。。。。。。。。

提示框显示位置

默认情况下,提示框会出现在元素的底部。

可以使用 .tip-top, .tip-left, .tip-right or .tip-bottom (默认) 来设置提示框的位置。

注意: 在小尺寸的屏幕上,提示框的宽带是 100%。

。。。。。。。。。。

圆角提示框

.radius 和 .round 类用于设置圆角提示框

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 模态框

模态框是一个显示在页面头部的弹窗。

我们可以在容器元素上(如 <div id="myModal")使用唯一 ID,并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。

如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS

。。。。。。。。。。

模态框大小

可以在模态框容器上添加以下类来设置模态框的大小:

.tiny: 30% 宽度

.small: 40% 宽度

.medium: 60% 宽度

.large: 70% 宽度

.xlarge: 95% 宽度

.full: 100% 宽度和高度

注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度,在小屏幕设备上是 100% 宽度。

。。。。。。。。。。

内嵌模态框

你可以在模态框内嵌入模态框,可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id

第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时,不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性

:::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation Joyride

Joyride 是一个功能向导的 JavaScript 效果

最后,Joyride 需要使用 JavaScript 初始化它,代码为: $(document).foundation('joyride', 'start')

::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 均衡器(Equalizer)

我们可以在容器元素添加 data-equalizer 属性,并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。

注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS

。。。。。。。。。

不同屏幕的均衡器

在均衡器上通过添加 data-equalizer-mq="value" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一:

               描述

medium-up 默认。 创建相同高度的容器,宽度大于 40.063em

large-up    创建相同高度的容器,宽度大于 64.063em

xlarge-up    创建相同高度的容器,宽度大于 90.063em

xxlarge-up 创建相同高度的容器,宽度大于 120.063em

。。。。。。。。

嵌套内容,为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。 重复多次嵌套均衡器,确保他们是匹配的

:::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 网格系统

Foundation 网格系统为 12 列。

如果你不需要 12 列,你可以合并一些列,创建一些更大宽度的列。

Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上,可能是三列,小屏幕尺寸就可能是三个单列,按顺序排列。

。。。。。

网格列

Foundation 网格系统有三个列:

.small (手机端)

.medium (平板设备)

.large (电脑设备:笔记本,台式机)

以上类可以结合使用,创建更灵活的布局

。。。。。。

 .small-12, 这会创建 12 列(100%宽度)。

.small-4 的宽度为33.3% ,.small-8 的宽度为 66.6%。

 (.large-3 和 .large-9)。这意味着如果在大屏幕尺寸下,列就会变为 25% (.large-3) 和 75% (.large-9)的比例。同时我们也指定了小屏幕上列的比例 33% (.small-4) 和 66% (.small-8) 。这种组合的方式对于不同屏幕显示效果是非常有帮助的。

。。。。。。。

网格选项

下面总结了 Foundation 网格系统在多个设备上的说明:

                  小型设备Phones (<40.0625em (640px))         中等设备Tablets (>=40.0625em (640px))       大设备Laptops & Desktops (>=64.0625em (1025px))

网格行为  一直是水平的                                                 以折叠开始,断点以上是水平的                       以折叠开始,断点以上是水平的

类前缀      .small-*                                                         .medium-*                                                   .large-*

类的数量  12                                                                 12                                                                12

可内嵌      Yes                                                                 Yes                                                                Yes

偏移量      Yes                                                                 Yes                                                                Yes

列排序      Yes                                                                 Yes                                                                Yes

。。。。。。。。

宽屏,网格最大(.row) 宽度为 62.5rem。在宽屏上,当宽度大于 62.5rem, 列不会跨越页面的宽度, 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width

如果你使用默认的 max-width, 但希望背景颜色跨越整个页面宽度,你可以使用 .row 包裹整个容器,并指定你需要的背景颜色

::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 网格 - 水平堆叠

在 PC 和平板设备上它是水平平铺的,在手机等小型设备上它是水平堆叠的。

提示: .small|medium|large-* 类中的数字指定了跨越的列数。所以, .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。

注意: 要保证数列加起来是 12 列!

::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 网格 - 小型设备

假设我们在小型设备上有一个简单的网格布局,两列,宽度比例为 25% 和 75%。

提示: 小型设备的定义是屏幕小于 40.0625em。

小型设备上我们使用 .small-* 类,网格比例为 25%/75%。

Foundation 是移动优先: 如果没有特别说明,在大型设备上会继承 .small 类的代码: .small in them and use those",注意: 要保证数列加起来是 12 列!

如果需要设置 33.3%/66.6% 的比例,你可以使用 .small-4 和 .small-8

:::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 网格 - 中型设备

在中型设备上我们推荐的比例为 50%/50%。

提示: 中型设备的屏幕尺寸定义在 40.0625em 到 64.0624em 之间。

中型设备上使用 .medium-* 类。

小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)。但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6) 。注意: 要保证数列加起来是 12 列!

。。。。。。。。。。

仅在中型设备上使用

.medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度)

:::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 网格 - 大型设备

中型设备和小型设备的网格布局,小型设备上使用的比例为 25%/75% (.small-3 和 .small-9),但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)

在大型设备上我们推荐的比例为 33%/66%。

提示: 大型设备的屏幕尺寸定义大于 64.0625em。

大型设备上使用 .large-* 类。

。。。。。。。。。。

小型设备两个列的比例为 25%/75% (.small-3 和 .small-9)

中型设备两个列的比例为 50%/50% (.medium-6 和 .medium-6)

大型设备两个列的比例为 33%/66% (.large-4 和 .large-8)

注意: 要保证数列加起来是 12 列!

。。。。。。。。。。

仅在大型设备上使用

 .large-6 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度)

:::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 块状网格

块状网格用于均分页面内容:例如一行内要显示四张图片,不管什么屏幕下都需要均分宽度。

可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量

。。。。。。。。。

不同尺寸屏幕显示不同数量

通过添加多个网格块类可以设置不同尺寸屏幕显示不同的块数量

:::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation 网格

以下收集了一些网格常用的实例。

。。。。。。。

三个均等列,创建三个均等列 (33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠,.medium-4 columns,.medium-4 columns,.medium-4 columns

。。。。。。。

三个不均等列,创建三个不均等列 (25%/50%/25%),在中型和大型设备上显示三个列,在小型设备上自动堆叠,.medium-3 columns,.medium-6 columns,.medium-3 columns

。。。。。。。

两个均等列,创建两个均等列 (50%/50%),在小型、中型和大型设备上列的比例始终为 50%/50%,.small-6 columns,.small-6 columns

。。。。。。。

两个不均等列,创建两个不均等列 (33.3%/66.6%),在小型、中型和大型设备上列的比例始终为 33.3%/66.6%,.small-8 columns,.small-8 columns

。。。。。。。

修改列的顺序,通过使用 .small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序

。。。。。。。

混合:手机、桌面设备

Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用,让布局更加灵活:

提示: 每个类都能放大,如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*。

。。。。。。。

居中列,列居中可以使用 .small-centered 类。中型和大型设备可以继承小型设备的居中,但你需要在大型设备上设置居中类.large-centered 。

。。。。。。。

列偏移量,可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制

。。。。。。。

不完整列,如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动,并使用空白来填充剩下的列。

可选项 .end 类用于设置最后一列的元素向左边浮动

。。。。。。。

宽屏,网格 (.row) 最大尺寸( max-width)为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面,即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的 max-width

::::::::::::::::::::::::::::::::::::::::::::::

Foundation 图标

Foundation 提供了 283 图标,你可以使用 CSS 来渲染她们:修改大小和颜色。

图标创建语法格式如右所示:<i class="fi-name"></i>

语法中 name 部分为图标指定的名称。要使用图标,你可以将图标的样式文件放置在页面头部 <head> 部分,样式文件如下所示:

<link rel="stylesheet" href="

:::::::::::::::::::::::::::::::::::::::::::::::

Foundation CSS

Foundation 默认设置

Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说,字体大小默认为 16px。对于移动设备的浏览器,字体默认大小为 12px。 默认的字体为 "Helvetica Neue", line-height 默认为 1.5。

这些设置是适用于 <body> 元素内的元素。

此外, <p> 元素与底部的外边距(margin-bottom) 为 1.25rem , line-height 为 1.6。

。。。。。。。。。

文本

以下的 HTML 元素,Foundation 设置了独立的样式渲染它,不会采用浏览器默认样式。

元素                描述

<h1> - <h6> h1 - h6 标题

<a>                浅蓝色的链接,鼠标移动到链接会有下划线

<small>        浅灰色的副标题文本

<blockquote> 引用内容模块

<strong>        加粗文本

<em>            斜体

<abbr>        指定单词的缩写,使用该元素文本出现虚线下划线,鼠标移动上去会有提示信息

<kbd>            接收键盘输入指令: CTRL + P

<hr>            水平线

<code>        代码片段

<ul>                无序列表

<ol>                有序列表

<dl>                描述性列表

文本对齐

使用 CSS 类来修改文本的对齐方式

                   描述

.text-left        左对齐文本

.text-right        右对齐文本

.text-center    居中

.text-justify    两端对齐

不同尺寸屏幕的对齐

使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式

                                    描述

                  左对齐  

.small-text-left                 所有尺寸屏幕左对齐

.small-only-text-left        小尺寸屏幕左对齐(宽度小于 40em )

.medium-text-left            宽度大于 40.0625em 尺寸屏幕左对齐

.medium-only-text-left    宽度在 40.0625em 到 64em 尺寸的屏幕左对齐

.large-text-left                宽度大于 64.0625em 尺寸屏幕左对齐

.large-only-text-left        宽度在 64.0625em 到 90em 尺寸的屏幕左对齐

.xlarge-text-left            宽度大于 90.0625em 尺寸屏幕左对齐

.xlarge-only-text-left        宽度在 90.0625em 到 120em 尺寸的屏幕左对齐

.xxlarge-text-left            宽度大于 120em 尺寸屏幕左对齐

                  右对齐  

.small-text-right            所有尺寸屏幕右对齐

.small-only-text-right    小尺寸屏幕右对齐(宽度小于 40em )

.medium-text-right        宽度大于 40.0625em 尺寸屏幕右对齐

.medium-only-text-right 宽度在 40.0625em 到 64em 尺寸的屏幕右对齐

.large-text-right            宽度大于 64.0625em 尺寸屏幕右对齐

.large-only-text-right    宽度在 64.0625em 到 90em 尺寸的屏幕右对齐

.xlarge-text-right            宽度大于 90.0625em 尺寸屏幕右对齐

.xlarge-only-text-right    宽度在 90.0625em 到 120em 尺寸的屏幕右对齐

.xxlarge-text-right            宽度大于 120em 尺寸屏幕右对齐

                   居中对齐  

.small-text-center            所有尺寸屏幕居中对齐

.small-only-text-center    小尺寸屏幕居中对齐(宽度小于 40em )

.medium-text-center    宽度大于 40.0625em 尺寸屏幕居中对齐

.medium-only-text-center 宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐

.large-text-center            宽度大于 64.0625em 尺寸屏幕居中对齐

.large-only-text-center    宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐

.xlarge-text-center        宽度大于 90.0625em 尺寸屏幕居中对齐

.xlarge-only-text-center 宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐

.xxlarge-text-center        宽度大于 120em 尺寸屏幕居中对齐

                     两端对齐  

.small-text-justify            所有尺寸屏幕都两端对齐

.small-only-text-justify    小尺寸屏幕两端对齐(宽度小于 40em )

.medium-text-justify        宽度大于 40.0625em 尺寸屏幕两端对齐

.medium-only-text-justify 宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐

.large-text-justify            宽度大于 64.0625em 尺寸屏幕两端对齐

.large-only-text-justify    宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐

.xlarge-text-justify        宽度大于 90.0625em 尺寸屏幕两端对齐

.xlarge-only-text-justify 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐

.xxlarge-text-justify        宽度大于 120em 尺寸屏幕两端对齐

其他

                     描述

.left                  元素向左浮动

.right              元素向右浮动

.clearfix          清除浮动 - 必须添加在浮动元素的父元素上

.hide                  隐藏元素 (CSS display: none)

.list-inline          将所有元素设置在同一行

.lead                  让 <p>元素更突出

.subheader      设置浅色的 <h1> - <h6> 元素

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Foundation CSS 可见性

根据屏幕尺寸显示元素

以下类会根据设备(屏幕尺寸)来显示元素。

                                   描述

.show-for-small-only    只在小型设备上显示元素 (屏幕宽度小于 40.0625em )

.show-for-medium-up    在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em)

.show-for-medium-only 只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)

.show-for-large-up        在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em)

.show-for-large-only        只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)

.show-for-xlarge-up        在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em)

.show-for-xlarge-only    只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间)

.show-for-xxlarge-up    在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em)

。。。。。。。。。。

根据屏幕尺寸隐藏元素

以下类会根据设备(屏幕尺寸)来隐藏元素。

类                                 描述

.hide-for-small-only        只在小型设备上隐藏元素 (屏幕宽度小于 40.0625em )

.hide-for-medium-up    在中型及以上设备上隐藏元素 (屏幕宽度大于 40.0625em)

.hide-for-medium-only    只在中型设备上隐藏元素 (屏幕宽度在 40.0625em 到 64.0625em 之间)

.hide-for-large-up            在大型及以上设备上隐藏元素 (屏幕宽度大于 64.0625em)

.hide-for-large-only        只在大型设备上隐藏元素 (屏幕宽度在 64.0625em 到 90.0625em 之间)

.hide-for-xlarge-up        在更大型及以上设备上隐藏元素 (屏幕宽度大于 90.0625em)

.hide-for-xlarge-only    只在更大型及以上设备上隐藏元素 (屏幕宽度在 90.0625em 到 120.0625em之间)

.hide-for-xxlarge-up        在超大型及以上设备上隐藏元素 (屏幕宽度大于 120.0625em)

。。。。。。。。。。

根据屏幕方向显示元素

我们可以设置元素在不同方向是是否显示或隐藏。笔记本等桌面设备一般是横向的,但是手机和平板设备可以是横向或纵向,我们可以根据用户手机拿的方向来设置元素隐藏与显示

以下类会根据设备(屏幕尺寸)来隐藏元素。

                             描述

.show-for-landscape  在横向时显示元素(纵向隐藏)

.show-for-portrait      在纵向时显示元素(横向隐藏)

。。。。。。。。。。

触屏设备的显示与隐藏

你可以根据设备是否支持触摸来显示与隐藏元素。

                       描述

.show-for-touch 在支持触屏的设备上显示(不支持的设备上隐藏)

.hide-for-touch    在支持触屏的设备上隐藏(不支持的设备上显示)


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/31552074/viewspace-2215049/,如需转载,请注明出处,否则将追究法律责任。

下一篇: jQuery EasyUI
请登录后发表评论 登录
全部评论

注册时间:2018-09-14

  • 博文量
    144
  • 访问量
    75600