AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Foundation 图片2

2024-11-04 12
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Foundation 的简洁弹窗可轻松实现图片展示。只需在元素上添加 `.clearing-thumbs` 类和 `data-clearing` 属性，并在其中插入图片列表。需先初始化 Foundation JS。还可通过 `data-caption` 属性为每张图片添加描述，支持 HTML 元素。

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

要创建一个弹窗可以在

  • 元素上添加 .clearing-thumbs 类及 data-clearing 属性。在
    • 内添加图片列表。

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

      实例






      尝试一下 »
      图片文本描述
      可以添加 data-caption 属性到每个图片来设置图片的描述:

      实例






      尝试一下 »
      Note 提示： 你可以在 data-caption 属性中添加 HTML 元素，如 data-caption="

      Pulpit Rock

      Located in Norway

      "
文章标签：
JavaScript
前端开发
游客bl53zvy3izljy
目录
相关文章
游客bl53zvy3izljy
|
29天前
|
前端开发
Foundation 图标1
Foundation 图标提供了 283 个可自定义样式的图标，适用于文本、按钮、工具条、导航栏和表单等。使用方法简单，只需在 HTML 中添加相应的类名即可。例如：`<i class="fi-name"></i>`。需在 `<head>` 部分引入样式文件。
游客bl53zvy3izljy
38 7
游客bl53zvy3izljy
|
25天前
Foundation 图片1
Foundation 提供了响应式图片功能，支持创建缩略图和图片弹窗。通过在 `<img>` 元素外添加 `<a>` 元素并使用 `.th` 类，可以实现缩略图效果。此外，Foundation 的图片默认是响应式的，支持浏览器窗口大小调整。添加 `.radius` 类可创建圆角缩略图。
游客bl53zvy3izljy
25 2
游客bl53zvy3izljy
|
11天前
|
JavaScript 前端开发
Foundation 滑块1
Foundation 滑块组件允许用户通过拖动选择区间值。通过 `<div class="range-slider" data-slider>`
游客bl53zvy3izljy
25 5
游客bl53zvy3izljy
|
1月前
|
移动开发
Foundation 文本
Foundation框架默认使用浏览器的字体大小（桌面16px，移动12px），基础字体为"Helvetica Neue"，行高1.5。支持通过`.subheader`类创建浅色标题，提供多种HTML元素样式定制，如标题、链接、段落等，适用于不同场景的文字排版需求。
游客bl53zvy3izljy
34 23
游客bl53zvy3izljy
|
15天前
|
索引
Foundation 麦哲伦（Magellan）导航1
Foundation 麦哲伦（Magellan）导航是一种固定的导航索引，用于页面内跳转。通过在 HTML 中添加特定的 `data` 属性和链接，可以轻松创建导航条目。
游客bl53zvy3izljy
12 3
游客bl53zvy3izljy
|
15天前
Foundation 麦哲伦（Magellan）导航2
麦哲伦导航头部工具条示例：通过固定顶部栏实现页面内导航，包含两个导航链接分别指向“Page 1”和“Page 2”，并使用`data-magellan-destination`属性标记目标位置。
游客bl53zvy3izljy
22 2
游客bl53zvy3izljy
|
1月前
|
移动开发 前端开发 JavaScript
使用 Foundation 创建页面
使用 Foundation 框架创建页面时，需先添加 HTML5 doctype 和语言、字符编码设置。Foundation 5 采用移动优先策略，确保页面在移动设备上的良好显示，需在 `<head>` 中加入 viewport 元标签。此外，部分组件依赖 jQuery，需通过特定脚本初始化。
游客bl53zvy3izljy
54 22
游客bl53zvy3izljy
|
28天前
|
容器
Foundation 图标4
该示例展示了如何使用 `<label>` 元素为图标添加描述。每个图标按钮包含一个图标和一个标签，分别表示“主页”、“分享”、“信息”、“邮件”和“搜索”。整个图标栏通过 `div` 容器和类名 `icon-bar five-up` 进行布局。
游客bl53zvy3izljy
30 4
游客bl53zvy3izljy
|
24天前
Foundation 图片3
要仅显示一张缩略图，可以在 `<ul>` 中使用 `.clearing-feature` 类，并在特定的 `<li>` 中使用 `.clearing-featured-img` 类。
游客bl53zvy3izljy
20 0
游客bl53zvy3izljy
|
28天前
Foundation 图标2
以下示例展示了图标的不同用法：云图标、作为链接的云图标、样式化的云图标、主页图标、按钮上的主页图标、绿色按钮上的主页图标以及浅蓝色大链接按钮上的主页图标。
游客bl53zvy3izljy
13 1